Kategoriler
Kodlama

CSS :target kullanımı

CSS :target kullanımı hakkında örnekler.

CSS ile :target özelliğini kullanarak, tarayıcıda kullanıcı bir URL ile örnek(#ilgilikisim) sayfanın bir bölümüne odaklandığında o bölüme özel sitil atayabiliriz.

Bunu yapmak çok basit ve örnek kodlar aşağıdaki gibidir:

:target {
animation: target-fade 3s 1;
}

@keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
#comments:target .comments-inner{
    display: block !important;
}

Yukarıdaki basit kullanım gibi ayrıca aşağıdaki gibi daha gelişmiş şekilllerde de kullanılabilir, günümüzde özellikle sayfada fazla kod, fazla javascript kullanımından kaçınmak isteyen performans odaklı tasarımcıların işine yarayacak birçok modern CSS özelliği mevcuttur ve CSS gelişmeye devam etmektedir.

CSS Modal :target Selector – sadece HTML/CSS ile bir modal yapmak.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Kolay gelsin 🧙🏻‍♂️

wolkanca.com’da CSS :target kullanımı veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, CSS :target kullanımı için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.