Wyraziste podkreślenie przyciąga uwagę. Po najechaniu na napis, podkreślenie zamienia się w subtelną ramkę.
Taki delikatny efekt już w 6 linijkach HTML :)
Źródło:
http://cssdeck.com/labs/svg-hover-effect
HTML
<![CDATA[<div class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
<div class="text">ZACH SAUCIER</div>
</svg>
</div>
]]>
CSS
<![CDATA[html, body {
background: rgb(20,20,20);
text-align: center;
height: 100%;
overflow: hidden;
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}
]]>
0 komentarze:
Prześlij komentarz