Daha önce bu konuda tasarımcı arkadaşların bir isteği olmuştu. Yazının rengi ile alt çizginin rengini ayırmak ve alt çizginin kalınlığını değiştirmek istiyorduk. O zamanlar böyle bir imkan yoktu. Hatırladığım border-bottom ile veya resim ile yapmıştık ama sonra iptal olmuştu.

Alternatif çözümlerin bazı sorunları oluyor bir tanesi metnin temel çizgisinin altında kalan karakterlerin (ğ, g, y, p gibi) üzerini çizmesi.

text-decoration ve diğer tanımları alt çizgi olarak belirtmek yanlış oldu ancak bizim eskiden beri bildiğimiz anlamıyla bu bir metin alt çizgi stillendirme olduğu için yazının başlığını bu şekilde kullanmayı tercih ettim.

Metinlerin altındaki / üstündeki / üzerindeki çizgileri artık basit ve standart yollarla ekleyip stil verebiliyoruz.

text-decoration-line

text-decoration-line özelliği çizilecek çizginin türünü ayarlamamızı sağlar. Buradaki türden kasıt alt çizgi (underline), üst çizgi (overline) ve üstünü çizme (line-through) değerleridir. blink değeri vardı ancak uygulamadan kaldırıldı. Tek değer alabildiği gibi birden fazla değer de alabilir.

text-decoration-thickness

text-decoration-thicknessözelliği çizilen çizginin kalınlığını belirlememizi sağlar.

Bu özellik şu değerler alır. auto (tarayıcı karar versin demek), sayısal değerler (3px, 2em) ve yüzde değerler (tarayıcı desteği düşük) alabiliyor.

text-decoration-color

text-decoration-color özelliği çizilen çizginin rengini tanımlamamızı sağlar.

Tüm renk tanımlarını alabiliyor. Benim yıllar önce aradığım özelliğe nihayet erişmiş oldum.

text-decoration-style

text-decoration-style özelliği çizilen çizginin stilini tanımlamamızı sağlar.

  • dashed (tireli)
  • double (çift çizgi)
  • dotted (nokta)
  • solid (tek çizgi)
  • wavy (dalgalı)

değerlerini alabiliyor. wavy çok hoşuma gitti. Hemen sitemdeki bağlantıların stilini değiştirip dalgalı yaptım. :)

text-decoration

Yukarıdaki tanımların kısayolu olarak bu özelliği kullanıyoruz.

Safari’de kısayol thickness değeri olmayan ve -webkit- ön eki ile çalışıyor.

Bu özelliklerin dışında metin altı(üstü, üzeri) ile alakalı bir iki tanım daha var. Onları da bu konu içinde incelemekte fayda var.

text-underline-offset

text-underline-offset özelliği alt çizginin konumunu belirlemek için kullanılıyor. Bu özellik overline ve line-through tanımlarına etki etmiyor.

Bu özellikle eksi değer vererek yazı üzerine ve üstüne çıkarabiliyoruz. Ancak yukarıdaki tanım gibi becerili değil. Sadece yazının üzerine gelsin ama yazının arkasında kalsın isteği olursa bu çözüyor.

text-decoration-skip-ink

Bir diğer özellik text-decoration-skip-ink özelliği. Bu özellik metnin temel çizgisinin altında kalan karakterlerin (ğ, g, y, p gibi) karakterlerin üzeri çizilsin mi yoksa çizilmesin mi kararını vermemizi sağlıyor.

Kalın sağlıcakla.

Kaynaklar

CSS aspect-ratio tanımı

16 January 2023 tarihinde yayınlandı.

progress elementini stillendirelim

30 December 2022 tarihinde yayınlandı.