Çarpıcı Animasyonlu Altı Çizili Metin Efektleri Oluşturmak için 10 CSS Parçacığı

Varsayılan CSS alt çizgisi harika çalışıyor. Kim nefret edebilir ki?

Ama her zaman bir şeyleri geliştirmek için yer vardır. Alt çizgilerle yapabileceğiniz pek bir şey olmadığını düşünüyor olabilirsiniz, ancak CSS animasyonunu derinlemesine incelerseniz gerçekten ne kadar çok şey yapabileceğinizi anlayacaksınız!

Sayısız CSS alt çizgi stilini sıraladım ve web'deki en iyi özel alt çizgiler için en iyi seçeneklerimi seçtim. Bunlardan herhangi biri gözünüze çarparsa, atlamaktan çekinmeyin ve kaynak koduyla uğraşmayı deneyin.

1. Alternatif Alt Çizgi

İmlecinizi bu bağlantılar arasında hareket ettirirseniz, biraz komik bir şey fark edeceksiniz. Gezinme menüsündeki alt çizgi efekti aslında bağlantılar arasındaki stilleri değiştirir .

Sadece bu değil, aynı zamanda tek bir blok olduğu yanılsamasını vermek için seyir boyunca dinamik olarak hareket eder. Oldukça havalı değil mi?

Tüm bunları, altı çizili bloğu bir HTML öğesine ekleyerek biraz CSS ile kendiniz yapabilirsiniz. Ne kadar az koda ihtiyacınız olduğunu düşününce şaşırtıcı derecede basit (yaklaşık 60 satır CSS).

2. Birden Çok Satıra Yayılması

CSS satır sonu stilleri yanıltıcıdır ve üzerinde çalışmak kolay değildir. Ancak bazı usta geliştiricilerle Will King, bu kalemi, herhangi bir hata olmadan birden çok satıra yayılabilen dinamik bir alt çizgi efekti yaratarak yaptı.

Bunun, satırı sağlam tutmak için biraz JavaScript'e dayandığını unutmayın. Ancak aynı zamanda sayfadaki herhangi bir bağlantıyla çalışacak kadar dinamiktir, bu nedenle metni nasıl biçimlendirdiğiniz önemli değildir.

Ayrıca tüm bu şey, arka plan için oldukça havalı olan özel bir CSS3 gradyanı kullanıyor.

3. Kayan Alt Çizgi

Geliştirici Ryan Morse, yalnızca CSS'ye dayanan bu çok basit kayan alt çizgi efektini yarattı. Fazladan bir HTML öğesi bile gerektirmediği düşünüldüğünde oldukça zarif bir çözüm.

Gezinme menülerinizi diğer siteler gibi tasarlayabilir ve bu CSS efektini dinamik kayan animasyonlar oluşturmak için kullanabilirsiniz. Ayrıca, tüm sonuçlar, yumuşatma ve toplam süreyi içeren CSS kodunda değiştirilebilir.

4. Daha İyi Metin Altı Çizili

İlk bakışta bu alt çizgi ile farklı bir şey fark etmeyebilirsiniz. Ancak bunu sayfanın altındaki "varsayılan" demoyla karşılaştırırsanız, bunun gerçekten çok daha iyi göründüğünü göreceksiniz.

Lukas Horak'ın daha iyi metin altı çizgisinde, metnin altındaki çubuğun azalan öğelere daha iyi uyduğunu fark edeceksiniz. Bu, satırların normal satır yüksekliğinin altına düştüğü 'g' ve 'p' gibi harf biçimlerini dikkate alır.

Ayrıca, alt çizgi, metnin altına her zamankinden biraz daha aşağı itilir, böylece tarayıcı varsayılanına kıyasla yeni bir görünüm kazanır.

5. Animasyon Stilleri

Bu benzersiz kalem, geliştirici Matthew Scott tarafından saf CSS ile oluşturulmuş birkaç özel alt çizgi efektine sahiptir.

Bazı yaygın CSS geçişlerine dayanan çok özel dört alt çizgi stiline sahiptir:

• Sağdan sola
• Soldan sağa
• Dışa doğru animasyon
• içe doğru animasyon

Bunun, hem bağlantı üzerinde gezinirken hem de imlecinizi bağlantıdan uzaklaştırırken çalışan ortak CSS3 geçişlerinde çalıştığını fark edeceksiniz.

