3 Favoris
Nekkomi le 29 Jul 2022 à 13h08
j'ai légèrement abusé des animations hover mais ça m'a permis d'apprendre des trucs (et surtout de m'amuser mdrr)
j'ai aussi joué avec le dégradé et j'avoue que j'aime bien le rendu comme ça ^^

merci pour ce tutoriel !

la fiche est disponible en libre-service, et d'ailleurs n'hésitez pas à jeter un coup d’œil au code pour me dire ce que je peux améliorer (j'ai sûrement fait quelques crimes de codage par pure flemme sorry :p)

HTML

                        <head>
<style>
.fond {
background-color:#f1ddba;
height:450px;
width:400px;

}

.img {
height:90px;
width:280px;
border:3px solid #c8b097;
margin-left:auto;
margin-right:auto;
margin-top:15px;
transition: 1s;
}

.img:hover {
border:3px solid #9d8368;

}

.intro {
padding-top:20px;
font-family: calibri;
font-size: 13px;
color:#9d8368;
letter-spacing: -0.5px;
text-transform: uppercase;
text-align: center;
font-weight: bold ;
transition-duration: 0.4s;
margin-bottom: 20px;
}

.intro:hover {
text-shadow: #c8b097 0px 0px 4px;
color:#9d8368;
}

.txt {
width:266px;
height:70px;
font-family:arial;
font-size:11px;
padding:10px;
padding-bottom:10px;
padding-top:7px;
border-bottom:10px solid #c8b097;
border-top:3px solid #c8b097;
color:#9d8368;
background-color: #c8b097;
text-shadow: #f1ddba 0px 0px 6px;
text-align: justify;
margin-left:auto;
margin-right:auto;
margin-top:15px;
scroll-behavior: smooth;
overflow:auto;
-ms-overflow-style: none;
scrollbar-width: none;
transition:1s;
}

.txt::-webkit-scrollbar {
display: none;
}

.txt:hover {
color:#f1ddba;
background-color: #9d8368;
border-bottom:10px solid #9d8368;
border-top:3px solid #9d8368;
text-shadow: #f1ddba 0px 0px 0px;
transition:1s;

}


.degrade {
font-family:arial;
text-shadow: #f1ddba 0px 0px 6px;
font-size:11px;
color:#9d836800;
margin-left:auto;
margin-right:auto;
width: 271px;
padding: 5px;
padding-left:10px;
margin-top: 15px;
border: 0px;
border-radius: 0px;
transition: box-shadow 1s;
transition: 1s;
background-color: #c8b097;
box-shadow: 200px 0px 100px -40px #f1ddba inset;
}

.degrade:hover {
background-color: #f1ddba;
letter-spacing: 0px;
box-shadow: 200px 0px 140px -150px #c8b097 inset;
color:#9d8368;
text-shadow: #f1ddba 0px 0px 6px;
}

.degrade2 {
font-family:arial;
text-shadow: #f1ddba 0px 0px 6px;
font-size:11px;
text-align:right;
color:#9d836800;
margin-left:auto;
margin-right:auto;
width: 270px;
padding: 5px;
padding-left:10px;
border: 0px;
transition: 2s;
background-color: #f1ddba;
box-shadow: 200px 0px 140px -150px #c8b097 inset;
}

.degrade2:hover {
background-color: #c8b097;
letter-spacing: 0px;
box-shadow: 200px 0px 100px -40px #f1ddba inset;
color:#9d8368;
text-shadow: #f1ddba 0px 0px 6px;
text-align:right;
transition:1s;
}

.pseudo {
color:#9d8368;
text-shadow: #c8b097 0px 0px 6px;
}

.credit {
font-family:arial;
margin-top:15px;
text-shadow: #f1ddba 0px 0px 6px;
font-size:9px;
text-align:center;
color:#9d8368;

}

</style>
</head>

<body>

<div class="fond">
<br>
<div class="degrade2">bienvenue sur la fiche de <span class="pseudo"><b>@Nekkomi</b></span></div>


<div class="img"><img src="https://zupimages.net/up/21/15/9z1j.png"></div>

<div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, ullam esse quaerat tempora eaque mollitia, consequatur neque doloremque illo voluptas distinctio ducimus facere et, molestias rerum fugiat voluptatem repellendus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi neque cum iure ducimus voluptates sed, similique, ea impedit at voluptate explicabo ut voluptatum amet ipsam repudiandae recusandae beatae. Cum, amet. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos totam ab ea sed, nemo modi, deleniti molestiae fuga vel quos ullam a harum voluptatum et. Natus et dolore magni quam? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident nostrum tempora cum maxime nobis deserunt illum eius laborum, explicabo at iure magni deleniti sunt culpa? Doloribus magnam minima temporibus necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quaerat consequatur officiis hic labore veniam, nam, accusamus eligendi similique ipsa dignissimos quo perferendis magnam. Dolores amet est vero eveniet perspiciatis?</div>

<div class="img"><img src="https://zupimages.net/up/21/15/he1h.png"></div>

<div class="degrade">merci d'être passé.e sur ma fiche <3</div>

<div class="credit">fiche html+css par <span class="pseudo"><b>Nekkomi</b></span></div>


</div>

</body>

Commentaires

Avatar de Yamazakura
Yamazakura le 02 Aoû 2022 à 10h40
J'aime beaucoup, l'effet hover ne me gêne pas du tout c'est très joli !
Avatar de Zukki
VIP depuis le 14/03/2020
Zukki le 18 Sep 2022 à 22h34
Wow j'avais complètement loupé ce code ! Cette fiche est superbe !

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.