Comment faire pour créer une chute de style Cap Effect avec CSS3
Comment faire pour créer une chute de style Cap Effect avec CSS3
Lettrines ont depuis des années dans l'industrie de l'impression, mais ils sont encore assez rares dans le monde du web malgré le: sélecteur de première lettre ayant été pendant quelques années juste. Jetons un coup d'oeil à la façon dont nous pouvons créer une lettrine cool pour nos conceptions web et du piquant avec des effets d'ombre texte CSS3 élégant.
La conception que nous allons créer dispose d'une grande lettrine au début d'un bloc de texte. L'effet réel de lettrine sera créé avec le sélecteur: la première lettre, alors que les effets supplémentaires sont ajoutés à l'aide de text-shadow CSS.
La structure HTML
Le style CSS
Maintenant, la police dalle-serif est en place la taille et hauteur de ligne de la typographie peut être réglée. La propriété text-transform assure tout le texte apparaît en majuscules, malgré la façon dont il est écrit dans le fichier HTML, la propriété text-shadow est utilisé avec des valeurs de couleur RGBA pour ajouter un effet fantôme subtil au texte.
La lettrine de base est terminée, mais laisser tomber traditionnellement bouchons viennent le long dans toutes sortes de style de fantaisie. Nous pouvons ajouter quelques effets sympas de notre propre avec l'aide de la propriété CSS3 text-shadow. Un double du texte est créé et compensé par 4px, puis un second en double est créé à 7px. Lorsque le premier doublon est réglé sur la même couleur que l'arrière-plan, il crée un effet de style rétro cool. Pour plus d'effets lettrine consulter mon ancien texte ombre après des effets.
L'effet final de lettrine