voici un petit clendrier bien sympa et qui s'intégre facillement :
les classes CSS utiles :
.date {
width: 80px; height: 96px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-left: -8%;
}
.date p {
font-family: Helvetica, sans-serif;
font-size: 53px; text-align: center; color: #9e9e9e;
margin-top: 25px;
}
.date p span {
background: #e84542;
background: linear-gradient(top, #e84542 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #e84542 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #e84542 0%, #7a0909 100%);
font-size: 33px; font-weight: bold; color: #fff; text-transform: uppercase; display: block;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 9px 0 10px 0;
margin-top: 16px;
}
Libre à vous de l'intégrer comme bon vous semble.
en HTML tout simplement :
<div class="date">
<p>24 <span>JUIL</span></p>
</div>
ou en php (dans mon cas j'ai utiliser le php car j'ai utiliser ce calendrier dans un template joomla et j'avais besoin qu'il m'affiche automatiquement la date de création d'un article)
<?php if ($displayData['params']->get('show_create_date')) : ?>
<div class="pull-left"> <div class="date">
<p><?php echo JHtml::_('date', $displayData['item']->created, 'd'); ?> <span><?php echo JHtml::_('date', $displayData['item']->created, 'M') ?></span></p>
</div>
</div>
<?php endif; ?>
Vous pouvez aussi le reproduire via photoshop, pour plus d'infos je vous invite à visiter ce site
Aucun commentaire:
Enregistrer un commentaire