Comment mettre en pratique la méthode Time ICON en utilisant les compétences du didacticiel css

Comment mettre en pratique la méthode Time ICON en utilisant les compétences du didacticiel css_html5

WBOY

Libérer： 2016-05-16 15:50:56

original

1467 Les gens l'ont consulté

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 propriétés de dégradés linéaires, de rayon de bordure et d'ombre de boîte pour remplacer la conception Photoshop précédente.

Carte conceptuelle Photoshop

De nombreux designers utilisent la méthode de conception directement sur le navigateur, mais je préfère toujours créer d'abord une carte conceptuelle 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 du coin 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 px avec la couleur #e3e3e3

Ajoutez enfin un effet d'ombre vers le bas avec une opacité de 20%, une distance de 0 px et une distance de Taille de 15 px. 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, 100 % de transparence, 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.

La maquette Photoshop est terminée. 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

25 Mai

;/div>
Le html de la démo ICON cette fois est très simple. Nous utiliserons un div avec la classe « 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 pour traiter différents éléments différemment.

style CSS

Copier le codeLe code est le suivant :

.date {
largeur : 130px ; hauteur : 160px ;
arrière-plan : #fcfcfc ;
arrière-plan : dégradé linéaire (haut, #fcfcfc 0%,#dad8d8 100%); 🎜>arrière-plan : -moz-linear-gradient(haut, #fcfcfc 0%, #dad8d8 100%);
arrière-plan : -webkit-linear-gradient(haut, #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 dégradé peut être facilement obtenu grâce au dégradé CSS.

Copier le code

Le code est le suivant :

.date {

largeur : 130px ; hauteur : 160px ;

arrière-plan : #fcfcfc ;
arrière-plan : gradient-linéaire (haut, #fcfcfc 0%,#dad8d8 100%) ; haut, # fcfcfc 0%, #dad8d8 100%);
arrière-plan : -webkit-linear-gradient(haut, #fcfcfc 0%, #dad8d8 100%
bordure : 1px solide #d2d2d2 ); >border-rayon : 10px ;
-moz-border-radius : 10px ;
-webkit-border-radius :
}

;

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.

Copier le code

Le code est le suivant :

.date {
largeur : 130px ; hauteur : 160px ;
arrière-plan : #fcfcfc ;
arrière-plan : gradient-linéaire (haut, #fcfcfc 0%,#dad8d8 100%) ; haut, # fcfcfc 0%, #dad8d8 100%);
arrière-plan : -webkit-linear-gradient(haut, #fcfcfc 0%, #dad8d8 100%
bordure : 1px solide #d2d2d2 ); >border-rayon : 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.

Copier le codeLe code est le suivant :

.date p {

font-famille : Helvetica, sans-serif ;
font-size : 100px ; text-align : center ; couleur : #9e9e9e ; Nous utilisons La balise p définit le style et implémente la définition du 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.

Copier le code

Le code est le suivant :

.date p span { arrière-plan : #d10000 ; arrière-plan : dégradé linéaire (haut, #d10000 0%, #7a0909 100%) arrière-plan : -moz-linear-gradient (haut, #d10000 0%, #7a0909) ; 100%) ; background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);

La mise en œuvre de la partie rouge est obtenu en définissant la propriété de dégradé linéaire pour l'arrière-plan de la travée. La valeur rouge provient également de Photoshop.

Copier le code

Le code est le suivant :

.date p span {

arrière-plan : #d10000 ; arrière-plan : dégradé linéaire (haut, #d10000 0%, #7a0909 100%) arrière-plan : -moz-linear-gradient (haut, #d10000 0%, #7a0909) ; 100%) ; arrière-plan : -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%) ; font-size : 45px ; font-weight : gras ; -transform : majuscule ;

affichage : bloc ;

}

Modifiez le style du texte pour qu'il corresponde au design, définissez la taille sur 45 px, définissez-le en gras. et couleur Définissez sur blanc et utilisez la transformation de texte pour obtenir une conversion en majuscules. Définissez la balise span en tant qu'élément de bloc afin qu'elle corresponde à la taille du conteneur et définissez un arrière-plan rouge.

Copier le code