Share
Aujourd'hui, j'aimerais vous montrer une astuce intéressante. Nous allons créer une icône de document avec du CSS3 pur. Mieux encore, cet effet ne nécessitera qu'un seul élément HTML.
Commençons!
Nous allons commencer par ajouter notre seul élément HTML: une balise d'ancrage. Cela a du sens, car la plupart des icônes servent aussi de liens.
Icône de document
Définissons les dimensions quelque peu arbitraires de notre icône. Nous ferons 40x56px - simplement pour cette démo. Dans une application réelle, vous voudrez probablement réduire cela! De plus, gardez à l’esprit que nous devons ajouter bloc de visualisation, puisque toutes les balises d'ancrage sont en ligne, par défaut.
.docIcon background: #eee; arrière-plan: dégradé linéaire (haut, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bordure: 1px solide #ccc; bloc de visualisation; largeur: 40px; hauteur: 56px; position: relative; marge: auto 42px;
Notez que, ci-dessus, nous définissons un contexte de positionnement afin de pouvoir utiliser des pseudo-éléments prochainement. Vous constaterez que je n'ai utilisé que la syntaxe officielle CSS3 pour le dégradé. Vous voudrez probablement utiliser les différents préfixes du navigateur. Pour accélérer les choses, vous pouvez utiliser Prefixr.com ou son API dans votre éditeur de code préféré. Copiez simplement l'extrait de code ci-dessus, collez-le dans la zone de texte de Prefixr et cliquez sur entrer. Il va ensuite recracher toutes les propriétés préfixées, comme ceci:
.docIcon background: #eee; arrière-plan: -webkit-linear-gradient (haut, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); arrière-plan: -moz-linear-gradient (haut, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); arrière-plan: -o-linear-gradient (top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); arrière-plan: -ms-linear-gradient (haut, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); arrière-plan: dégradé linéaire (haut, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); bordure: 1px solide #ccc; bloc de visualisation; largeur: 40px; hauteur: 56px; position: relative; marge: auto 42px;
Ensuite, ajoutons de la brillance en utilisant les ombres de la boîte CSS. J'ai aussi utilisé le retrait du texte propriété pour masquer le texte.
.docIcon ? -webkit-box-shadow: rgba inséré (255,255,255,0.8) 0 1px 1px; -moz-box-shadow: rgba incrusté (255,255,255,0,8) 0 1px 1px; box-shadow: inset rgba (255,255,255,0,8) 0 1 pixel 1 pixel; retrait du texte: -9999em;
Ensuite, nous devons créer un effet de coin arrondi. Ajouter ce qui suit:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
En passant quatre valeurs, nous pouvons spécifier les rayons supérieur, droit, inférieur et gauche en conséquence. Ceci est similaire à la façon dont vous appliquez des marges ou un remplissage.
Pour créer l'illusion d'un coin recourbé, nous allons utiliser le contenu généré, ou pseudo-éléments.
Tout d'abord, ajouter du contenu :avant notre icône. Dans ce cas, nous n’avons pas besoin de texte spécifique. Au lieu de cela, nous devons créer une boîte de 15 pixels et appliquer un dégradé d’arrière-plan..
.docIcon: before content: ""; bloc de visualisation; position: absolue; en haut: 0; à droite: 0; largeur: 15px; hauteur: 15px; arrière-plan: #ccc; arrière-plan: -webkit-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); arrière-plan: -moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); arrière-plan: -o-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); arrière-plan: -ms-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); arrière-plan: gradient linéaire (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, blanc incrusté 0 0 1px; -moz-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, blanc incrusté 0 0 1px; box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, blanc incrusté 0 0 1px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;
Pour que notre contenu généré reçoive également le bord arrondi en haut à droite, nous devons, à nouveau, appliquer les mêmes rayons pour l'aligner..
? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
Ensuite, nous allons utiliser le :après élément psuedo pour ajouter des lignes en pointillés représentant le texte zoomé. Appliquer une largeur de 60% et un marge gauche et marge droite de 20% (ce qui équivaut à 100%). Ensuite, nous spécifions une hauteur et le positionnons à 0 0.
.docIcon: après contenu: ""; bloc de visualisation; position: absolue; gauche: 0; en haut: 0; largeur: 60%; marge: 22 px 20% 0; hauteur: 15px;
Créer un ensemble de lignes est un peu délicat. Cependant, si nous sommes intelligents, nous pouvons utiliser les dégradés CSS pour obtenir cet effet. Commencez par diviser par cinq la hauteur totale et définissez chaque bloc avec un remplissage plein. Reportez-vous à l'image ci-dessous pour une illustration plus claire de cette pensée. Nifty, oui? C'est une belle technique à avoir dans votre toolbelt.
.docIcon: après ? arrière-plan: #ccc; arrière-plan: -webkit-linear-gradient (haut, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); arrière-plan: -moz-linear-gradient (haut, #ccc 0, # cc 20%, #fff 20%, # fff 40%, # cc 40%, # ccc 60%, # fff 60%, #fff 80%, #ccc 80%, #ccc 100%); arrière-plan: -o-linear-gradient (haut, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); arrière-plan: -ms-linear-gradient (haut, #ccc 0, # ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); arrière-plan: dégradé linéaire (en haut, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Démo en direct Avez-vous apprécié le post? Avez-vous d'autres astuces similaires? Si oui, faites un lien vers eux dans les commentaires ci-dessous.
Accentsconagua