Ez mondjuk szerintem inkább képen mutatós, de akár egy linket is feldobhat!
Link demó
Először is, illesszük be ezt a CSS-kódunkba /hamarosan szövegmagyarázattal/
/* Overline From Left */
.hvr-overline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-overline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
top: 0;
background: #ide azt a színt amilyen szeretnéd, hogy legyen a csík;
height: 4px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
|
|
|
Miután ezt beillesztettük, itt egy másik kód, amit minden egyes linkelésnél írjunk oda, hogyha azt szeretnénk, hogy így jelenljen meg.
Szövegnél ezt illesszük be a forráskódba:
<a href="ide jön a link" class="hvr-overline-from-left">Linknek a szövege</a>
|
|
|
Képnél ezt illesszük be a forráskódba:
<a href="ide jön a link" class="hvr-overline-from-left">ide csak írj valamit</a>
|
|
|
Miután ezt beillesztetted, láthatod, hogy ugyanúgy egy szöveget ad ki. Csak jelöld ki a szöveget, utána fölül látod ezt az ikont, kattints rá, írd be a képed URL-jét, és elméletileg a szöveget már ki is cserélte rá! Mégegyszer azért ellenőrízheted, hogy a link jó-e, ha nem akkor nem kell belemenned a forráskódba, simán a linkelésnél is áttudod írni.
forrás
Ez a tutorial magyarosítása, és egyszerűsítése, természetesen nem én találtam ki, följebb megtalálható a forrás!
|