Dalgalı CSS hattı. İnternette alt çizgi stilleri

Yazardan: Bağlantıların alt çizgilerinin stilizasyonu oldukça karmaşık bir meslektir ve sürekli olarak bir veya başka bir durumda hangi yöntemin uygun olduğunu unutmayım. Neyse ki, John Jameson, makalesinde bunu hızlı bir şekilde anlayamamıza yardımcı olacaktır.

Alt çizgileri stillendirmenin birçok yolu var. "Ortaya bir alt çizgi referansı oluşturun" makalesini hatırlayabilirsiniz. Orta, giden çerçevelerden bir şeyler yapmaya çalışmadı, sadece metinde çekici bir alt çizgi oluşturmak istediler.

İnce, Siyah Alt Noktaları olan harfler etrafındaki boşluklarla - Makaledeki Marsin Vitchery'nin çalışması, ortamda alt çizgi referansı oluşturur.

Ayrıca, aynı zamanda iyi bir boyut olan ve harflerin alt uzak kısımlarını atlar. Çoğu varsayılan tarayıcılardan çok daha iyi. Çıktığı gibi, ortam yolda birçok problemle çarpıştı. Ve iki yıl sonra bile, hala vurgunun iyi bir stilizasyonu çok fazla soruna neden olur.

Hedef

Neden Metin Dekorasyonu Kullanmıyorsunuz: Alt çizgi? Mükemmel senaryodan bahsediyorsak, altının altında olması gerekir:

taban çizgisinin altındaki pozisyon;

harflerin alt uzak bölümlerini atlayın;

renk, kalınlık ve stilleri değiştirin;

yeni bir dizeye git;

herhangi bir arka plan ile çalışın.

Bununla birlikte, tüm bunların altındaki tüm bunları gerektirdiğine inanıyorum, ancak, bildiğim kadarıyla, tüm bu görevleri CSS'de çözmenin sezgisel bir yolu yoktur.

Yaklaşımlar

Peki, metnin altını çizmek için emrimizde hangi yöntemler var? Aşağıdakileri hatırladım:

metin dekorasyonu;

arka plan görüntüsü;

SVG filtreleri;

Altı çizili.js (tuval);

metin Dekorasyonu- *

Listeyi geçelim ve her yaklaşımın tüm artılarını ve eksilerini düşünelim.

Metin dekorasyon özelliği

Metin dekorasyon özelliği, altını çizmenin en kolay yoludur. Sadece bir mülk başvurmanız gerekir. Küçük metinde, böyle bir çizgi normalde görünecek, ancak yazı tipi boyutunu arttırmaya değer ve zaten sakar.

Metin dekorasyon özelliğiyle ilgili en büyük sorun, kişiselleştirme eksikliğidir. Çizgi, kullanıldığı metnin yazı tipinin rengini ve boyutunu kullanır ve stilleri değiştirme çapraz tarayıcı yöntemi yoktur. Biraz sonra, bu mülkte daha ayrıntılı olarak konuşalım.

artış

sadece kullan;

taban çizgisinin altında bulunur;

safari ve iOS'taki varsayılan harflerin alt uzak bölümlerini atlar;

yeni bir dizeye atlar;

herhangi bir arka plan ile çalışır.

Eksi

diğer tarayıcılardaki harflerin alt kısımlarının uzatılmasını kaçırmaz;

renk, kalınlığı ve stilleri değiştirmek imkansızdır.

Sınır alt özelliği

Sınır alt özelliği, iyi bir hız ve kişiselleştirme dengesidir. Bu yaklaşım Kanıtlanmış kullanır Css çerçeveleriBöylece rengi, kalınlığı ve stilleri kolayca değiştirebilirsiniz. Bu, satır içi elemanlardaki bir sınır taban özelliğine benziyor:

En büyük eksi, alt çizgilerin metinden ne kadar uzakta bulunduğunu. Alt çizgi, harflerin alt uzak kısımlarının altında bulunur. Bu sorun Bir eleman satır içi blok yaparsanız ve hat yüksekliğini azaltın, ancak daha sonra yeni çizgilere atlama yeteneği kaybolur. Tek satırlar için çok uygun, ancak artık yok.

Ek olarak, metin gölge kullanarak, çizginin parçalarını alt nozül etrafındaki gizleyebilirsiniz. Bu durumda, arka plan rengini taklit etmeniz gerekecek, bu, yöntemin sadece homojen arka planlarda çalıştığı anlamına gelir. Degradeler ve görüntüler uygun olmaz.

