CSS3 Cookbook 7 Recettes CSS super faciles à copier et coller

À ce jour, vous avez probablement déjà vu assez de tutoriels CSS3 assez longs pour durer toute une vie. Vous commencez probablement à vous familiariser avec ce que CSS3 a à offrir et vous êtes prêt à dépasser la théorie de base et à voir quelques exemples de conception pratiques que vous pouvez copier et coller directement dans votre code sans passer au travers de tonnes de commentaires.

Eh bien, vous avez de la chance car c'est exactement ce que nous avons pour vous aujourd'hui! Vous trouverez ci-dessous sept astuces CSS amusantes et attrayantes que vous pouvez saisir et insérer directement dans vos propres projets et que vous pouvez personnaliser à votre guise. Gardez à l'esprit que, étant donné que cette technologie est toujours à la pointe de la technologie, les anciens navigateurs n'en prendront pas en charge la plupart. J'ai essayé de garantir une dégradation progressive, dans la mesure du possible, afin que vous puissiez fournir une expérience de travail à tous les utilisateurs et une meilleure expérience à ceux qui utilisent Webkit.

Typographie

Insetting text est assez simple en CSS. Pour ce faire, vous aurez besoin de trois couleurs: une couleur de fond, une nuance plus claire de la couleur de fond et une nuance plus foncée de la couleur de fond.

Pour commencer, remplissez votre texte avec la nuance plus foncée de votre couleur de fond. Ensuite, appliquez simplement une ombre de texte CSS3 qui est une nuance plus claire et qui a pour effet de créer un aspect en relief.

Le HTML

<p>pressé</p>

Le CSS

