Script-uri HTML|CSS: Efect de hover folosiind CSS si HTML

Salut, de aici poți descărca script-uri HTML și CSS total gratuit. Pentru astăzi am pregătit un text cu un efect de hover, sper să îți placă.

Pentru început adaugă urmatoarele rânduri într-un fișier HTML:

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Stroke Fill Hover Effects Html CSS</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>

<body>
<h1 data-text=”Efect de hover folosiind CSS si HTML”>Efect de hover folosiind CSS si HTML</h1>
</body>
</html>

După aceea, intr-un fișier CSS adăugați următoarele:

Citește și: Facebook Messenger. NOUTATI MAJORE Lansate in Romania.

body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
}

h1 {
position: relative;
margin: 0;
padding: 0;
color: #fff;
-webkit-text-stroke: 2px #000;
font-weight: 1000;
font-size: 150px;
text-align: center;
text-transform: uppercase;
line-height: 1em;
}

h1:before,
h1:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%
height: 0;
color: #039af4;
overflow: hidden;
transition: 1s;
}

h1:hover:before
{
height: 100%;
}

h1:after {
color: #e91e63;
height: 0;
}

h1:hover:after {
height: 100%
transition-delay: 1s;
}

Sau poți descărca de aici un fișier RAR.

LĂSAȚI UN MESAJ

Please enter your comment!
Please enter your name here