Explication pratique HTML5 détaillée de l'utilisation de CSS pour créer une icône de temps (image)

Récemment, j'étais en train de repenser mon site de blog et j'ai décidé d'utiliser une icône de style calendrier pour afficher l'heure. La solution précédente consistait généralement à utiliser des images d'arrière-plan. Grâce à CSS3, nous pouvons désormais réaliser cette fonction en utilisant CSS3. J'utiliserai des dégradés linéaires, un rayon de bordure et des propriétés d'ombre de boîte pour remplacer le design photoshop précédent.

　Carte conceptuelle Photoshop

De nombreux designers utilisent la méthode de conception directement sur le navigateur, mais je préfère quand même le faire en premier Dessin conceptuel sous Photoshop. Bien que de nombreux effets puissent désormais être obtenus directement avec CSS, la manière de concevoir des effets à l'aide de Photoshop est beaucoup plus simple que d'essayer constamment de modifier CSS pour finalement obtenir l'effet souhaité.

Créez d'abord un rectangle arrondi et définissez le rayon arrondi sur 10px. Plus tard, nous utiliserons la propriété border-radius de CSS pour l'implémenter.

Ajoutez un dégradé vertical au rectangle. La couleur du dégradé va de #dad8d8 à #fcfcfc.

Définissez un trait de 1 pixel avec la couleur #e3e3e3

Enfin, ajoutez un effet d'ombre vers le bas avec une transparence de 20 %, distance de 0 pixels et taille de 15 pixels. Ces effets seront implémentés en CSS en utilisant la propriété box-shadow.

Copiez le rectangle tout à l'heure et retirez la partie supérieure. Modifiez le dégradé de # 790909 à # d40000 et remplissez le rectangle nouvellement créé où les informations du mois seront placées.

Définissez une ombre intérieure pour représenter la bordure supérieure, couleur #a13838, transparence 100 %, distance de 3 px et taille de 0 px.

Utilisez l'outil de police de Photoshop pour définir l'effet de police pour le contenu temporel dans la moitié supérieure de l'icône du calendrier. La police est Helvetica et la couleur est #9e9e9e.

Entrez les informations du mois dans la partie rouge ci-dessous, définissez la police sur large et la couleur sur blanc.

　Le modèle Photoshop est terminé. Dans le passé, nous extrayions l'image comme arrière-plan et y écrivions des numéros HTML, mais maintenant tout cela peut être réalisé avec CSS.

　Structure HTML

<p class="date">
    <p>25 <span>May</span></p></p>

Cette fois le html de la démo ICON est très simple. Nous utiliserons p avec class comme « date » comme conteneur, puis utiliserons une balise p pour représenter le numéro de date. Les jours et les mois sont représentés par des caractères de tailles différentes dans notre conception, nous utilisons donc la balise 45a2772a6b6107b401db3c9b82c049c2 pour traiter différents éléments différemment.

　style CSS

.date {
    width: 130px; height: 160px;
    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%);
}

　le style CSS définit d'abord la hauteur et la largeur de l'ensemble du conteneur, et peut être effectué via le dégradé de CSS Il est facile d'obtenir un effet de dégradé.

.date {
    width: 130px; height: 160px;
    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;
}

Utilisez l'attribut border pour obtenir l'effet de bordure de 1 px dans Photoshop, puis utilisez border-radius pour obtenir l'effet de coin arrondi. N'oubliez pas d'ajouter les préfixes -moz- et -webkit- pour la compatibilité avec les anciens navigateurs.

.date {
    width: 130px; height: 160px;
    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;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

La dernière partie du code utilise box-shadow pour obtenir l'effet d'ombre inférieur dans la conception Photoshop. Ajoutez un décalage horizontal et vertical de 0px et un flou de 15px. Utilisez rgba pour contrôler la transparence. Le 105 dans le design Photoshop est remplacé par 0,1 ici.

.date p {
    font-family: Helvetica, sans-serif;
    font-size: 100px; text-align: center; color: #9e9e9e;
}

Nous utilisons la balise p pour définir le style pour définir le style de texte pour la date. La police, la taille du texte et la couleur du texte sont toutes copiées à partir de Photoshop et l'alignement du texte est défini au centre. Mais le style affecte également le texte du mois. Ensuite, nous définirons séparément le style de la balise span.

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}

 

　　红色部分的实现是通过为span的背景设置linear-gradient属性实现的，红色的数值也是来自于photoshop。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
}

 

　　修改文字样式，使它和设计匹配，大小设置为45px，设置为粗体字，颜色设置为白色，使用text-transform实现大写转换。将span标签设置为块元素，这样他就会匹配容器的大小了，设置红色背景。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
    border-top: 3px solid #a13838;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    padding: 6px 0 6px 0;
}

　　剩下的就是添加头部边框，用border-top样式实现，还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。

　　浏览器兼容性

　　尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果，但是我们仍然要面对以前web设计师要面对的问题，浏览器兼容性。

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!