Récemment, je discutais des avantages et des caractéristiques des préprocesseurs CSS avec un collègue. Nous avons couvert toutes les bases: c'est génial d'avoir des variables et comment les mixins peuvent vous faire gagner un temps incroyable de codage. Lorsque la conversation a abordé certaines des caractéristiques les plus obscures, les choses sont devenues intéressantes. Lorsque j'ai évoqué les différentes opérations de couleur, mon collègue a hardiment proclamé que ce n'était pas un vrai designer. pourrait jamais trouver une excuse légitime pour utiliser cette fonctionnalité et ne pas choisir ses propres couleurs manuellement.
Selon Barney Stinson, "défi accepté!" Aujourd'hui, nous allons créer un effet de texte en faux 3D impressionnant avec du CSS pur et voir ensuite pourquoi il est beaucoup plus facile de le faire avec les opérations de couleur dans Sass ou LESS.
Construisons du texte en 3D
Il n'y a pas vraiment de génial façon d'appliquer un effet 3D en utilisant CSS. Il n'y a pas? Text-extrude? propriété, bien que ce serait en fait assez génial. Au lieu de cela, nous devons faire semblant. L’une des méthodes les plus populaires consiste à créer tout un tas d’ombre-texte (l’effet ici illustré par Mark Otto). Comme avec les arrière-plans CSS, les ombres de texte peuvent être empilées à plusieurs reprises pour obtenir des résultats vraiment intéressants.
Pointe: IE déteste les concepteurs de sites Web, de sorte qu’il ne prend en charge aucun élément aussi cool que les ombres de texte. Utilisez Modernizr pour compenser.
La Fondation
Commençons lentement et construisons la base HTML et CSS de base sur laquelle nous aurons besoin pour créer un joli grand texte avec lequel travailler. Tout ce dont nous avons besoin pour le HTML est un h2 avec du texte et une seule classe appliquée.
Maintenant pour certains CSS. Pour l'instant, ciblez simplement le h2 et appliquez quelques styles de base. J'ai transformé le texte en majuscule et utilisé des raccourcis pour appliquer un ensemble de propriétés de police en une fois: poids taille / hauteur de ligne famille de polices.
Avec cela, vous devriez avoir un simple morceau de texte qui est à peu près peu impressionnant à tous points de vue. Ne craignez rien, nous le rendrons incroyablement cool avec les prochaines étapes!
Appliquer une ombre de texte
Pour commencer le processus de 3D-ification, choisissez une couleur que vous aimez et appliquez-la à la classe threedee. Appliquez ensuite une nuance légèrement plus foncée de la couleur en tant qu'ombre de texte. J'ai indiqué comment la syntaxe fonctionne avec un commentaire. Notez que le décalage horizontal et le flou sont définis à zéro. Nous voulons une ombre dure qui se trouve au sud de notre texte.
Si vous avez besoin d’un moyen rapide et efficace de trouver différentes nuances d’une couleur donnée, consultez 0to255, une application Web gratuite extrêmement pratique que j’utilise tout le temps.
Après cette étape, vous pouvez voir clairement les effets de l'ombre du texte. Comme vous pouvez le constater, une ombre ne la coupe pas vraiment. Nous approchons d'un effet 3D, mais pour l'instant, il ressemble vraiment à une ombre. Nous devons combler ces lacunes.
Aller en 3D
Pour combler les lacunes, il suffit d'ajouter quelques ombres de texte supplémentaires. Cela ne créera pas vraiment une transition en douceur, mais vos yeux sont paresseux et ils auront tendance à percevoir les ombres séparées comme une seule entité, à moins que vous ne regardiez vraiment de près.
Pour appliquer plusieurs ombres, séparez-les simplement par une virgule. Assurez-vous que chacun est un peu plus décalé que le précédent pour obtenir ce bel effet d'extrusion.
Après cela, vous devriez avoir un très bel effet 3D qui commence à prendre forme. Les lettres ont vraiment l'air extrudées!
Notez que toutes mes ombres sont de la même couleur. Il en résulte un effet 3D très plat et cartoony. Si c'est ce que vous recherchez, tant mieux, mais nous voulons quelque chose d'un peu plus réaliste. Pour ce faire, nous pouvons rendre chaque ombre consécutive un peu plus sombre.
Il y a un peu de compromis ici. Il est beaucoup plus facile de voir les ombres individuelles de cette façon, mais j'ai tendance à préférer l'effet d'assombrissement au look plat.
La touche finale
Nous ne sommes pas encore au stade réaliste. Le problème que je vois maintenant, c'est que le texte en trois dimensions n'a pas d'effet sur son arrière-plan. Corrigeons cela avec quelques ombres supplémentaires, cette fois avec un peu de flou et de transparence.
Avec ça, nous avons tous fini! C’est loin d’être aussi précis que ce que nous avons pu réaliser avec Photoshop et une heure à tuer, mais étant donné qu’il s’agit de CSS pur, c’est vraiment impressionnant!
Le problème avec cette méthode
Le principal problème que je rencontre avec cette méthode est qu’elle n’est pas très flexible. Comme nous utilisons au total cinq variations différentes d'une couleur, cela signifie que changer la couleur du texte 3D est une vraie douleur!
Par exemple, disons que je voulais changer le texte en bleu. Non seulement je dois choisir mon bleu principal, je dois ensuite appliquer chacune des ombres en assombrissant progressivement ce bleu.
Bien sûr, ce n’est pas la chose la plus difficile au monde, mais après avoir échangé quelques variations de couleurs pour représenter cet article, je peux définitivement affirmer que c’est une tâche fastidieuse. Je déteste le fait que tout mon travail ne soit pas réutilisable.J'aimerais pouvoir simplement appliquer l'effet 3D, choisir une seule couleur et laisser le reste se dérouler automatiquement.
Sass à la rescousse
Comme vous vous en doutez sans doute, il s'agit d'une situation où les opérations de couleurs Sass s'avéreraient extrêmement utiles. Oui, je suis un vrai designer. Oui, je préfère choisir les jeux de couleurs manuellement. Cependant, ce processus n’est pas sorcier et donne vraiment l’impression de l’automatiser. Tant que je peux choisir la couleur de départ, cela ne me dérange pas de laisser Sass s'occuper du reste.
Créer le mixin
C’est là que les choses vont devenir assez sophistiquées, donc si vous n’avez pas fait vos devoirs sur Sass, je vous recommande de consulter le didacticiel officiel.
Nous allons envelopper tout ce processus 3D dans un joli petit mixin qui peut être appliqué avec très peu d'effort. Pour ce faire, nous utilisons le? @Mixin? syntaxe, puis nommez notre mixin. Voici la structure du bloc de code de départ:
Passing In Parameters
Puisque nous voulons que ce soit quelque chose que nous puissions initier à la volée, nous devons pouvoir passer dans une couleur. Pour ce faire, nous créons une variable et la plaçons entre parenthèses. Notez que les variables Sass commencent par le signe dollar.
Réglage de la couleur principale
Il est maintenant temps de mettre ce mixin au travail. Nous voulons qu'il prenne la couleur qui lui est transmise et l'applique à la propriété color. Cela se fait comme dans le CSS normal, seulement nous utilisons notre variable au lieu de taper un code de couleur.
Assombrir la couleur
Avant de créer l’ombre, nous devons apprendre le fonctionnement d’une des opérations de couleur de Sass. Comme nous l'avons vu ci-dessus, notre ombre doit devenir de plus en plus sombre à chaque implémentation. Sass peut facilement retirer ceci pour nous avec l'opération assombrir.
Ici, j’ai lancé l’opération d’obscurcissement, passé dans la variable que nous avions définie précédemment et lui donnant une valeur de 10% Cela rendra une couleur qui est 10% plus sombre que tout $ couleur est réglé sur.
Créer les ombres
Maintenant que nous savons comment tout cela fonctionne, il est temps de l'assembler et de construire nos ombres textuelles. Voici l'extrait de mixin complet. Nous créons le mixin, transmettons une variable, définissons la couleur du texte sur cette variable, puis construisons nos ombres avec des variations plus sombres de cette variable.
Mise en œuvre du mixin
Ce petit extrait ci-dessus nous permet de créer un texte 3D sophistiqué en utilisant n'importe quelle couleur sans pratiquement aucun travail. Tout ce que nous avons à faire est d’exécuter la commande include, d’énoncer le nom du mixin et de lui donner une couleur. C'est une belle chose.
Est-ce facile? Maintenant, si nous décidons que nous voulons une nouvelle couleur, le changement est rapide et sans douleur.
Essayez de changer la police
Gardez à l'esprit que cela est fait avec du texte actif, entièrement sélectionnable / éditable. Cela ouvre beaucoup de grandes possibilités. Par exemple, essayez de le combiner avec une police Web Google comme Medula One pour un effet vraiment impressionnant.
Démo en direct
Cliquez ici pour voir et jouer avec la version Sass de notre mixin threedee.
Maintenant avec MOINS
J'étais un MOINS MOINS, mais je suis conquis par la profondeur et la puissance de Sass. Cependant, je pense toujours que LESS est un outil formidable et je ne veux pas vous décourager de l’utiliser de quelque manière que ce soit. Les deux pré-processeurs ont leurs avantages, donc si vous préférez MOINS, utilisez-le à la place. Ils produisent tous les deux du CSS pur, donc vous avez le choix.
Je sais par des articles précédents que plusieurs de nos lecteurs sont des fans MOINS, je ne voulais donc pas que quiconque manque cet effet génial. LESS partage en fait les opérations de couleur Sass afin que nous puissions facilement créer un mixin similaire avec cette syntaxe. En fait, la version LESS est plus concise, car nous pouvons supprimer la syntaxe @ mixin / @ include requise par Sass.
Comme vous pouvez le constater, les deux versions sont très similaires. Notez que Less utilise le symbole @ pour les variables et que mixins reflète en fait les classes dans la forme, ce qui est à la fois pratique et déroutant.
Conclusion
En fin de compte, je conviens que vous ne devriez pas faire appel à un préprocesseur CSS pour effectuer votre travail de conception à votre place. Les palettes de couleurs doivent être soigneusement construites après avoir pesé plusieurs facteurs. Toutefois, cela ne signifie pas que les opérations de couleur automatiques sont inutiles. J'espère que j'ai montré un exemple clair dans lequel l'opération d'assombrissement, associée à un mixin, crée un flux de travail infiniment meilleur pour obtenir un excellent effet CSS 3D. J'aimerais entendre vos réflexions sur d'autres manières d'utiliser les opérations de couleur dans un flux de travail légitimement utile.
Si vous souhaitez implémenter du texte 3D dans l'un de vos projets, gardez un œil sur Design Curate, notre site de téléchargement génial. Nous publierons bientôt d'excellentes ressources basées sur ce didacticiel.