logo

Effets sur texte

Text Hover

 

Lien d’origine: https://codepen.io/argyleink/pen/poEjvpd

HTML wordpress :

<section class="texthover1 ">
<div class="container">
<div class="columns">
<div class=textfx>
<div class="item">
<center><h1 class="title is-1"><span class="is-size-2 is-uppercase"><a href="<?= get_category_link(1) ?>">Hover bande bleu</a></span></h1></center>
</div>
</div>
</div>
</div>
</section>

CSS :

.texthover1 .textfx .item h1::before { 
transform: scaleX(0);
transform-origin: bottom right;
}
.texthover1 .textfx .item h1:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.texthover1 .textfx .item h1::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%); /* couleur de la bande */
z-index: -1;
transition: transform .3s ease;
}
.texthover1 .textfx .item h1 {
position: relative;
font-size: 5rem;
}
.texthover1 .textfx .item h1::after{
content: " ";
display: block;
position: absolute;
width: 100%;
height: 3px;
background: rgb(0, 0, 0); /* couleur de la ligne */
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
.texthover1 .textfx .item h1:hover::after{
transform: scale(1);
}

 

 

Menu hover fill text

Lien d’origine: https://codepen.io/alphardex/pen/QWwveZG

HTML:

<section class="menuHoverFillText">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">archives</a></li>
<li><a href="#">tags</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">about</a></li>
</ul>
</section>

CSS:

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
.menuHoverFillText {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #1A1E23;
}
.menuHoverFillText ul {
display: flex;
flex-direction: column;
align-items: start;
list-style-type: none;
}
.menuHoverFillText ul li {
padding: 6px 0;
}
.menuHoverFillText ul li a {
--fill-color: #198CE6;
position: relative;
display: block;
padding: 4px 0;
font: 700 3rem Raleway, sans-serif;
text-decoration: none;
text-transform: uppercase;
-webkit-text-stroke: 2px var(--fill-color);
background: linear-gradient(var(--fill-color) 0 100%) left/0 no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: 0.5s linear;
}
.menuHoverFillText ul li a:hover {
background-size: 100%;
}

Layered text-shadow effect

Lien d’origine: https://codepen.io/TajShireen/pen/abzmoRE

HTML:

<section class="layeredTextShadow">
<div>Roses</div>
</section>

CSS:

.layeredTextShadow div{
font-size: 15rem;
text-align: center;
height:90vh;
line-height: 90vh;
color: #fcedd8;
background: #d52e3f;
font-family: 'Niconne', cursive;
font-weight: 700;
text-shadow: 5px 5px 0px #eb452b, 
10px 10px 0px #efa032, 
15px 15px 0px #46b59b, 
20px 20px 0px #017e7f, 
25px 25px 0px #052939, 
30px 30px 0px #c11a2b, 
35px 35px 0px #c11a2b, 
40px 40px 0px #c11a2b, 
45px 45px 0px #c11a2b;
}