Üzerinde şu an Alt döşeme stilize etmek için 4 özellik vardır. Sadece metin dekorasyonundan çok daha iyi.

artış

geçiş özelliğini kullanabilir ve renk ve kalınlığı canlandırabilir;

Öğe satır içi blok değilse, varsayılan olarak yeni dizelere atlar;

Eksi

hat çok uzakta ve taşımak zor;

İyi görünen çok sayıda gereksiz mülkün kullanılması gerekir;

metin gölgesini kullanırken zayıf metin seçimi.

Kutu-gölge özelliği

Kutu-Shadow özelliği, iki iç gölgeye sahip bir alt çizgi çizer: biri bir dikdörtgen yaratır ve ikinci gizlenir. Bu, yöntemin uygun şekilde çalışması için homojen bir geçmişe ihtiyaç duyulması anlamına gelir.

Metin gölgesi ile aynı numara, harflerin alt uçlarının etrafındaki geçişi simüle etmek için kullanılabilir. Çizgi rengi metinden değişirse veya oldukça ince ise, metin dekorasyonu ile olduğu gibi sorun olmamalıdır.

artış

taban çizgisinin altına yerleştirilebilir;

metin gölge kullanarak belirtileri atlayabilirsiniz;

renk ve kalınlık değiştirilebilir;

yeni çizgilere atlar.

Eksi

stilleri değiştirmek imkansızdır;

tüm arka planlar ile çalışmaz.

Arka plan resim özelliği

Arka plan görüntü özelliği en iyi görevlerimiz tarafından çözüldü ve çok az eksi var. Fikir, metin dizeleri boyunca yatay eksen boyunca tekrarlanan doğrusal gradyan ve arka plan konumunu kullanarak bir görüntü oluşturmanızdır. Öğe görüntülenmelidir: satır içi;

Aşağıdaki demo lineer gradyan kullanmaz. Dik bir etki yaratmak için, resminizi kullanabilirsiniz.

artış

taban çizgisinin altında bulunabilir;

metin gölge kullanarak alt belirtileri atlayabilirsiniz;

renk, kalınlığı (polpikselde bile) ve stilleri değiştirmek mümkündür;

kullanıcı görüntüleriyle çalışır;

yeni çizgiler üzerinden atlar;

metin gölge kullanmıyorsanız, herhangi bir arka plan ile çalışır.

Eksi

görüntünün boyutu farklı izinlere, tarayıcılara ve artış seviyelerine farklı şekillerde değişebilir.

Svg filtreleri

Bu yöntemle oynadım. Bir çizgi çizecek bir Inlaain SVG filtre elemanı oluşturabilir ve çizginin bu parçalarını saydam olması gereken parçaları gizlemek için metni genişletebilirsiniz. Filtre kimliğini atayabilir ve filtreyi kullanarak CSS'de buna bakabilirsiniz: URL ('# SVG-UnderLine').

Artı nedir - filtre, metin gölgesine güvenmeden şeffaflık ekler. Yani, harflerin alt toplarını, gradyanlar ve görüntüler de dahil olmak üzere herhangi bir arka planda atlayabilirsiniz! Aşağıdaki örnek, yalnızca bir metin dizgisi ile çalışır, bu yüzden dikkatli olun.

Ve böylece Chrome ve Firefox'ta görünüyor:

IE'de, kenar ve safari desteği olan sorunlar ortaya çıkıyor. CSS, SVG filtrelerinin desteğini test etmek zordur. @Supports kuralını filtrede kullanabilirsiniz, ancak yalnızca referansın çalışmasını kontrol edersiniz, filtre uygulanmaz veya değil. Yolum, tarayıcılarla oldukça kaba bir şekilde çalışıyor, bu yüzden iki katında dikkatli olun.

artış

taban çizgisinin altında bulunur;

alt çizgileri atlar;

renk, kalınlık ve stilleri değiştirilebilir;

herhangi bir arka plan üzerinde çalışır.

Eksi

yeni çizgiler üzerinden atlamaz;

iE, Edge ve Safari'de çalışmıyor, ancak metin dekorasyonunu bir takip olarak belirleyebilirsiniz. Safari'deki alt çizgi kendileri harika görünüyor.

Altı çizili.js (tuval)

Altı çizili.js inanılmaz bir kütüphanedir. Zhang'ın JS ve detaylara dikkat edilmesi için yapabileceği etkileyim. Teknik demoyu henüz görmediyseniz, bir dakika boyunca durun ve görün. Ağ, iş prensipleri konusunda harika bir dokuz dakikalık performansı var, şimdi çabucak harcayacağım. UnderLowing tuval kullanılarak çizilir. Şaşırtıcı bir şekilde iyi çalışan tamamen yeni bir yaklaşım.

