Text sa neonskim efektom
Ako volite neonske efekte, onda je ovo pravi tutorial za vas. U ovom tutorialu ću vam pokazati kako možete sa nekoliko css linija napraviti text sa neonskim efektom koji će te moći koristiti odmah vidljiv ili samo na hover. Kroz čivat tutorial sam koristio Ubuntu font sa 700 debljine.
Jedino što trebate je jedan <p> element sa <span> elementom unutar njega s teekstom koji želite. Prvi element <p> će mi služiti za stalni neon efekt dok će drugi biti samo na hover.
<p><span>Zcode</span></p>
<p><span>Zcode</span></p>
Postavio sam element <p> na font veličine 7em, ali vi možete staviti veličinu kolika vama odgovara. Zatim sam na element <span> stavio tranziciju od 0.5s. Zatim sam na span element stavio neon beskonačnu animaciju sa ease-in-out efektom od 1.5s.
p {
text-align: center;
font-size: 7em;
margin: 20px 0 20px 0;
}
span {
cursor:pointer;
transition: all 0.5s;
}
p:nth-child(1) span {
font-family: 'Ubuntu', sans-serif;
color: #fff;
animation: neon1 1.5s ease-in-out infinite alternate;
font-weight:700;
}
p:nth-child(1) span:hover {
color: #228DFF;
animation: none;
}
p:nth-child(2) span {
color: #228DFF;
font-family: 'Ubuntu', sans-serif;
font-weight:700;
}
p:nth-child(2) span:hover {
animation: neon2 1.5s ease-in-out infinite alternate;
}
p span:hover {
color: #ffffff;
}
Za neon animaciju sam koristio samo da ide od jedne boje do druge, koju također možete mjenjati po želji.
@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}
@keyframes neon2 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}
Dva gotova rezultata možete pogledati ispod.