La typographie est le jouet préféré de tous dans la conception web. Un outil particulièrement amusant que CSS vous donne pour jouer avec votre type est ombre de texte, qui semble assez simple au début mais peut être utilisé pour créer des effets remarquables avec un peu d’ingéniosité et de créativité.
Aujourd'hui, nous allons parcourir plusieurs ombre de texte exemples que vous pouvez copier et coller pour votre propre travail.
L'ombre de base
le ombre de texte la propriété est super facile à travailler et fonctionne bien dans tous moderne navigateurs sans même un préfixe de vendeur! Cependant, l'utilisation d'outils tels que Modernizr vous aidera à créer des effets CSS3 avancés, même dans les navigateurs plus anciens, si vous avez besoin d'une prise en charge de secours.
Syntaxe
La syntaxe pour créer un simple ombre de texte est montré ci-dessous. Vous avez quatre variables à utiliser: les deux premières définissent la position de votre ombre, la troisième définit la quantité de flou et la quatrième la couleur de l'ombre.
Pour mettre cela en action, voici un exemple avec une ombre déplacée de deux pixels et de quatre pixels à droite avec un flou de trois pixels et une couleur de noir à 30% d'opacité.
Voici le résultat de ce code, une jolie ombre simple qui séduit à elle seule.
Pourquoi rgba?
Remarque rapide: vous n'avez pas besoin d'utiliser rgba pour la couleur de votre ombre, mais vous pouvez utiliser l'une des méthodes de couleur CSS. Cependant, je trouve que rgba est le réglage de couleur idéal pour une ombre, car il ajoute une autre dimension de travail. Vous pouvez non seulement définir la position, le flou et la couleur de l'ombre, mais également définir son opacité à l'aide de la valeur alpha.
C’est en fait plus facile que de travailler avec d’autres méthodes de couleur, car vous devrez généralement rechercher un accent décent pour la couleur de fond qui est peut-être légèrement plus sombre ou plus claire. Avec rgba, vous pouvez simplement utiliser du noir ou du blanc et réduire l'opacité pour le mélanger à l'arrière-plan.
Letterpress rapide et sale
La grande chose à propos de ombres de texte est-ce que vous pouvez réellement faire beaucoup plus avec eux que votre ombre portée moyenne. Par exemple, voici une astuce rapide pour créer l’illusion d’un texte en médaillon.
La première chose à faire est de définir la couleur de votre texte sur une nuance légèrement plus foncée que celle de votre fond. Ensuite, appliquez un léger blanc ombre de texte avec une opacité réduite.
Comme vous pouvez le constater, j’ai utilisé une couleur de fond de # 222, puis le texte est noir à 60% d’opacité. Enfin, mon ombre blanche a été positionnée légèrement vers le bas et à droite avec une opacité de 10%.
Ombre dure
N'oubliez pas que vous ne devez pas du tout effacer votre ombre. En raison de leur nature rétro, les ombres de texte dur sont en réalité très "in". maintenant, n'hésitez pas à les expérimenter dans vos créations.
Double ombre
Le vrai plaisir commence lorsque vous réalisez que vous n'êtes pas limité à une seule ombre. En utilisant une virgule pour séparer les déclarations, vous pouvez appliquer autant d’ombres que vous le souhaitez!
Voici le schéma de base de la syntaxe. Notez qu'il y a une virgule après les deux premières ombres et un point-virgule après la dernière ombre.
Pour mettre cela en pratique, voici un exemple de traitement de texte que vous verrez actuellement sur le Web. L'idée est fondamentalement d'appliquer deux ombres, la première est de la même couleur que votre fond.
Le résultat est presque une sensation de journal vintage.
Bas et lointain
Une fois que vous commencez vraiment à superposer les ombres, les résultats deviennent rapidement de plus en plus impressionnants. Il est très facile de commencer à créer de jolis effets 3D factices que les utilisateurs avertis en conception de sites Web ne croiront pas en texte en direct.
En dessous, j'ai utilisé quatre énormes ombres, toutes dirigées vers le bas avec différents degrés de distance et de flou.
Étroit et lourd
Voici un autre exemple de la même idée, cette fois avec trois ombres beaucoup plus proches de la source. L'effet rend votre texte un peu plus lourd.
Un peu d'aide
En regardant autour de ce que d'autres designers ont fait, j'ai trouvé deux excellentes techniques que je pensais être parfait pour ce poste. Le premier vient de Mark Dotto et le second de Gordon Hall.
Texte 3D sérieux de Mark Dotto
Voici un exemple que j'ai toujours trouvé très impressionnant. Il provient de MarkDotto.com et utilise douze impressionnants d’ombres pour créer un effet 3D très crédible.
Le vrai texte de Gordon Hall
Remarquez dans l'exemple ci-dessus que j'ai appelé ma technique «rapide et sale». effet typographique. En effet, il existe un moyen beaucoup plus complexe de créer un texte sérieusement incrusté et beaucoup plus crédible.
Gordon utilise un CSS voodoo sérieux pour créer non seulement une ombre extérieure, mais également une véritable ombre intérieure. Consultez son blog pour une explication complète de la technique.
Plus d'ombres amusantes
Maintenant que vous avez une bonne idée de la logique derrière le code, voici quelques exemples supplémentaires que j'ai fournis sans explications ennuyeuses. N'hésitez pas à les voler et à les utiliser dans votre travail!
Embrasé
Super héros
Sources lumineuses multiples
Doux emboss
Conclusion
Comme la plupart des effets CSS, les ombres de texte sont extrêmement simples à implémenter dans une forme de base, mais peuvent revêtir diverses formes si vous y mettez vraiment du travail. En utilisant des virgules comme séparateur, vous pouvez empiler les ombres CSS les unes sur les autres pour augmenter considérablement l'intérêt et le réalisme de l'effet.