Çekici ada rağmen, bu sadece teknik bir demo. Yani, kütüphaneyi tam bir değişiklik yığını olmadan projeye hemen yerleştiremezsiniz.

Bu kütüphane sadece kavramın kanıtı olarak belirtilmelidir. Tuval, güzel, etkileşimli alt çizgi yaratma potansiyeli vardır, ancak doğru iş için ek bir JS kodu yazmanız gerekir.

Metin Dekorasyonu- * Özellikler

Unutma, biraz sonra daha ayrıntılı bir şeyi analiz edeceğimizi söyledim mi? Şimdi bu gidecek. Metin dekorasyon özelliği kendi başına iyi çalışır, ancak daha fazlası için birkaç deneysel özellik ekleyebiliriz. daha iyi görüntü:

metin-dekorasyon-renk

metin Dekorasyonu-Atlama

metin-dekorasyon tarzı

Zamanın önünde sevinmeyin, tarayıcılarda destek hakkında bilgi sahibi olursunuz.

Metin Dekorasyonu-Renkli Özellik

Metin dekorasyon-renk özelliği, alt çizginin metnini metnin renginden ayrı olarak değiştirmenize olanak sağlar. Özelliklerin tarayıcılarda iyi bir desteğe sahip. Firefox'ta ve Safari'deki öneki ile çalışır. Eksi var - çizgileri çizgileri temizlemiyorsanız, Safari'de metnin tepesinde yatıyor. Firefox:

Mülkiyet Metin-Dekorasyon-Atla

Metin dekorasyonuna atla özelliği, altı çizili metnin altındaki belirtileri atlamaktan sorumludur.

Mülkiyet standardı değildir ve şu anda sadece safaride çalışır. Diğer tarayıcılarda çalışmak için, öneki -WebKIT-'yi kullanmanız gerekir. Safari'de, bu özellik varsayılan olarak etkinleştirilir, bu nedenle bu özellik belirtilmediği sitelerde bile alt gürültüyü atlar.

Normalize kullanıyorsanız, bunu bilmeniz gerekir. son sürümler Tüm tarayıcılarda normal çalışma için özelliği ayırın. Bu neredeyse sihirli alt çizgileri iade etmek istiyorsanız, bu özelliği etkinleştirmeniz gerekir.

Metin dekorasyon tarzı özelliği

Metin dekorasyon tarzı özelliği, sınır tarzı mülk olarak aynı alt çizgileri sunar, aynı zamanda ekler yeni tür - dalgalı. Olası değerler:

Şu anda, metin dekorasyon tarzı özelliği yalnızca Firefox'ta çalışır, ekran görüntüsü aşağıda gösterilmiştir:

Bir dizi tek renkli vurgu gibi görünüyor?

Sorun nedir?

Metin dekorasyonunun özellikleri, stilin altındaki diğer özelliklere kıyasla daha sezgiseldir. Bununla birlikte, eğer daha önce sunduğumuz şartlara farklı bir bakış, bu özelliklerin yardımı ile kalınlığı ve pozisyonu değiştirmek imkansız olduğu belirtilebilir. Küçük bir çalışmadan sonra, bu iki özelliği buldum:

metin altı çizili genişlik

metin altı çizili konum

Bu özelliklerin, bunlara ilgi eksikliği nedeniyle CSS'nin erken sürümünden atıldığı görülüyor. Uygulamadılar. Hey, bunun için suçlanmam.

bulgular

Peki metni vurgulamak için en iyi? Hepsi farklı faktörlere bağlıdır.

Küçük bir metin için, çalışacağını umarak, metin dekorasyonu ve deneysel bir metin dekorasyon-atlama özelliğini kullanmanızı öneririm. Çoğu tarayıcıda öyle görünüyor, ama her zaman insanların buna dikkat etmediği her zaman oldu. Eğer yeterince sabırlısanız, kısa sürede tüm alt çizgilerinizin iyi görünmesi ihtimali vardır ve hiçbir şeyi değiştirmek zorunda kalmayacaksınız.

Ana metin için arka plan görüntüsünü kullanın. Yöntem çalışıyor, güzel görünüyor ve bunun için SASS Mixins var. Eğer alt çizgi ince ise veya renk metinden farklı ise, muhtemelen metin gölge yöntemini atlayabilirsiniz. Bir satırdaki metin için kenarlık altını ve diğer özellikleri kullanın.

