Satır İçi CSS ile Bir Hover Efekti Yazmak İster misiniz? CSS Değişkenlerini kullanın.

0
15

Geçen gün, her yazının küçük bir doz kişilik için kendisine eklenmiş özel bir rengin olduğu bir blog üzerinde çalışıyordum. Yazar, yazıyı yazarken CMS’de bu rengi seçer. Sadece süper hafif bir sanat yönetmenliği.

Bu rengin ön uçta görünmesini sağlamak için, değeri doğrudan satır içi stil özniteliğine yazdım.

öğesi. Şablonlarım Sıvı biçiminde oldu, ancak bu diğer şablon dillerinde benzer görünecektir:

{gönderilerdeki gönderi için%}

{{yazı başlığı}}

{{içerik}}

{% endfor%}

Orada sorun yok. Ama sonra “Özel rengin yalnızca makale kartının üzerine gelindiğinde görünmesi hoş olmaz mıydı?” Diye düşündüm. Ancak bir stil niteliğinde vurgulu stilleri yazamazsınız, değil mi?

İlk fikrim style niteliğini yerinde bırakmak ve şu şekilde CSS yazmaktı:

makale {background: lightgray! önemli; } makale: hover {/ * Çalışmıyor! * / arkaplan: devralır; }

Önemli kullanarak satır içi stili geçersiz kılabiliyorum, ancak fareyle üzerine gelindiğinde bunu geri almanın bir yolu yok.

Sonunda, renk değerini CMS’den almak için bir stil niteliği kullanabileceğime karar verdim, ancak hemen uygulamak yerine, bir CSS değişkeni olarak saklayın:

{{yazı başlığı}}

{{içerik}}

Ardından, bu değişken, normal CSS’de fareyle üzerine gelme stilini tanımlamak için kullanılabilir:

makale {arka plan: lightgray; } makale: hover {/ * Çalışıyor! * / arkaplan: var (- özel_renk); }

Artık renk değeri bir CSS değişkeni olarak kaydedildiğine göre, onunla yapabileceğimiz her türlü başka şey var. Örneğin, gönderideki tüm bağlantıların özel renkte görünmesini sağlayabiliriz:

makale a {renk: var (- özel_renk); }

Ve değişkenin kapsamı

öğesi, sayfadaki başka hiçbir şeyi etkilemez. Hatta aynı sayfada, her birinin kendi özel renginde oluşturduğu birden fazla gönderi görüntüleyebiliriz.

CodePen Embed Yedeklemesi

CSS değişkenleri için tarayıcı desteği, Internet Explorer haricinde oldukça derindir. Her neyse, kendinizi bir CMS’de hafif sanat yönetmenliği ile çalışırken bulursanız işe yarayabilecek küçük bir numara ve CSS değişkenlerinin ne kadar harika olabileceğine dair bir hatırlatma.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz