Metin süsleme - CSS Hileleri

Anonim

text-decorationÖzelliği, bir alt çizgi, üst çizgi, çizgi-through ya da seçilen metnin satır bir arada eklenir.

h3 ( text-decoration: underline; )

Değerler

  • none: çizgi çizilmez ve mevcut dekorasyonlar kaldırılır.
  • underline: Metnin taban çizgisinde 1 piksellik bir çizgi çizer.
  • line-through: metnin "orta" noktasında 1 piksellik bir çizgi çizer.
  • overline: metin boyunca "üst" noktasının hemen üstüne 1 piksellik bir çizgi çizer.
  • inherit: ebeveynin dekorasyonunu devralır.

blinkDeğer W3C spec, ama artık kullanılmamaktadır ve herhangi bir geçerli tarayıcıda çalışmaz. İşe yaradığında, metnin% 0 ile% 100 opaklık arasında hızla geçiş yaparak "yanıp sönüyor" görünmesini sağladı.

Demo

CodePen'de Kalem CSS Hileleri: CSS Hileli Metin Süsleme (@ css-tricks) konusuna bakın.

Kullanım Notları

Birleştirebilirsiniz underline, overlineya line-throughbirden dekorasyon çizgileri eklemek için bir boşlukla ayrılmış listede değerleri:

p ( text-decoration: overline underline line-through; )

Varsayılan olarak, çizgi veya çizgiler metnin rengini kendi colorözelliği tarafından belirlenen şekilde devralır . Bunu, text-decoration-colorözelliği veya üç değerli stenografi özelliğini destekleyen tarayıcılarda değiştirebilirsiniz .

text-decoration Steno Özellik olarak

text-decorationsteno özellik olarak text-decoration-styleve kombinasyon halinde kullanılabilir text-decoration-color:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Şu anda yalnızca Firefox bunu öneksiz olarak desteklemektedir. Safari bunu -webkitönek ile destekler . Chrome ayrıca -webkitönek ve Chrome işaretlerinde etkinleştirilen deneysel web platformu özelliklerine ihtiyaç duyar .

İlişkili

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Daha fazla bilgi

  • W3C spesifikasyonunda CSS Metin Dekorasyon Modülü Seviye 3 CR'de bir steno özelliği olarak metin dekorasyonu
  • MDN'de metin dekorasyonu

Tarayıcı Desteği

Tüm tarayıcılar CSS2.1 "longhand" özelliğini destekler text-decoration. Steno özelliği ve alt özellikleri text-decoration-color, text-decoration-lineve text-decoration-styleFirefox'ta öneksiz ve -webkitSafari'de önekle desteklenir . Chrome, -webkitönek ve Deneysel Web Platformları bayrağı etkinken bu değerleri de tanıyacaktır .

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
91 87 Hayır 88 TP

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

* text-decorationtam olarak desteklenen, -webkitönek ile desteklenen alt özellikler .
† alt mülkler ayrıca deneysel web platformu özelliklerinin işaretinin etkinleştirilmesini gerektirir.
‡ text-decorationYalnızca CSS2.1 ; alt özellikler desteklenmez.