Comment créer des lettrines avec CSS (et CSS3)
Le pseudo-élément de première lettre prend un certain nombre de propriétés et valeurs (mais pas tous). Les règles de feuille de style typique que je tends à utiliser à cet effet sont présentés ci-dessous:
Bien sûr, vous n'avez pas besoin d'utiliser un nom de classe comme .dropcap. Un élément comme
ou un autre sélecteur fonctionne aussi bien. Par exemple, il peut parfois être utile de style du premier alinéa, après un titre et ici vous pouvez utiliser le sélecteur adjacent frères et soeurs comme celui-ci:
D'autres propriétés et leurs valeurs peuvent être appliquées au pseudo-élément de première lettre, y compris la police, la couleur, arrière-plan et les propriétés de la frontière. Cependant, où il commence à devenir intéressant est l'utilisation des propriétés CSS3 telles que rayon de frontière (avec des préfixes -moz- et -webkit-) et box-shadow. Rappelez-vous que les propriétés CSS3 ne seront pas pris en charge par tous les navigateurs.
Je l'ai mis en place quelques exemples de lettrine. Ils commencent par des exemples de base et de passer à l'utilisation des propriétés CSS3. Le dernier exemple utilise des gradients CSS3 qui, avec la sortie de Firefox 3.6 (voir Utilisation) Dégradés, est une méthode qui deviendra plus utilisé, je suis sûr. Ce ne sont que quelques exemples; peut-être il y a d'autres que vous pouvez penser?
En relation. Drop Daily Cap offre une autre méthode pour lettrines avec des images d'illustration fantastique.
Ceci est une autre propriété intéressante de CSS3 et que je ne l'ai pas entendu dire que beaucoup au sujet auparavant. L'effet varie en fonction du navigateur, mais nous espérons que nous verrons plus favorable dans les futurs navigateurs.
Je ne savais pas l'existence: la première lettre. Le thème Wordpress j'ai utilisé pour un client utilisait cette fonctionnalité pour shortcodes, mais après ceux également commencé à apparaître sur les flux RSS et des extraits que je voulais vous en débarrasser. Merci de partager cette connaissance avec nous (même si elle est trois ans plus tard!).
Articles Liés
Il y a une nouvelle méthode de mise en page CSS passionnante dans les dernières versions de Google Chrome, Firefox et Opera. C'est la mise en page de grille CSS qui promet de révolutionner la façon dont nous créons des mises en page. Voici quelques liens que j'ai recueillir quelques données sur la grille mise en page.