Ve gradyan arka planlar veya görüntüler üzerindeki harflerin harflerini atlamak için, SVG filtresini kullanmayı deneyin. Ya da sadece bu tür arka planları alt çizgi ile karıştırmayın. Gelecekte, tarayıcılarda destek, metin dekorasyonu - * özelliklerini kullanabilirsiniz.

Açıklama

Alt çizgisi, geçişi, çizgileri metnin üzerine metin tasarımı ve yanıp sönüyor. Aynı zamanda, birden fazla stil uygulayabilir, değerleri boşluktan çıkarabilirsiniz.

Sözdizimi

metin Dekorasyonu: [BLINK || Line-the || Üstelik || Altı çizili] | Yok | kalıtım.

Değerler

Yanıp sönen metin yanıp sönüyor. Bu metin periyodik olarak, saniyede bir kez kaybolur, daha sonra tekrar aynı yerde görünür. Bu değer şu anda tarayıcılar tarafından desteklenmiyor ve CSS3'te kınandı, animasyonun karşılığında kullanılması önerilir. Çizgi yoluyla geçişli bir metin oluşturur (örnek). Aşırı satır satırı metnin üzerinden geçer (örnek). Alt çizgi, altı çizili metni (örnek) ayarlar. Hiçbiri, varsayılan referansın altını çizerek dahil olmak üzere tüm efektleri iptal eder. Miras değeri ebeveynden devralınır.

HTML5 CSS2.1 IE CR OP SA FX

Stratejik saldırı

Nesne modeli

belge.getElementbyid ("Elementid") .style.TextDecorage

belge.getElementbyid ("Elementid") .style.TextDecorAgeBlink

belge.getElementbyid ("Elementid") .style.textDecorationlinethrough

belge.getElementbyid ("Elementid") .style.TextDecorationNone

document.getElementbyid ("Elementid") .Style.TextDecorageSenseSenceOne

belge.getElementbyid ("Elementid") .style.textDecorageInderline

Tarayıcılar

Sürüm 7.0 sürümünden önce Internet Explorer, miras değerini desteklemiyor. IE7'de satır gereği kullanılarak elde edilen çizgi, diğer tarayıcılardan daha yüksektir; IE8'de bu hata düzeltildi.

HTML alt (alt çizgileyle), üst (üstün çizgili), geçiş metninde (hat), vb. Farklı bir alt çizgi yapmanızı sağlar. Bir öncekiyle bu çip uyumludur ve çalışacaktır:

İkinci satırda, her şeyin metin dekorasyonu ile bir satırda nasıl kaydedildiği gösterilmiştir.

metin dekorasyon tarzı - Metin alt çizgi

Seçenek, / referans için dekoratif çizginin görünümünü ayarlar. Yeni CSS önerilerinde, dalgalı ve çift değerler eklendi, şimdi sadece 5'ler:

• katı - katı çizgi;
• Çift - çift (yukarıdaki ilk örnekten);
• noktalı - bir nokta dizisinden oluşur;
• kesik - noktalı bir altı çizili CSS yapmanızı sağlar;
• dalgalı - muhteşem dalgalı çizgi.

metin altı çizili pozisyon - Konumlandırma CSS alt çizgi

Bu özelliğin yardımıyla, hattın glif fontuna göre konumunu kontrol edebilirsiniz.
Toplam 4 seçenek mevcuttur:

• otomatik - metnin olası metni kadar yakındır;
• altında - Yazı Tipinin En Düşük Sınırının altında;
• sol ve sağ - Vertikçe görüntülenen girişler için sol / sağ.

İşte altında ve otomatik olarak altındaki alt harfli metin arasındaki görsel fark:

Bence fark, oldukça açık.

metin-Dekorasyon-Atlama - Ürünler için alt çizgi kaldırırız

Seçeneği kullanarak, bazı öğeleri dekore ederek iptal edebilirsiniz (atlayabilirsiniz) Html dize. Boşlukların, nesnelerin, kutu dekorasyonunun, kenarların geçerli değerlerini daha iyi anlamak için, resmi son nottan kopyalayacağım:

Yani, örneğin, mürekkep yardımı ile, Karakterlerle geçilmeyecek olan CSS'deki alt alt çizgileri yapabilirsiniz. Nesneler değeri, satır içi öğeleri (satır içi blok) - ekleme yayılmasını atlamanızı sağlar ve katı çizginin uygun yerde durdurulacağı:

