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.
Etiket: Frontend
Gerçekten bir HTML ustası iseniz birçok ioucu/hile biliyorsunuzdur, bunlardan biri de <map> ve <area> kullanmak, görseller için oldukça kullanışlı bu yöntem bazen hayat kurtarıcı olabilir.
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.
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.
Front-End Checklist, HTML sayfanızı yayına almadan önce test etmeniz gereken tüm öğelerin kapsamlı bir listesidir. Modern web siteleri ve titiz geliştiriciler için mükemmel Ön Uç Kontrol Listesi.
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.
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.
CSS’e çok şey borçluyuz, günümüzde var olan tüm web uygulamaları hatta neredeyse tüm mobil uygulamaların görünümleri CSS ile verilmektedir.
Bu basit JavaScript fonksiyonunun yaptığı iş sadece tarayıcı UA’yı alıp HTML tagine class olarak atamak.
Akışkan tipografi nedir? Akıcı tipografi ile, yazı tipi boyutlarınız için görüntü alanı birimlerini(cihazın ekran boyutu) tek başına veya bir calc()değerin parçası olarak kullanırsınız. Bu, ikisini dengede tutarak yazı tipi boyutunuzun ekranın boyutuyla birlikte büyümesini sağlayacaktır. Be bu da responsive tasarımda yazı/font boyutlarının da akıcı olmasını yani responsive typography/duyarlı tipografi kullanmanız anlamında gelir.
CSS medya sorguları CSS3’ün bir parçası olarak ortaya çıktı. Cihaza veya cihazın özelliklerine göre CSS’nizi değiştirmenize izin vermektedir. Sayfanızın görünümünü ekranınızın genişliğine göre ayarlamak için muhtemelen bunları zaten kullanıyorsunuz. Bununla birlikte, genellikle göz ardı edilen başka birçok fonksiyonu vardır.
Bu yazımda HTML ve CSS kullanarak sayfa içerisindeki resmlerin üzerine gelindiğinde :hover olarak metin gösterilmesini paylaşacağım. Bu Google Görsel SEO için de iyi bir işlem.
Hello World! Bugün sizlere Front End web developerların işine yarayacak, @DevLorenzo’nun hazırladığı Cheatsheet derelemesini paylaşacağım.
Geçen gün bu blog için yaptığım arşiv sayfasında sitedeki tüm başlıkları listelemiştim, aklıma arşiv sayfasına girenlerin sayfa içerisinde listelenmiş başlıklar içerisinde arama yapabilmesi fikri geldi ve hemen jQuery’ye sarıldım ve yaptım. Tabii ki paylaşıp bu deneyimi de arşivlemek istedim.
CSS’de Flexbox kullanmayı seviyorum ve bu harika bir şey, önceden birçok farklı CSS kuralı yazarken Flexbox ile sadece bir satırda istediğim görüntüyü alabiliyorum.
Burada Joy Shaheb’in paylaşmış olduğu “FlexBox Cheat Sheets in 2021 || CSS 2021” makalesini paylaşmak istedim umarım işinize yarar.