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 […]
WordPress İpucu: Aramayı Tek Kategori İle Sınırlama 25 Mart 2022 dakikada okunur WordPress tabanlı projenizdeki yazılarınızda (posts) birden fazla Kategori kullanıyor fakat site içi arama özelliğinizin sadece belli bir tanesi için çalışmasını istiyorsanız, bu yöntem sizin için. Öncelikle şunu hatırlatmakta fayda var: Eklenti kullanmadan yapabileceğiniz basit işlemler için sitenize lütfen eklenti kurmayın! Bunun 2 ana sebebi var: Güvenlik: Eklentiler o eklentiyi yazan kişinin inisiyatifindedir. Siz yüklediğiniz sırada […]
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 { […]
HTML İpucu: Mobil Cihazlarda “Mutlu” Veri Girişleri 17 Mart 2022 dakikada okunur Veri girişi alanlarınızda, HTML kodunuzda sadece tek bir konuya dikkat ederek, kullanıcı deneyimini yukarı taşıyabilir, kullanıcılarınızı mutlu edebilirsiniz! Standart olarak yazdığımız <input> etiketine inputmode özelliğini ekleyerek mobil cihazdaki farklı sanal klavyeleri etkinleştirebilirsiniz. inputmode Örnekleri <input type=”text”/> Standart type=”text” <input type=”text” inputmode=”search”/> type=”text” inputmode=”search” <input type=”text” inputmode=”tel”/> type=”text” inputmode=”tel” <input type=”tel” inputmode=”tel”/> type=”tel” inputmode=”tel” <input type=”text” […]
HTML İpucu: Arama, SMS, E-posta Linkleri 11 Mart 2022 dakikada okunur Özellikle mobil destekli sitelerde veya SADECE mobil’de görünecek etkileşimli düğmelerde kullanmak üzere linklerimizi tel: sms: ve mailto: ile zenginleştirebiliriz. Ben özellikle bazı tasarımlarımda, sadece mobil genişliklerde görünür olan Hemen Ara! tuşları kullanmayı seviyorum. Bu tuşlardaki geri dönüşleri gördükçe de, öne çıkarmanın faydalı olduğunu siz de göreceksiniz. Ayrıca farklı konularda “Bize Ulaşın” e-postaları için imkan verecekseniz, […]
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 […]