corps {background: # 222222; couleur: # 131313; taille de la police: 200px; } #container p {text-align: center; text-transform: majuscule; text-shadow: # 2c2c2c 3px 3px 5px; }

Lettres minuscules

L'effet des petites majuscules se produit lorsque toutes les lettres d'un titre sont en majuscules, mais que les lettres initiales de chaque mot sont plus grandes que les autres. C'est un effet simple et agréable que vous ne voyez pas souvent sur le Web (pas vraiment CSS3 mais quand même cool!).

Un moyen facile de faire cela est simplement d'insérer?petit? balises dans votre code HTML, puis de les styler avec une taille de police légèrement inférieure au reste du titre. Quelques intervenants m'ont informé qu'il existe en fait un moyen plus facile d'y parvenir! Il suffit d'utiliser? Font-variante: small-caps ;? et vous êtes prêt à partir!

J'ai aussi utilisé les? Majuscules? text-trasform juste pour le plaisir. Cela transformera automatiquement le texte en minuscule et le transformera, ce qui facilitera la modification du code HTML tout en conservant le même aspect, même si vous ne vous souvenez pas de taper tout en majuscule.

Le HTML

<p>Lettres minuscules</p>

Le CSS

body {background: # 2c2b2b; couleur: # 131313; taille de la police: 200px; } #container p {text-align: center; text-transform: majuscule; text-shadow: # 363535 3px 3px 5px; variante de police: petites majuscules; }

Coupon CSS

Celui-ci est utile pour les détaillants en ligne qui souhaitent proposer des promotions, des soldes, des coupons en ligne, etc. Le traitement frontal typique que vous voyez sur la plupart des sites Web est simplement une ligne solide, mais vous pouvez également choisir des lignes pointillées ou pointillées vers une frontière.

Combinez cela avec des coins arrondis CSS3 et une zone d'ombre et vous obtenez un joli petit graphique de coupon CSS!

Le HTML

<h2>10 $ de rabais</h2>

Le CSS

body {background: # 21303b; couleur: # 000; } h2 {font-size: 80px; hauteur de ligne: 70px; famille de polices: Helvetica, sans-serif; poids de police: gras; text-align: center; text-transform: majuscule; } #container {background-color: white; hauteur: 200px; largeur: 400px; marge: auto 100px; bordure: 3 pixels pointillés # 21303b; / * shadow * / -webkit-box-shadow: 10px 10px 10px # 000; -moz-box-shadow: 10px 10px 10px # 000; box-shadow: 10px 10px 10px # 000; / * coins arrondis * / -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

Cousu

Pendant que nous parlons de traitements en bordure en pointillés, voici une autre astuce que vous pouvez utiliser pour donner à une boîte une illusion subtile cousue.

Cette fois, au lieu d’une bordure, nous utilisons un contour. Un contour peut être facilement inséré en utilisant une valeur négative sur la commande contour-offset.

Le HTML

<h2>Cousu</h2>

Le CSS

body {background: # 21303b; couleur: #fff; } h2 {font-size: 70px; hauteur de ligne: 190px; famille de polices: Helvetica, sans-serif; poids de police: gras; text-align: center; } #container {/ * stitching * / outline: 1px en pointillé # 98abb9; contour-offset: -5px; couleur de fond: # 556068; hauteur: 200px; largeur: 400px; marge: auto 100px; / * shadow * / -webkit-box-shadow: 2 pixels 2 pixels 2 pixels # 000; -moz-box-shadow: 2px 2px 2px # 000; box-shadow: 2 pixels 2 pixels 2 pixels # 000; }

Brillant

Cet effet Web 2.0 populaire et peut-être surutilisé nécessitait au moins une image. Maintenant, en utilisant CSS3 et un peu de dégradé d’arrière-plan, vous savez comment recréer cet éclat en utilisant uniquement du code.

Il est parfois difficile de créer des dégradés CSS complexes. Je vous recommande donc d'utiliser Ultimate CSS Gradient Generator ou quelque chose de similaire pour automatiser le processus.

Le HTML

<h2>Brillant</h2>

Le CSS

body {background: # 21303b; couleur: #fff; } h2 {font-size: 120px; hauteur de ligne: 190px; famille de polices: Helvetica, sans-serif; poids de police: gras; text-align: center; texte-ombre: rgba (0, 0, 0, .3) 5px 5px 5px; } #container {/ * gradient * / background: # 666666; / * anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, n ° 666666 4%, n ° 545454 50%, n ° 3A3A3A 51%, n ° 131313 100%); / * firefox * / background: -webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (4%, # 666666), arrêt de couleur (50%, # 545454), arrêt de couleur (51%, # 3A3A3A), couleur-stop (100%, # 131313)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 666666", endColorstr = "# 131313", GradientType = 0); / * ie * / / * styles de boîte * / hauteur: 200px; largeur: 400px; marge: auto 100px; / * shadow * / -webkit-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); -moz-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); boîte-ombre: 5px 5px 5px rgba (0, 0, 0, .3); / * coins * / -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }

Stroked Text & @ font-face

Dans cet exemple, vous obtenez deux astuces en une! Vous verrez la syntaxe pour ajouter des traits de texte dans webkit, ainsi que pour ajouter des polices personnalisées dans tous les navigateurs modernes utilisant @ font-face.

La police que j'ai utilisée dans l'exemple ci-dessous s'appelle Jungle Fever et peut être téléchargée sous forme de kit @ font-face à partir de Font Squirrel.

Le HTML

<h2>jurassique</h2>

Le CSS

/ * Polices * / @ font-face {font-family: 'JungleFeverRegular'; src: url ('JungleFever-webfont.eot'); src: format local ('?'), format url ('jungleFever-webfont.woff' ('woff'), format url ('JungleFever-webfont.ttf') ('type exact'), url ('JungleFever-webfont. svg # webfontBlD2f3Gz ') format (' svg '); poids de la police: normal; style de police: normal; } body {background: # 222; couleur: # 111; } h2 {font-size: 150px; hauteur de ligne: 200px; famille de polices: 'JungleFeverRegular', Helvetica, sans-serif; poids de police: gras; text-align: center; texte-ombre: rgba (0, 0, 0, .2) 3px 3px 3px; / * trait de texte * / -webkit-text-stroke: 2px # fff473; }

Texte à double trait

J'ai découvert cette astuce complètement par accident en construisant du texte en dégradé pour l'exemple précédent. Il s'avère que si vous utilisez du RGBa sur du texte masqué et que vous réduisez légèrement l'opacité, vous pouvez obtenir un double trait impressionnant! Je ne suis pas tout à fait sûr de savoir pourquoi cela fonctionne (quelque chose à voir avec le saignement de l'AVC?) Mais ça marche!

Le HTML

<h2>Homard</h2>

Le CSS

/ * Polices * / @ font-face {font-family: 'Lobster13Regular'; src: url ('Lobster_1.3-webfont.eot'); src: format local ('?'), url ('Lobster_1.3-webfont.woff') ('woff'), url ('Lobster_1.3-webfont.ttf') ('type réel'), URL (' Lobster_1.3-webfont.svg # webfontcOtP3oQb ') format (' svg '); poids de la police: normal; style de police: normal; } body {background: # 731e1e; couleur: #fff; } h2 {font-size: 220px; hauteur de ligne: 220px; famille de polices: 'Lobster13Regular', Helvetica, sans-serif; poids de police: gras; text-align: center; texte-ombre: rgba (0, 0, 0, .2) 3px 3px 3px; / * trait de texte * / -webkit-text-stroke: 4px rgba (0, 0, 0, .6); }

Conclusion

Comme je l'ai dit dans les déclarations liminaires, n'hésitez pas à copier et à utiliser les exemples ci-dessus comme vous le souhaitez. Laissez un commentaire ci-dessous si vous avez des idées pour améliorer ces astuces, que ce soit pour leur donner un aspect plus cool ou plus convivial pour tous les navigateurs. Ils sont loin d'être parfaits et je veux vous voir les améliorer!