Kutu dekorasyonunun parametreleri, boşluklar, kenarlar tarayıcılar tarafından desteklenir, bu nedenle sonuçları bazen beklenenden farklıdır. İşte makaleyi yazarken metin dekorasyonunun bir uyumluluğu / destek durumu:

Alt çizgi için ek fişler

Yeni başlayanlar kullanıcıları genellikle konuyla ilgili bazı tipik sorular ister, bu yüzden onları da düşünmeye karar verdik. Genel örnek, açıklamadan sonra en altta.

Alt çizgi referansı nasıl kaldırılır

a: Hover (Metin Dekorasyonu: Alt çizgi;)

Aşağıdaki örneklerdeki her iki örnekte, vuruş yaparken işin mantığını anlamanızı sağlar: veya başlangıçta Css alt çizgi Bağlantılar ve sonra gelince kaldırın veya tam tersi.

Konu hakkında başka bazı sorular varsa, yorumlarda onlara sor. Daha sonra düşünmeye ya da cevaplarda önermeye çalışacağız. Bu konudaki ana şey pratiktir - doğrudan örneklerde metin dekorasyon seçeneği için farklı özellikler eklemeyi deneyin veya kendi test dosyanızı oluşturun. Metin alt çizgisinin konusundaki ve CSS / HTML'deki bağlantıların netleşmesini umuyoruz.

Vurgulama sırasıyla farklıdır, yaratılışının yöntemleri farklıdır. Aşağıda listelenen birkaç popülerdir.

Metin Dekorasyonu Kullanımı

Alt çizgi değeri olan metin dekorasyon özelliği, metne vurgu yapar; Bu tür bir vurgu varsayılan referanslar için gözlemlenebilir. Bu şekilde oluşturulan satır, metnin genişliğine eşittir ve başlığın kendisi ile aynı renkte olacaktır. Renk çizgisini metin-dekorasyon-renkli özelliği aracılığıyla değiştirebilirsiniz. Örnek 1, metin dekorasyonunun elemana kullanımını gösterir.

.

Örnek 1. Metin dekorasyonunu kullanma

Bu örneğin sonucu Şekil 2'de gösterilmiştir. bir.

İncir. 1. Metin dekorasyon yoluyla oluşturulan satır türü

IE ve EDGE tarayıcıları, metin dekorasyon rengi özelliğini desteklemez.

Sınır tabanını kullanma

Emlak kenarlık alt. Belirli bir kalınlık, renk ve stil çizgisinin altındaki öğeye ekler. Böyle bir çizgi, başlık metninin uzunluğuna rağmen, tüm genişliğin tamamını alır (Şek. 2).

İncir. 2. Sınır tablosu tarafından oluşturulan çizginin görünümü

Hattan metne olan mesafe özelliği kullanılarak ayarlanabilir. dolgu-alt Örnek 2'de gösterildiği gibi.

Örnek 2. Sınır tabanını kullanarak

XXI Century'de Kültürel Konuşma Yasası

Nitekim, efsane fupping metin cihazı söylemi göstermektedir ve ona kendi kendine kendi karakterini verir.

Satırın metnin genişliğinde olması durumunda, H2 seçiciye bir özellik ekleyerek başlığı bir boğaz blok öğesine dönüştürmek yeterlidir. görüntüle. satır içi blok değeri ile.

Kullanım :: Daha Fazla ve İçerik

Ayrıca, özelliklerin bir kombinasyonu ile yapay bir çizgi de yapabilirsiniz. İçerik ve psödo eleman :: sonra. . Sadece başlıktan sonra boş bir sözde elemanı geri çekecekler ve bu psödo elemanın görünümü diğer özellikler tarafından belirlenir. İncirde. 3 benzer bir çizgiyi gösterir.

İncir. 3. Sonra oluşturulan satır :: sonra

Böyle bir çizginin metne göre konumu özelliği aracılığıyla ayarlanır. alt Negatif bir değer ile, mülkiyet yoluyla çizgi rengi arka fon. . Aslında, bir çizgi değil, dikdörtgen bir blok ortaya çıkar, bu nedenle arka plan dolgusu (örnek 3) kullanıyoruz.

Örnek 3. Kullanım :: Sonra

XXI Century'de Kültürel Konuşma Yasası

Nitekim, efsane fupping metin cihazı söylemi göstermektedir ve ona kendi kendine kendi karakterini verir.

