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

Sitenin temasını değiştirmem ile beraber vakit buldukça değişiklikler yapmaya çalışıyorum. Temayı değiştirmeden önce sık karşılaştığım ve dikkatimi çeken highlight efekti bazı ziyaretçilerimin de dikkatini çekmiş 🙂 Kendisi bana ulaşıp nasıl yaptığını sorunca bende bunu yazı olarak paylaşıp belki kullanmak isteyen olursa onlarda denesin istedim.

Şimdi gelelim konumuza. Aslında yapımı oldukça basit. Ben h2 etiketlerim ile linklere ekledim. İkisi farklı renklerde kullanıyorum. h2 dediklerim yazı içindeki ara başlıklar.

Mesela bu ara başlığımda kullanıyorum.

Ayrıca site içindeki linkleri de yine aynı şekilde efekt verdim. Tabi bunun rengi farklı olarak yaptım. Fakat bazı yerlerde yani istemediğim yerlerde de eklenmiş. Onları da müsait zamanda düzelteceğim. Örnek bağlantı burada eklediğimde altında yeşil oluyor. İsterseniz bunlara efektini değiştirebilirsiniz. Mesela komple arkaplanı kaplayacak şekilde de yapabilirsiniz.

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. Oradan da inceleyebilirsiniz. Sormak istediğiniz sorular varsa yorum ile yazarsanız yardımcı olayım 🙂