CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme | Webien.Net: Webmaster Forumu

CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme

Şu anda okunan:
CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme

ferdi

Yeni Üye
Katılım
9 Eyl 2019
Mesajlar
277
Beğeni
43
Puanları
0
Konum
istanbul
Ticaret - 0%
0   0   0
CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme

Bu özelliği ekleyeceğiniz css sınıfını chrome da sağ tıklayıp öğeyi incele diyerek seçebilirsiniz. Sonra bu seçtiğiniz css sınıfına aşağıdaki özellikleri ekleyeceksiniz.
background-image: linear-gradient(120deg, #84FAB1 0%, #34D364 1000%);
background-repeat: no-repeat;
background-size: 100% 0.35em;
background-position: 0 108%;
transition: background-size 0.25s ease-;
Bu kodlarda background-image kodunda renk geçişini verebilirsiniz. Buradaki 120deg denilen gradient efekti yani renk geçişinin açısıdır. Diğer konu ise, bu arkadaki rengin yüksekliği kibunu da background-size içindeki 0.35em de yüksekliği belirliyor.
Bu arada link üstüne gelince rengin yüksekliği artsın derseniz, css classının hover’ına “background-size: 100% 88%;” olarak verebilirsiniz.
Ayrıca burada hazırlanmış demo şeklinde de var.
 
Konuyu Görüntüleyen Kullanıcılar(Toplam:1) Üyeleri Gör

Benzer konular

Üst