Bir grup var farklı yollarla vurgulamak. Marsina Vicari "Crafting Link'in altını çizer" makalesini ortamda hatırlayabilirsiniz. Ortaöğretim geliştiriciler çılgınca bir şey yapmaya çalışmıyorlar, sadece metnin altına güzel bir çizgi oluşturmak istiyorlar.

Bu en kolay alt çizgidir, ancak doğru boyuta sahiptir ve harflerin uzak elemanlarını üst üste gelmez. Ve çoğu tarayıcıdaki varsayılan alt çizgiden kesinlikle daha iyidir. Ortam, web'deki tarzını elde etmek için zorluklarla yüzleşmek zorunda kaldı. İki yıl sonra, güzel bir alt çizgi yapmak için hala zoruz.

Hedef

Her zamanki metin dekorasyonunda yanlış olan nedir: altı çizili? Mükemmel senaryodan bahsediyorsak, alt çizgi aşağıdakileri yapmalıdır:

• taban çizgisinin altına yerleştirilmiş;
• uzaktan öğeleri atla;
• renk, kalınlık ve stil çizgisini değiştirin;
• Çok satırlı metinle çalışmak;
• herhangi bir arka plan üzerinde çalışmak.

Bunların tümü makul gereksinimler olduğuna inanıyorum, ancak bildiğim kadarıyla, bunu CSS yardımıyla başarmak için sezgisel bir yol yok.

Yaklaşımlar

Yani bu Çeşitli metodlarWeb'deki alt çizgileri uygulayabiliriz?

İşte düşündüğüm olanlar:

• metin dekorasyonu;
• sınır alt;
• kutu gölgesi;
• arka plan görüntüsü;
• sVG filtreleri;
• Altı çizili.js (tuval);
• metin dekorasyonu- *.

Bu yöntemleri tek tek analiz edeceğiz ve her birinin artıları ve eksileri hakkında konuşacağız.

metin dekorasyonu.

metin dekorasyonu, altını çizmenin en belirgin yoludur. Bir mülk uyguluyorsunuz ve bu yeterli. Küçük yazı tipi boyutlarında, oldukça iyi görünebilir, ancak yazı tipi boyutunu arttırabilir ve böyle bir alt çizgi garip görünmeye başlar.

Metin dekorasyonundaki en büyük sorun, ayarların eksikliğidir. Metnin renk ve yazı tipi boyutuyla sınırlıdır ve değiştirmenin çapraz tarayıcı bir yolunuz yok. Hala daha ayrıntılı olarak konuşacağız.

• kullanımı kolay;
• taban çizgisinin altına yerleştirilmiş;
• varsayılan olarak, Safari ve iOS'taki alt kaldırma elemanları;
• Çok satırlı metni vurgular;
• herhangi bir arka plan üzerinde çalışır.

• diğer tüm tarayıcılardaki alt uzak elemanları kaçırmaz;
• renk, kalınlığı veya stil çizgisini değiştirmenize izin vermez.

kenarlık alt.

sınır alt, basitlik ve özelleştirilebilirlik arasında iyi bir denge sunar. Bu yaklaşım, sınır için eski iyi özellik CSS'yi kullanır, bu renk, kalınlığı ve stilin kolayca değiştirebileceğiniz anlamına gelir.

Sınır tabanının küçük harf elemanları gibi göründüğü budur.

Ana dezavantajı, alt çizginin metinden mesafesidir, tamamen çıkartma elemanlarından daha düşüktür. Inline-blok özelliği öğelerini ayarlayarak ve hat yüksekliğini azaltarak düzeltebilirsiniz, ancak daha sonra metni sarma yeteneğini kaybedersiniz. Bireysel çizgiler için iyidir, ancak daha fazlası hiçbir yerde uygun değildir.

Ek olarak, ikame elemanlarının yanındaki çizginin bir kısmını örtüşmek için metin gölgesini kullanabiliriz, arka plan olarak aynı renkle taklit ederiz. Yani, bu teknik sadece basit bir tek renkli arka plan üzerinde, gradyanlar, desenler veya görüntüler olmadan çalışır.

Şu anda zaten bir satır tasarlamak için dört özelliği kullanıyoruz. Sadece metin dekorasyonu eklemekten çok daha fazla iştir.

• metin gölge kullanarak uzak elemanları atlayabilir;
• renk, şişmanlığı ve stil çizgisini değiştirebilir;
• renk ve şişmanlığın geçişlerini ve animasyonlarını kullanmanızı sağlar;
• sürekli blok değeri uygulanmazsa, çok satırlı metinle çalışır;
• metin gölge kullanmazsanız, herhangi bir arka plan üzerinde çalışır.

