Ajouter une ombre inclinée du texte en CSS

Description

Faire une ombre portée inclinée, ou lueur de soleil doit être codé en CSS, la fonction n'existe pas nativement. Pour cela il faut ajouter un texte penché, comment ajouter un texte penché en effet ombre ?

Une solution consiste à utiliser le pseudo élément ::after (ou ::before) et de l'incliner afin de créer un deuxième texte pour créer une illusion d'ombrage des lettres, voyons comment le réaliser.

Tous d'abord, créons notre élément HTML texte sur lequel on va appliquer un reflet de lui même.

<!-- nous devons utiliser un block <div> afin de passer notre pseudo élément before derrière le texte qu'il englobe -->

<!-- les pseudo élément ::before et ::after ne peuvent pas être passé en arrière sur un élément (du moins je n'y suis pas parvenu) -->

<div class="ombre" data-ombre="BONJOUR">

	<span>BONJOUR</span>

</div>

Le code CSS permettant d'ajouter un effet miroir.

.ombre {

	position: relative;

}

.ombre span {

	z-index: 1;

	position: relative;

	/* l'unité de mesure EM nous permettra de garder la même marge si on modifie la taille du texte */

	padding-left: 0.71em; 

	color: #3165c7;

	/* le text-shadow suivant nous permet d'avoir un peu de relief sur le texte non penché, pour plus de réalisme et un effet béton/bloc */

	text-shadow: -4px -1px 0 #232988;

}

.ombre,

.ombre * {

	font-size: 134px;

	text-align: center;

	text-transform: uppercase;

}

.ombre::before {

	content:attr(data-ombre);

	/* skewX penche le texte, rotateX nous permet de le diminuer en hauteur pour que ce soit plus réaliste */

	transform: skewX(60deg) rotateX(47deg);

	position: absolute;

	color: #6f6f6f;

	bottom: -0.105em;

	padding-left: 0.27em;

}

Ajouter une ombre inclinée du texte en CSS

Description

Commentaires

Ajouter un commentaire