mardi 29 juillet 2014

[CSS][PHP] Création d'un calendrier en CSS

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