Örneklerle CSS Seçicileri (Selectors) ve :nth-child Kullanımı 14 Nisan 2023 dakikada okunur CSS seçiciler ön-yüz (frontend) tasarımcılar için hayat kurtarıcı, kolay yordamlardır. Her ne kadar UI ve UX tasarımcılar ve hatta yazılımcılar bu konuya eğilmeyi ihmal veya reddetseler de, öğrenildiğinde ne kadar kolay ve keyifli çözümler ürettiğini göreceksiniz. Öncelikle herkese karmaşık gelen :nth-child seçicisinin kullanımına bir bakalım. Bunu da bir şema ile gösterelim: first-child 1 2 3 […]
Bir Öğeyi Gizlemenin 3 Yolu (HTML / CSS) 24 Nisan 2022 dakikada okunur Web sayfalarında bir öğeyi gizlemek bazen gerekli olabilir. Bazen de gizlemeyi anlık (veya geçici) bir düzeltme için kullanırız. Web sayfalarında en yaygın öğe gizleme usullerini inceleyelim. İnceleyeceklerimizden ilk ikisi CSS özellikleri olacak: display: none ve visibility: hidden Çoğumuz bunları zaten kullanıyor olsak da, açıklığa kavuşturmak için özetleyelim. .gizle {display: none} .gosterme {visibility: hidden} .gizle sınıfına […]
CSS ile Metin Kırpma (Truncate) – Tek Satır / Çoklu Satır 30 Mart 2022 dakikada okunur Kodlama ile uzun bir metni kısaltmanın farklı yolları olsa da, metinleri kısaltmak için CSS’i de rahatça kullanabiliriz. Kullanmak istediğimiz alanın genişliğinden daha uzun bir metni kesmek için CSS Metin Kırpma veya kesme yöntemlerini kullanabiliriz. İhtiyacımıza uygun olan tek satır veya çoklu satır için kırpma (truncate) metodlarından bize uygun olanı seçelim. Tek Satır için CSS Kırpma […]
CSS Maskeleme ile Metinlere Resim Giydirme 18 Mart 2022 dakikada okunur CSS’in güzelliklerinden faydalanarak bir metine renk verebildiğimiz gibi, resim giydirme de kullanabiliriz. Siz de dikkat çekici başlıklar için, dilerseniz resimden oluşan başlıklar, yani resim giydirme / maskeleme kullanabilirsiniz. Bunun için anlatacağım yöntem: -webkit-background-clip . Bu yöntemde, metnimizi gerçekten metinsel olarak yazıyoruz. Böylece esnek, kolay değiştirilebilir ve dinamik başlıklar elde edebiliyoruz. <div class=”metinResim istanbul”>İSTANBUL</div> .metinResim { […]
CSS İpucu: Font Özelliklerini Tek Satırda Toplayın 💡 25 Şubat 2022 dakikada okunur CSS dosyanızda font özelliklerini tek satırda toplayarak hem daha okunaklı, hem de daha derli toplu bir görünüm sağlayabilirsiniz. h1 {font: bold 2rem/1.8 Sans-Serif} /* h1 { font-family: Sans-Serif; font-size: 2rem; line-height: 1.8; font-weight: bold; } */
CSS Sayaçları İle Listelemelerin Uzmanı Olun 29 Mart 2020 dakikada okunur CSS Sayaçlarını ilk keşfettiğimde mutluluktan havalara uçacak gibiydim! Kullanım alanlarına dair olasılıkları düşündükçe hep heyecanlanırım. Bu yazıda, sizinle beraber, bir listelemeyi özelleştirmek için CSS Sayaçlarını yani counter-reset ve counter-increment yordamlarını nasıl kullanabileceğimizi göreceğiz. HTML’de en çok kullandığımız listeleme yöntemleri -bildiğiniz gibi- OL (Ordered List) ve UL (Unordered List)‘dir. Fakat bir projemde gerekene kadar bu listelemeyi […]