Kesinlikle bazı harika efektler ve bunların hepsini kendi projelerinize aktarmanız oldukça kolay.

6. Daha Fazla Animasyon Stili

İşte başka bir özel alt çizgi animasyon paketi, bunlar dev Kseso tarafından oluşturulmuş.

Bunlar, parlak efektler için CSS3 gölgelerini zorlayan alt çizgi stilleriyle biraz daha aşırıya kaçıyor. Vaktiniz varsa (ya da sadece Star Wars'u seviyorsanız) büyük bir Star Wars ışın kılıcı tasarımı yapmak için bunu şablon olarak kullanabilirsiniz.

7. Sadece Bırakmak

Bu etkiyi birkaç web sitesinde gördüm ve muhtemelen favorilerimden biri. Açılır alt çizgi saf CSS kullanır ve çizgiyi bir geçiş efektiyle görünüme kavuşturur.

Bu animasyonla, her bir alt çizginin "kenarlığın" her bir bağlantıya bağlandığı hissine kapılıyorsunuz. Bağlantılar arasında kayan çizgilerden daha çok seviyorum çünkü bu efekt daha hızlı ve daha doğrudan geliyor.

Efektlerin altını çizmek için gerçek bir minimalist yaklaşım istiyorsanız, kesinlikle bu kodla çalışmayı denemelisiniz.

8. Genişleyen Animasyon

Genişleyen alt çizgi stili, daha önce bahsettiğim alt çizgi paketinde bulunabilir. Ancak bu özel alt çizgi, özel animasyon zamanlaması kullandığından biraz farklıdır.

Fareyle üzerine gelindiğinde benzersiz bir animasyon oluşturmak için kübik-bezier() işlevini kullandığına dikkat edin.

Bu, varsayılan "doğrusal" geçişten biraz daha hızlı çalışır, bu nedenle oldukça farklı bir efekt verir. Hatta kendinize ait benzersiz bir alt çizgi stili oluşturmak için bezier animasyonunu kendiniz özelleştirmeyi deneyebilirsiniz.

9. Özel CSS Alt Çizgileri

İşte herhangi bir web sitesinde gerçekten işe yarayabilecek başka bir stil. Geliştirici Tristan Wilson, çizgiyi metnin altında birkaç piksel aşağıda tutan bu basit alt çizgileri oluşturdu.

Sadece farkedilecek kadar ince ama kesinlikle kullanılabilirlikte büyük bir fark yaratmayacak. Bu etki, ekstra kullanılabilirlikten çok estetikle ilgilidir.

Alt çizgilerinizin tüm sürünün arasından sıyrılmasını istiyorsanız, bu set başlamak için harika bir yerdir.

10. Descender Arasına Yerleştirme

Daha önce, alt çizgi stillerini türdeki alt çizgilere uyacak şekilde özelleştirmekten bahsetmiştim. Jonathan Neal'ın bu kalemi tam da bunu yapıyor ve HTML5 ve CSS3'ten başka bir şey kullanmıyor.

Tüm etki birkaç CSS3 özelliğine bağlıdır: kesin olmak gerekirse kutu gölgesi ve metin gölgesi .

Bu, alçaltıcı elemanların yan taraflarında boşluk olduğu yanılsamasını yaratır ve alt çizgiye daha klas bir his verir.

Herhangi bir web sitesi için kesinlikle temiz bir seçim ve alt çizgi renginizi değiştirmenin de güzel bir yolu.

11. Özel Degradeler

Gerçekten sınırları zorlamaya çalışıyorsanız, bu kalemi özel alt çizgili gradyan stiliyle yeniden deneyin.

Degrade, CSS3'ten geçer, böylece renkleri istediğiniz herhangi bir şeye değiştirebilirsiniz. Ve buna inanabiliyorsanız, bu şeyin çalışması için fazladan HTML gerektirmez. İstediğiniz bağlantı bağlantılarını hedefleyin ve kendi degrade alt çizgilerinizi elde etmek için CSS kodlarını kopyalayın/yapıştırın.

Tüm bu tasarımların dışında, umarım bu koleksiyondan alabileceğiniz güzel bir efekt vardır.

Tasarımcılar her zaman alt çizgi efektlerini düşünmezler, ancak tipografi ile yapabileceğiniz çok şey vardır ve CSS'de yolunuzu biliyorsanız, o zaman gerçekten sınır gökyüzüdür.