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 !
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>
Stylisons le boîte (.box).
.box {
position: relative;
width: 300px;
height: 300px;
background: white;
transition: all 0.5s;
z-index: 2;
padding: 30px;
}
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.
Ajoutons maintenant la guillemet du bas.
.box::after {
content: '\201D';
position: absolute;
bottom: 0;
right: 5px;
font-size: 120px;
opacity: 0.2;
}
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;
}
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.
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%;
}
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.