CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek

metin_secme_rengi

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer'un(8. sürüm dahil) desteğinin söz konusu olmaması.

Kodlama çok basit

{% highlight css %} ::-moz-selection { background:#c00; color:#fff; } ::selection { background:#c00; color:#fff; } {% endhighlight %}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

{% highlight css %} a::-moz-selection { background:#1259C7; color:#fff; }

a::selection { background:#1259C7; color:#fff; } {% endhighlight %}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

Read more

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu