Kategoriler
Kodlama

nth-child nasıl çalışıyor? CSS’de alt öğe seçici(nth-child), alt öğeleri JavaScript kullanmadan karmaşık desenlerle eşleştirmenin güçlü bir yoludur.

: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;
}
Kategoriler
Kodlama

Html ve CSS ile responsive navbar Başka bir şeye ihtiyaç duymadan sadece HTML ve CSS ile responsive bir navbar menü oluşturmak.

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.

Kategoriler
Kodlama

CSS’i savunmak Nasıl kullanılacağını bilmiyor olmanız CSS’nin suçu değil. CSS yalnız değildir!

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.

Kategoriler
Kodlama

HTML ve CSS ile ilerleme çubuğu How to create a progress bar with HTML and CSS by Alvaro Montoro

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.

Kategoriler
Kodlama

10 harika CSS hamburger menü Hamburger menü örnekleri - codepen.

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.

Kategoriler
Kodlama

12 basit HTML kodu Karmaşık kitaplıklardan kurtulmak için 12 basit HTML kod parçacığı ⚡✨

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.

Kategoriler
Kodlama

İskelet ekranı yükleme animasyonu HTML/CSS HTML ve CSS kullanarak iskelet ekranı yükleme animasyonu - Skeleton Screen Loading Animation using HTML & CSS

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.

Kategoriler
WordPress

WordPress body_class eklemek WordPress’de sayfa tipine, sayfaya özel veya ilgili girdinin kategorisine özel body classs ekleme örnekler.

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.

Kategoriler
Kodlama

HTML, CSS ve JavaScript ile dairesel progress bar HTML, CSS ve JavaScript kullanarak yapılmış basit bir dairesel progress bar.

Burada HTML, CSS ve JavaScript(jQuery tercih edildi) ile yapılmış bir basit progress bar/ilerleme çubuğu göreceksiniz.

Kategoriler
Kodlama

HTML, CSS ve JavaScript ile analog saat HTML, CSS ve JavaScript kullanarak basit bir analog saatin nasıl yapıldığını gösterdim.

Bu yazıda HTML, CSS ve JavaScript kullanarak yapılmış bir analog saat örneği göreceksiniz.

Kategoriler
Kodlama

uBlock Origin ile CSS kontrolü uBlock Origin tarayıcı eklentisi ile web sitelerinde CSS ile beğenmediğiniz kısımları değiştirmek üzerine.

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.

Kategoriler
Kodlama

Hover yetenekli cihazları algılama Cihaz yeteneklerine göre CSS yazmak için hover/pointer örneği.

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.

Kategoriler
Kodlama

CSS custom properties fallback(yedek) CSS’de Custom properties ile ilgili bir minik bilgi.

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.

Kategoriler
Kodlama

JavaScript, CSS ve (X) HTML varlıkları numeric order CSS, JavaScript ve xHTML içerisinde kullanabileceğiniz sayısal sırayla adlandırılmış HTML varlıkları.

Sayısal sırayla adlandırılmış HTML varlıkları. Umarım işinize yarar, benim yaradı.
Aşağıda, tanım ve ISO sayısal koduyla sayısal sırayla listelenen varlıklar bulunmaktadır. CSS ‘content’, adlandırılmış varlıkları veya & # 64; gibi normal sayısal varlıkları kabul etmez, ancak ASCII metnini ve unicode’u işler.

Kategoriler
Kodlama

Google Developers Learn CSS Google Developers topluluğunun sitesi olan web.dev’de CSS için bir ders programı eklendi.

CSS(Cascading Style Sheets/Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfalar) günümüz web teknolojilerinde vazgeçilmez bir dil. CSS, HTML, XML vb. gibi bir Markup language(İşaretleme dili)dir, yani PHP, JavaScript gibi bir programlama dili değildir bu yüzden bu dili öğrenmesi ve uygulaması aslına bakılırsa nispeten çok daha kolaydır.