Que ce soit pour mettre en valeur une partie de votre site internet ou une citation comme dans cet exemple, générer et ajouter un dégradé au background peut donner une touche très moderne à votre site internet. Découvrons dans cet article comment réaliser ceci facilement !
1ère étape
Le code HTML.
<div class="box">
<p>La plupart des gens trouvent le concept
de la programmation évident, mais la réalisation
impossible.</p>
<h2>Alan Jay Perlis</h2>
</div>
<div class="background"></div>
2ème étape
Stylisons le boîte (.box).
.box {
position: relative;
width: 300px;
height: 300px;
background: white;
transition: all 0.5s;
z-index: 2;
padding: 30px;
}
3ème étape
Ajoutons la guillemet du haut.
.box::before {
content: '\201C';
position: absolute;
top: -20px;
left: 5px;
width: 100%;
height: 100%;
font-size: 120px;
opacity: 0.2;
}Le code \201C nous permet d’afficher un guillemet de citation ouvert.
4ème étape
Ajoutons maintenant la guillemet du bas.
.box::after {
content: '\201D';
position: absolute;
bottom: 0;
right: 5px;
font-size: 120px;
opacity: 0.2;
}
5ème étape
Stylisons le texte et le titre.
.box p {
margin: 0;
padding: 10px;
font-size: 1.2rem;
}
.box h2 {
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
right: 30px;
font-size: 1.5rem;
}
6ème étape
Dynamisons le style de la boîte au survol avec la souris.
.box:hover {
color: #f2f2f2;
box-shadow: 20px 50px 100px rgba(0, 0, 0, 0.5);
}Ici, nous modifions la couleurs du texte et le nom de l’auteur lorsque nous passons le curseur sur la carte.
7ème étape
Stylisons maintenant l'arrière-plan.
.background {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: all 0.5s;
width: 100%;
height: 100%;
}
8ème étape
Terminons cet effet avec le design du menu.
.box:hover, .box:hover ~ .background {
opacity: 1;
background: #e2a9e5;
background: -moz-linear-gradient(-45deg,
#e2a9e5 15%, #2b94e5 100%);
background: -webkit-linear-gradient(-45deg,
#e2a9e5 15%,#2b94e5 100%);
background: linear-gradient(-45deg, #e2a9e5
15%,#2b94e5 100%);
}Nous allons ici gérer l’affichage du texte avec le changement de couleur au moment du passage du curseur sur la carte.
Nous allons également gérer ici l’affichage de l’arrière plan, donc cette effet de fondu entre les couleurs.
