3
Favoris
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
Yamazakura
le 02 Aoû 2022 à 10h40
J'aime beaucoup, l'effet hover ne me gêne pas du tout c'est très joli !
VIP depuis le 14/03/2020
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.
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)