Ajouter une ombre inclinée du texte en CSS

Description

Pouvoir créer des ombres portées inclinées ou des effets de lueur solaire en CSS est un ajout visuel intéressant à un site web, mais cela nécessite parfois de faire preuve de créativité, car ces fonctionnalités ne sont pas natives. L'une des approches pour parvenir à cet effet consiste à incliner le texte lui-même pour créer une illusion d'ombrage des lettres. Comment pouvons-nous réaliser cela ?

La solution réside dans l'utilisation des pseudo-éléments ::after (ou ::before) en CSS. En ajoutant un deuxième texte incliné, vous pouvez créer l'illusion d'une ombre ou d'un reflet du texte principal, cela peut apporter une dimension supplémentaire à la conception de votre site web.

Commençons par créer l'élément HTML qui affichera notre texte et sur lequel nous appliquerons cet effet de reflet ou d'ombrage.

<!-- 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 nécessaire pour créer 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;

}

J'espère que ce script gratuit vous sera utile dans vos projets.
Si vous souhaitez soutenir mon travail, un simple clic sur le bouton "Donner remercier" ci-dessous ou une note serait grandement apprécié. Merci pour votre générosité !

Votre réussite en ligne commence ici

Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.

Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.

Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :

Ajouter une ombre inclinée du texte en CSS

Description

Vous recherchez un script précis ?

Commentaires

Ajouter un commentaire