HTML Listeleri 2.0 16 Kasım 2022 dakikada okunur Bu yazıda, daha önce de değindiğim HTML Listelemelerine biraz daha yakından bakacağız. Çoğunlukla kod örneklerini paylaşarak kod – sonuç odaklı ilerleyeceğiz. Hazırsanız başlayalım 👇 Öncelikle Temelleri Bir Hatırlayalım Eğer <ol> / <ul> / <li> yapılarını hatırlıyorsanız eğlenceli kısıma atlayabilirsiniz. Sıralı listelemeler, yani Ordered List için, İngilizce tabirin ilk iki harfini kullanıyoruz. Yani O – L […]
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 […]
Sayfa Açılış Hızınızı Artırın: Görselleri Asenkron Yükleme (img decoding async) ve Lazy Loading 10 Nisan 2022 dakikada okunur Karşıt görüşler olsa da, çoğunluk kabul edecektir ki; ‘iyi kullanıcı deneyimi hızlı servisle başlar’. Internet tarayıcıları (Chrome, Firefox, Opera…) görsel ve metin içerikleri senkron olarak aynı anda yüklerler. Bu da sayfa açılırken güzel bir görüntü sunar. Şöyle ki: <h2>Güzel Bir Başlık</h2> <img src=”büyük-bir-gorsel” alt=”Görsel Hakkında Bilgi” /> <p>Kullanıcının almak istediği bilgiyi sunan metinler.</p> Maalesef her […]
Tarayıcınızı Not Defterine Çevirin 7 Nisan 2022 dakikada okunur Acil durumlarda kağıt aramakla veya bilgisayarınızdan program – uygulama açmakla uğraşma derdine son! Bu tek satırlık kodu tarayıcınızın adres satırına yapıştırıp, ENTER’a basın. Ardından kısa yol çubuğunuza – sürükle bırak yoluyla çekin ve gerektiğinde bu kısa yola tıklayın. Yeni açılacak sekmeyi, artık, geçici bir not defteri olarak kullanabilirsiniz.
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, […]