• çok düşük konumlandırılmış ve karmaşık bir yöntemde hareket eder;
• uygun kullanım için birçok ek özellik kullanılır;
• metin gölge kullanırken, metin seçimi çirkin görünüyor.

kutu gölge

kutu gölge iki iç gölgeye bağlı bir staidcher çizer: biri bir dikdörtgen yaratır ve ikincisi parçasını gizler. Bu ihtiyacınız olduğu anlamına gelir monofilik arka plan Çalışması için.

Alt çizgi ve uzak elemanlar arasındaki geçişleri doldurmak için metnin gölge ile aynı numarayı kullanabilirsiniz. Ancak, alt çizginin rengi metnin renginden farklıysa - veya sadece oldukça ince, çizgi, metin dekorasyonu kullanırken olduğu gibi uzak elemanlarla yüzleşmeyecektir.

• çizginin rengini ve kalınlığını değiştirmenizi sağlar;
• Çok satırlı metinle çalışır.

• alt çizgi stilini değiştirmesine izin vermez;
• herhangi bir arka planda değil.

arka plan görüntüsü.

Arka plan görüntüsüne sahip yöntem arzumuza en yakın ve minimum eksikliklere sahiptir. Fikir, metin satırının altında tekrarlanan bir görüntü oluşturmak için doğrusal gradyan ve arka plan konumunu kullanmaktır.

Bu yaklaşımı çalışmak için, metnin standart mod ekranında olması gerekir: satır içi; .

Aşağıdaki seçenek doğrusal gradyan olmadan yapılır, etkiler için arka plan görüntünüzü ekleyebilirsiniz.

• taban çizgisinin altına yerleştirilebilir;
• metin gölge pahasına uzak elemanları atlayabilir;
• Özel görüntülerle çalışır;
• birkaç metin satırı sarar;
• metin gölge uygulayamazsanız, herhangi bir arka plan üzerinde çalışır.

• görüntünün boyutu, ekran çözünürlüğüne, tarayıcıya ve yakınlaştırmaya bağlı olarak değişebilir.

SVG filtreleri.

Bu şekilde çok şey oynadım. Bir satır çeken ve ardından saydam yapmak istediğimiz hattın bir kısmını maskelemek için metni genişleten bir SVG küçük harf filtresi oluşturabilirsiniz. ID filtresini ayarlayabilir ve yaklaşık olarak CSS'de buna bakabilirsiniz. SO filtre: URL ('# SVG-UnderLine').

Bu yaklaşımın avantajı, şeffaflığın, metin gölge uygulanmadan elde edilebilmesidir, yani degradeler ve arka plan görüntüleri de dahil olmak üzere herhangi bir arka planda uzak elemanları atlarız! Sadece ayrı bir metin satırında çalışır, düşünün.

Krom ve Firefox'ta böyle göründüğü budur:

IE'de destek, kenar ve safari sorunludur. SVG filtresinin CSS'deki desteğini test etmek zordur. @Supports yönergesini filtre ile kullanabilirsiniz, ancak yalnızca filtre bağlantısının çalışmasını kontrol eder, ancak filtrenin çalışmasını kontrol eder. Girişimlerim, tarayıcının olanaklarının karşılıklı olarak tanımlanmasıyla sona erdi, bu maddi bir yöntem eksikliği.

• taban çizgisinin altına yerleştirilebilir;
• uzak elemanları özleyebilir;
• renk, kalınlık ve stil çizgisinde bir değişiklik sağlar;
• herhangi bir arka plan üzerinde çalışır.

• Çok satırlı metinle çalışmıyor;
• iE, Edge ve Safari'de çalışmıyor, ancak metin dekorasyonu bir yedekleme seçeneği olarak kullanabilirsiniz, safari'de layık görünüyor.

Altı çizili.js (tuval)

Altı çizili.js büyülüyor. Venten geng'in javascript'in ve detaylara dikkat ettiği şey etkileyici olduğunu düşünüyorum. Teknik bir demo altını çizmediyseniz.js, okuma atın ve bir dakikanızı alın. Nasıl çalıştığına dair dokuz dakikalık raporu da var, ancak kısa bir açıklamayı tarif edeceğim: alt çizgi unsurların yardımıyla çizer . Bu şaşırtıcı derecede iyi çalışan yeni bir yaklaşımdır.

Challenge adına rağmen, alt çizgi.js sadece teknik bir demo. Bu, kodu değiştirmeden projenize basitçe alıp bağlayamayacağınız anlamına gelir.

