CSS

CSS { Gerçek Hayatta }

az önce verdim kişisel web sitesi bir makyaj ve birkaç harika küçük CSS hilesi içeriyordu. Önümüzdeki birkaç gönderide bunlardan bazılarını paylaşacağım. İlki tamamen alt çizgilerle ilgili. Sitedeki gövde kopyasındaki bağlantılardan herhangi birinin üzerine gelin ve alt çizgi geçişlerinin aşağı doğru olduğunu fark edeceksiniz. Web’de, sözde öğeler ve/veya kenarlıklar kullanarak animasyonlu alt çizgi efektleri görmek oldukça yaygındır. Bu demodaki örneklerin üzerine gelmeyi deneyin.

Kalemi Gör
Sahte öğelerle canlandırıldı
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bunlar, tek, kısa metin satırları (gezinme bağlantıları gibi) için harika çalışır, ancak çok satırlı metinler için geçerli değildir. Doğrusal gradyanların akıllı kullanımıyla çok satırlı metinlerde alt çizgiyi canlandırabiliriz. background-size ve background-position. İşte bir örnek ve bu tekniğin nasıl uygulanacağı hakkında harika bir makale.

Kalemi Gör
Arka planda animasyonlu alt çizgi
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ancak bu yaklaşımın sınırlamaları vardır: Metnin satır içi bir öğe olmasını gerektirir, bu nedenle örneğin bir metin paragrafındaki bağlantı bağlantıları için iyi çalışır. Ancak, bir başlık öğesinde hareketli bir alt çizgi istiyorsanız, muhtemelen bir başlık eklemek için işaretlemeyi değiştirmeniz gerekir. <span> her zaman bir seçenek olmayan öğenin içinde.

“Gerçek” vurgular

Bazıları ile daha yeni text-decoration- özelliklerini canlandırabiliriz gerçek altı çizili – vurgulu olarak alt çizgilerimizin yanıp sönmesine ve kaybolmasına izin vermekten çok daha üstün. Herhangi bir gerçek alt çizgiyi canlandırarak, çoğu tarayıcının bize sağladığı, alt çizginin metnin alt çizgilerini atladığı güzel özelliği koruyabiliriz (varsayılan text-decoration-skip-ink Emlak).

En temel örnek için, bir fade-in efekti uygulayabiliriz. Bir metnin alt çizgisinin opaklığını canlandıramayız, ancak Yapabilmek şeffaftan istediğimiz renge kadar canlandırın. Öncelikle ayarlıyoruz text-decoration-style mülk underline. Burada steno kullanıyorum text-decoration belirtmek için text-decoration-thickness ve text-decoration-color aynı zamanda. Rengi şeffaf bir değere ayarlayabiliriz. Sonra üzerine gelindiğinde, onu opak bir değere dönüştürebiliriz:

a {
text-decoration: underline 0.15em rgba(0, 0, 0, 0);
transition: text-decoration-color 300ms;
}

a:hover {
text-decoration-color: rgba(0, 0, 0, 1);
}

Kalemi Gör
Basit solma alt çizgi animasyonu
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu, varsayılandan daha iyi, ancak oldukça basit. Daha da iyisi, geçiş yapabiliriz text-underline-offset Nispeten yeni olan ancak yaygın tarayıcı desteğine sahip olan özellik. Kendi sitemde şu şekilde kullanıyorum:

a {
text-decoration: underline 0.15em rgba(0, 0, 0, 1);
text-underline-offset: 0.2em;
transition: text-decoration-color 300ms, text-underline-offset 300ms;
}

a:hover {
text-decoration-color: rgba(0, 0, 255, 1);
text-underline-offset: 0.4em;
}

Birimler

Bir yan not olarak, kullanmayı seviyorum em yazı tipi boyutuna göreli oldukları için bu değerler için birimler, yani daha büyük veya daha küçük bir metnimiz varsa, alt çizgi orantılı olarak ölçeklenir.

tarayıcı desteği

Yukarıdakiler harika çalışıyor… Firefox’ta. Şu anda geçiş veya animasyonu destekleyen başka tarayıcı görünmüyor text-underline-offset. (Aynı şey için de geçerlidir text-decoration-thicknessbu da bazı ilginç etkilere izin verebilir.) Ama neyse ki, bu özellikleri canlandırmak için alternatif bir yaklaşım var…

Houdini kurtarmak için

İnce teknik ayrıntılara girmeden, CSS Houdini tarayıcının CSS oluşturma motorunun bölümlerini geliştiricilere sunan bir dizi düşük seviyeli API’dir. Özel bir özelliği kaydetmemize ve CSS ile canlandırmamıza olanak tanır. Daha önce geliştiricilerin mülkü Javascript’e kaydetmesi gerekiyordu, ancak şimdi muhtemelen bunu yapmak için Baştan sona kullanarak, CSS ile @property. Una’nın bir tam olarak nasıl kullanılacağını açıklayan harika bir makale ve mümkün olan bazı şeyler.

Amaçlarımız için, adı verilen bir mülkü kaydedebiliriz. --offsetiçin kullanacağımız text-underline-offset değer.

@property --offset {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}

Bir başlangıç ​​değeri belirlemek önemlidir, aksi takdirde çalışmayacaktır. Neden olduğundan emin olmasam da, bazı nedenlerden dolayı ems bir başlangıç ​​değeri olarak çalışmıyor gibi görünüyor.

Daha sonra geçiş yapmak yerine text-underline-offsetözel özelliğin kendisine geçiş yapıyoruz:

a {
transition: --offset 300ms, text-decoration-color 300ms;
}

a:hover,
a:focus
{
--offset: 0.4em;
text-decoration-color: rgba(0, 0, 255, 1);
}

Destek için test

Ne yazık ki, Houdini ile özel özelliklerin geçişi Firefox veya Safari’de desteklenmemektedir – bu nedenle, sınırlı tarayıcı desteğine sahip bir çözüm bulma sorununa geri döndük! Ama asla korkma, biz Yapabilmek bir çapraz tarayıcı çözümü uygulayın – kemer ve askılarla!

Bir tarayıcının Houdini’yi destekleyip desteklemediğini tespit etmek için bir özellik sorgusu kullanabiliriz (bu sorgu Paint API ile ilgilidir). Houdini’yi desteklemeyen tarayıcılar için, bunun yerine text-underline-offset mülk – neyse ki Firefox ve Safari’de çalışıyor!

@supports not (background: paint(something)) {
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms;
}

a:hover,
a:focus
{
text-underline-offset: 0.4em;
}
}

İşte tam çözüm:

Kalemi Gör
Alt Çizgiler (Houdini ile Chrome çözümü)
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu