Google, Googlebot’un sitelerin CSS içeriğini taradığını ve “:before” veya “:after” içerisine eklenen content metinlerinin(ve diğer nesneler) arama motoru sonuçlarında gösterileceğini belirtti.
Etiket: CSS
Belirli bir sayfa için reklamveren bulunamadığında Google AdSense o sayfadaki reklam birimlerini boş beyaz bir alanla doldurur. Burada vereceğim CSS yöntemiyle bu boş beyaz ve gereksiz reklam slotlarını kolaylıkla gizleyebilirsiniz.
:nth-child adında bir CSS seçicisi var, işte onu kullanmanın bir örneği:
ul li:nth-child(3n+3){
color: #ccc;
}
Mobil cihazların da yaygınlaşmasıyla hamburger menü Navigasyon için bir std simgesi haline geldi, o kadar popüler hale geldi ki, günümüzde en yaygın platformlar ve uygulamalar bile bunları kullanıyor. Hamburgere benzediği için bu şekilde adlandırılmıştır.
En sevdiğim programlama dili olan CSS’yi savunmak için buradayım. Klasik programlama dili çerçevesinde olup olmadığı umurumda değil ve kullananların da umursadığını sanmıyorum. Ancak, güzelliğini, gücünü, basitliğini ve karmaşıklığını önemsiyorum.
Daha önce bu bloga eklediğimiz –100 adet CSS loading– başlıklı sayfaya ek olarak HTML ve CSS ile loading/ilerleme çubuğu örneğini arşivime eklemek istedim.
Responsive(duyarlı) web tasarımı uzun zaman önce web’de standart olmuştur. Hemen hemen her web sitesinde, genellikle bir hamburger menüsü tarafından gerçekleştirilen bir (nvigasyon)gezinme menüsü bulunur. En iyi CSS hamburger menülerinden (+ simgeler ve animasyonlar) oluşan bir koleksiyona burada erişebilirsiniz.
vanilla HTML olarak tanımlayabileceğim bir yöntem, burada karmaşık JavaScript ve CSS frameworkleri kullanmak gerekmeksizin aslında sadece HTML ve ihtiyaca göre bir miktar CSS ile işinizi halletmenize yarayan 12 basit örnek göreceksiniz.
Bu makalede, HTML CSS ve JavaScript kullanarak İskelet Ekranı Yükleme Animasyonunun nasıl oluşturulacağını öğreneceksiniz. Herhangi bir şeyi yüklemek için kullanılan modern bir tasarımdır. Temel olarak, farklı türdeki web sitelerinin herhangi bir öğesini yüklerken, İskelet Yükleme veya açılış ekranları olarak bilinen bir tür animasyon göreceksiniz.
WordPress’in body_class() işlevi standart tüm temalarda vardır ve varsayılan olarak <body class="pageid-1 page-parent page-template-default logged-in"> şeklinde class ekler.
Burada HTML, CSS ve JavaScript(jQuery tercih edildi) ile yapılmış bir basit progress bar/ilerleme çubuğu göreceksiniz.
Bu yazıda HTML, CSS ve JavaScript kullanarak yapılmış bir analog saat örneği göreceksiniz.
Bildiğiniz gibi AdBlock ve uBlock Origin gibi tarayıcı uzantı/eklentilerinin ana görevi kullanıcıları web sitelerindeki can sıkıcı öğelerden özellikle reklamlardan kurtarmak. Burada reklamlar harici farklı kurallar kullanarak web sitelerindeki beğenmediğiniz diğer şeyleri de değiştirebileceğimizin örneklerini göstereceğim.
Günümüzde webe bağlanabilen cihazların çeşitliliği eskiye göre çok fazla, biz geliştiriciler artık web sitesi kullanıcılarımıza sunduğumuz stilleri belirleyen faktör olarak görüntü alanı boyutuna güvenemeyiz, yani ekran boyutuna göre tasarlayabilirsiniz ancak cihazlar sadece ekran boyutuna göre değil birçok farklı yeteneklere göre de değişebiliyor.
CSS custom properties (variables) CSS için harika bir kolaylık ve özetle bir elemana veya :root şekilnde global olarak bir değişken değeri atamaktan ibaret, örneğin --metin-rengi: #212121; atadığınızda bunu bir eleman için color: var(--metin-rengi); şeklinde kullanabilirsiniz.