Bunu kavramın kanıtı olarak bahsetmeye karar verdim. Mükemmel interaktif alt çizgiler oluşturma potansiyeline sahiptir, ancak bunun bunu yapar, javascriptinizi yazmanız gerekir.

Yeni Özellikler Metin Dekorasyonu

Metin dekorasyonu hakkında konuşmaya söz verdiğimizi hatırlıyorsunuz. Zaman geldi.

Kendi içinde, bu özellik harika çalışıyor, ancak özelleştirmek için birden fazla deneysel özellik ekleyebilirsiniz. dıştan görünüş vurgulamak.

• metin-dekorasyon-renk
• metin Dekorasyonu-Atlama
• metin-dekorasyon tarzı

Ama çok fazla sevinme ... tarayıcılarda destek - her zaman olduğu gibi. O zaman o gider.

metin-dekorasyon-renk

Metin dekorasyon-renkli özelliği, alt çizgi seviyesini metnin renginden ayrı olarak değiştirmenize olanak sağlar. Bu özellik için destek beklediğinizden daha iyidir - Firefox'ta ve Safari'deki öneki ile çalışır. Bu SPAG: Uzak öğeleriniz varsa, Safari alt çizgileri metnin üzerine koyacak.

metin Dekorasyonu-Atlama

Metin dekorasyonuna atlama özelliği, altı çizili metindeki uzak elemanların bir geçişini içerir.

Bu özellik standart dışıdır ve şimdi sadece Safari'de, Prefix -Webkit ile çalışıyor. Safari Varsayılan olarak bu özelliği etkinleştirir, böylece uzak elemanlar her zaman geçilir.

Normalize kullanıyorsanız, son sürümlerin tarayıcıların ardışık davranışı için bu özelliği devre dışı bıraktığını unutmayın. Ve alt çizgilerin uzak elemanları etkilememesini istiyorsanız, el ile etkinleştirmeniz gerekir.

metin-dekorasyon tarzı

Metin dekorasyon tarzı özelliği, hariç, dalgalı stili ekleyen, sınır stili özelliği ile aynı tasarım fırsatlarını sunar.

İşte mevcut değerlerin listesi:

• kesikli.
• noktalı.
• Çift.
• katı

Şimdi metin dekorasyon tarzı özelliği sadece Firefox'ta çalışır, burada bir ekran görüntüsü:

Ne eksik

Metin dekorasyonunun bir dizi özelliği - *, alt çizgi için diğer CSS özelliklerinden çok daha sezgiseldir. Ancak daha dikkatli görünüyorsanız, çizginin kalınlığını veya konumunu belirleme isteklerimizi karşılamak yeterli değildir.

Küçük bir çalışmadan sonra, bir çift daha fazla özellik buldum:

• metin altı çizili genişlik
• metin altı çizili konum

Görünüşe göre, erken CSS taslakları ile ilgilidir, ancak ilgi eksikliği nedeniyle tarayıcılarda hiç uygulanmadılar.

bulgular

Peki, en iyisini altını çizme yöntemi nedir?

Küçük bir metin için, metin dekorasyonunu, bir metin-dekorasyonun iyimser ilavesiyle kullanmanızı öneririm. Çoğu tarayıcıda biraz tatsız görünüyor, ancak tarayıcılardaki alt çizgi her zaman oldu ve insanlar sadece dikkat etmeyecek. Ayrıca, her zaman sabrınız varsa, bu alt çizgide, tarayıcılarda yapılacağı gibi bir şeyi değiştirmeniz gerekmeden iyi görünecek.

Temel metin için arka plan görüntüsünü kullanmak mantıklıdır. Bu yaklaşım çalışır, harika görünüyor ve onun için SAS karıştırıcıları var. Siz, prensip olarak, alt çizgi filmin ince olması veya metinden renkle karakterize edilmesi durumunda, metin gölgesini atlayabilirsiniz.

İçin ayrı ip Metin, ek özelliklerle birlikte kenarlık altını kullanın.

Ve Degrade veya Görüntü Arkaplanına karşı uzak elemanları atlamaya ihtiyacınız varsa, SVG filtrelerini kullanmayı deneyin. Veya basitçe alt çizgi kullanmaktan kaçının.

Gelecekte, tarayıcılarda destek daha iyi olduğunda, tek cevap, metin dekorasyonunun bir dizi özelliği olacaktır.

Ayrıca Benjamin Woodroff CSS'nin aynı soruların göz önünde bulundurulduğu BENJAMIN Woodroff CSS'nin altını çizer.