Récemment, je repensais mon propre 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 était généralement d'utiliser des images d'arrière-plan. Grâce à CSS3, nous pouvons maintenant implémenter de telles fonctions en utilisant CSS3. J'utiliserai certaines propriétés telles que les gradiements linéaires, le rayon de bordure et l'ombre de la boîte pour remplacer la conception précédente de Photoshop.
Diagramme de concept PhotoshopDe nombreux concepteurs utilisent la méthode de conception directement sur le navigateur, mais je préfère toujours la méthode de fabrication de diagrammes de concepts Photoshop en premier. Bien que de nombreux effets puissent être directement mis en œuvre avec CSS maintenant, la façon de concevoir des effets avec Photoshop est beaucoup plus simple que la façon d'essayer constamment de modifier CSS pour enfin réaliser l'effet que vous souhaitez.
Créez d'abord un rectangle arrondi et réglez le rayon d'angle arrondi à 10px. Après cela, nous utiliserons la propriété Border-Radius de CSS.
Ajoutez un dégradé vertical au rectangle, la couleur du dégradé est de # DAD8D8 à #FCFCFC.
Réglez une trait de 1 pixel, la couleur est # e3e3e3
Enfin, ajoutez un effet d'ombre vers le bas avec une transparence de 20%, une distance de 0 pixels et une taille de 15 pixels. Ces effets seront mis en œuvre dans CSS à l'aide de la propriété Box-Shadow.
Copiez le rectangle tout à l'heure et retirez la partie supérieure. Modifiez le dégradé, la couleur du # 790909 à # D40000, remplissez le rectangle nouvellement créé, qui placera les informations du mois.
Réglez une ombre intérieure pour représenter la bordure supérieure, la couleur est # A13838, 100% de transparence, de distance 3px et de taille 0px.
Utilisez l'outil de police de Photoshop pour définir l'effet de police de la première moitié de l'icône du calendrier. La police est Helvetica et la couleur est # 9E9E9E.
Entrez les informations du mois dans la section rouge ci-dessous, définissez la police sur large et la couleur en blanc.
Le modèle Photoshop est terminé. Dans le passé, nous retirions l'image comme arrière-plan et écrivions les numéros HTML dessus, mais maintenant tout cela peut être réalisé avec CSS.
Structure HTML<div class = date>
<p> 25 <span> peut </span> </p>
</div>
Cette fois, le HTML de l'icône est très simple. Nous utiliserons un div avec «date» de classe 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 différentes tailles dans notre conception, nous allons donc utiliser des balises <Span> pour traiter les différents éléments différemment.
style CSS.date {
Largeur: 130px; hauteur: 160px;
Contexte: #fcfcfc;
Contexte: Linear-Gradient (TOP, #FCFCFC 0%, # DAD8D8 100%);
Contexte: -moz-linear-gradient (top, #fcfcfc 0%, # dad8d8 100%);
Contexte: -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 l'effet de gradient peut être facilement réalisé grâce au gradient CSS.
.date {
Largeur: 130px; hauteur: 160px;
Contexte: #fcfcfc;
Contexte: Linear-Gradient (TOP, #FCFCFC 0%, # DAD8D8 100%);
Contexte: -moz-linear-gradient (top, #fcfcfc 0%, # dad8d8 100%);
Contexte: -Webkit-linear-gradient (top, #fcfcfc 0%, # dad8d8 100%);
Border: 1px solide # d2d2d2;
Border-Radius: 10px;
-Moz-Border-Radius: 10px;
-Webkit-Border-Radius: 10px;
}
Utilisez l'attribut de bordure pour réaliser l'effet de bordure 1px dans Photoshop, puis utilisez la radius frontalière pour réaliser l'effet d'angle arrondi. N'oubliez pas d'ajouter des préfixes -moz- et -webkit- pour permettre la compatibilité avec les anciens navigateurs.
.date {
Largeur: 130px; hauteur: 160px;
Contexte: #fcfcfc;
Contexte: Linear-Gradient (TOP, #FCFCFC 0%, # DAD8D8 100%);
Contexte: -moz-linear-gradient (top, #fcfcfc 0%, # dad8d8 100%);
Contexte: -Webkit-linear-gradient (top, #fcfcfc 0%, # dad8d8 100%);
Border: 1px solide # 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 consiste à réaliser l'effet d'ombre inférieur dans la conception de Photoshop via Box-Shadow. Ajoutez des décalages horizontaux et verticaux 0px pour augmenter l'ambiguïté de 15px. Utilisez RGBA pour contrôler la transparence. Dans la conception de Photoshop, 105 est remplacé par 0,1 ici.
.Date p {
Font-Family: Helvetica, Sans-Serif;
taille de police: 100px; Texte-aligne: Centre; Couleur: # 9E9E9E;
}
Nous utilisons la balise P pour définir les styles pour définir les styles de texte pour les dates. La police, la taille du texte et la couleur du texte sont tous copiés à partir de Photoshop, et le texte-aligne est défini au centre. Mais le style affecte également le texte du mois, et nous définirons le style de l'étiquette Span pour cela séparément.
.Date P Span {
Contexte: # D10000;
Contexte: Linear-Gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -moz-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -Webkit-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
}
L'implémentation de la partie rouge est obtenue en définissant l'attribut linéaire-gradient pour l'arrière-plan de la portée, et la valeur rouge provient également de Photoshop.
.Date P Span {
Contexte: # D10000;
Contexte: Linear-Gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -moz-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -Webkit-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
taille de police: 45px; Police-poids: Bold; Couleur: #ffff; Text-transform: majuscules;
Affichage: bloc;
}
Modifiez le style de texte pour correspondre à la conception, définissez la taille sur 45px, définissez-le sur une police en gras, définissez la couleur sur blanc et utilisez la transformation de texte pour implémenter la conversion de capital. Définissez la balise de span sur l'élément de bloc afin qu'il corresponde à la taille du conteneur et définissez un arrière-plan rouge.
.Date P Span {
Contexte: # D10000;
Contexte: Linear-Gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -moz-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
Contexte: -Webkit-linear-gradient (haut, # D10000 0%, # 7A0909 100%);
taille de police: 45px; Police-poids: Bold; Couleur: #ffff; Text-transform: majuscules;
Affichage: bloc;
Border-top: 3px solide # A13838;
Border-Radius: 0 0 10px 10px;
-Moz-Border-Radius: 0 0 10px 10px;
-Webkit-Border-Radius: 0 0 10px 10px;
rembourrage: 6px 0 6px 0;
}
Le reste est d'ajouter la bordure de la tête, d'utiliser le style de bordure pour l'implémenter et d'utiliser l'attribut Border-Radius pour implémenter les deux coins arrondis à la partie inférieure. Un petit attribut de rembourrage peut faire que le texte du mois a un espacement entre le haut et le bas et d'autres éléments.
Compatibilité du navigateurBien que les propriétés améliorées du CSS puissent nous aider à réaliser les effets des gradients et des ombres dans Photoshop, nous devons toujours faire face aux problèmes auxquels les concepteurs de sites ont dû faire face dans le passé, la compatibilité du navigateur.