Effet de texte 3D avec CSS

Voyons comment c'est faitNous aurons besoin:

• Connaissances de base en HTML et CSS
• Un éditeur de code
• Notre navigateur

Étape 1

Nous allons créer un dossier sur notre site local pour enregistrer les fichiers dont nous allons avoir besoin, je l'appellerai "text_3d" à l'intérieur un autre appel css
AGRANDIR
AGRANDIR

Étape 2

Nous irons dans l'éditeur de code et créerons un nouveau fichier index.html que nous enregistrerons à la racine du dossier "3d_text" que nous avons créé à l'étape précédente, dans lequel nous écrirons notre structure html de base et ajouterons la référence à un fichier css nommé "style.ccs" que nous créerons plus tard.
Code HTML

Étape 3

Nous allons ajouter une ligne à l'intérieur du corps dans laquelle nous placerons une étiquette

à laquelle nous affecterons la classe "3d-text" que nous créerons ensuite dans le fichier .css, je placerai n'importe quel texte à l'intérieur de cette étiquette à tester.

Effet de texte 3D

Si nous le voyons dans le navigateur en ce moment, nous ne verrons pas de changements majeurs, juste un texte normal et actuel, afin que nous puissions avoir une apparence 3D, il est nécessaire de définir certaines propriétés via css. Fonce.
AGRANDIR

Étape 4

Dans notre éditeur de code, nous allons créer un nouveau fichier .css que j'appellerai style.css dans lequel nous placerons les propriétés afin que notre texte ait l'effet 3D que nous souhaitons obtenir.

Étape 5

Nous commencerons par éditer notre css, nous définirons d'abord la taille de notre corps, pour cela nous lui donnerons une position absolue avec une largeur et une hauteur de 100%.

 corps {position : absolue; largeur : 100 % ; hauteur : 100 %} 

Étape 6

Nous écrirons dans notre .ccs les propriétés de la classe "3d-text" que nous avions commenté à l'étape 3. Nous commencerons par définir la police, j'aime particulièrement utiliser la police "Helvetica Neue", bien sûr vous pouvez utilisez-le avec la police que vous voulez. Dans ce cas, je définirai la taille de la police sur environ 80 pixels; caractères gras ou gras … Et cette fois, je vais le laisser en blanc. Si nous le voyons dans notre navigateur, nous remarquerons que le texte a disparu, c'est parce que nous l'avons placé en blanc et que le fond des navigateurs est également blanc …

 corps {position : absolue; largeur : 100 % ; hauteur : 100 %} .3d_text {font-family : "Helvetica Neue", Helvetica, Arial, sans-serif ; taille de la police : 80px ; font-weight : gras ; couleur : #fff ; } 

Nous verrons dans le navigateur que le texte disparaît
AGRANDIR

Étape 7

Nous avons vu qu'à l'étape précédente le texte avait disparu, maintenant nous avons besoin qu'il apparaisse et avec un effet 3D. Pour cela, il suffit d'ajouter une ombre à notre texte en utilisant la propriété text-shadow, comme suit.

 corps {position : absolue; largeur : 100 % ; hauteur : 100 %} .3d_text {font-family : "Helvetica Neue", Helvetica, Arial, sans-serif ; taille de la police : 80px ; font-weight : gras ; couleur : #fff ; ombre de texte : 0 1px 0 #ccc ; } 

AGRANDIR

Nous voyons que nous avons obtenu un léger effet d'ombrage, mais ce n'est pas suffisant pour lui donner un aspect 3D, heureusement css nous permet de combiner plusieurs ombres au sein de la propriété text-shadow séparées par une virgule, nous en profiterons pour placer plusieurs des ombres à une distance différente de notre texte et avec des tons de couleurs différents du plus foncé au plus clair, afin de créer l'effet, mais nous devons également combiner ces ombres en utilisant des couleurs rgba et des transparences pour donner cet effet de diffusion à la fin du ombres.
De cette façon, notre code CSS ressemblerait à ceci.

 corps {position : absolue; largeur : 100 % ; hauteur : 100 %} .3d_text {font-family : "Helvetica Neue", Helvetica, Arial, sans-serif ; taille de la police : 80px ; font-weight : gras ; couleur : #fff ; text-shadow: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 #bbb, 0 4px 0 # b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0, 0, 0, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (0, 0, 0, .2), 0 5px 10px rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

Et le résultat de l'effet serait le suivant…
AGRANDIR
C'est tout pour l'instant voici un .zip avec les fichiers, toutes questions ou suggestions peuvent être envoyées via les commentaires, salutations…
text_3d20150917130359.zip 694 octets 217 TéléchargementsAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif