Déclaration de droits d'auteur : Les droits d'auteur de cet article appartiennent à l'auteur original. La traduction est uniquement destinée aux lecteurs nationaux
. Résumé de cet article : Les astuces CSS les plus couramment utilisées, telles que les coins arrondis, les lettrines, etc.
Il y avait une traduction précédente de "8 astuces CSS en une phrase" qui présentait 8 astuces CSS en une phrase très utiles. Cette semaine, je vais vous proposer un article similaire, qui présente certaines des astuces CSS les plus couramment utilisées, ou cela s'appelle un. Astuce CSS. Bien sûr, je pense que chaque designer aura ses préférences personnelles. Personnellement, je n’aime pas trop certaines des astuces décrites dans l’article.
1. N'utilisez pas l'effet de coin arrondi de l'image
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{affichage : bloc ; hauteur : 1 px débordement : caché};
.r1{marge : 0 5px}
.r2{marge : 0 3px}
.r3{marge : 0 2px}
.r4{margin: 0 1px; height: 2px}
(Beaucoup de gens aiment utiliser cette technique d'arrondi, mais personnellement, je ne l'aime pas beaucoup. Bien que je n'aie pas besoin de créer des images avec des coins arrondis, ces balises supplémentaires sont toujours se sentir superflu)
2. Liste stylisée
C'est la première ligne
Voici la deuxième ligne
Et dernière ligne
ol{
police : italique 1em Georgia, Times, serif ;
couleur : #999999 ;
}
ol p {
police : normale .8em Arial, Helvetica, sans-serif ;
couleur : #000000 ;
}
J'aime aussi beaucoup cet effet. Vous pouvez appliquer différentes polices aux numéros de série.
3. Formulaire sans tableau
4. Technique des guillemets doubles
5. Effet de mot dégradé
6. Centrage vertical
Pour plus d'informations, voir le texte original
10. Lettrine
Ce paragraphe a la classe "introduction" Si. votre navigateur supporte la pseudo-classe « first-letter », la première lettre sera une lettrine
p.introduction:first-letter {.
taille de police : 300 % ;
poids de la police : gras ;
flotteur : gauche ;
largeur : 1em ;
}