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

HTML Image Maps kullanımı <map> ve <area> HTML elementleri kullanım örneği.

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.

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

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

Front-End Checklist HTML sayfanızı yayına almadan önce test etmeniz gereken tüm öğelerin kapsamlı bir listesi.

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.

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

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.

Kategoriler
Kodlama

CSS Content ve attr() CSS'de content ve attr konularına değindim.

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.

Kategoriler
Kodlama

JavaScript tarayıcı algılama Yazılan CSS kodlarını farklı tarayıcılar için ayrıştırabilmek için kullanılabilecek basit bir JavaScript fonksiyonu.

Bu basit JavaScript fonksiyonunun yaptığı iş sadece tarayıcı UA’yı alıp HTML tagine class olarak atamak.

Kategoriler
Kodlama

Akışkan tipografi Akışkan tipografi ve CSS clamp nedir? Örnekler ve kaynaklar

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.

Kategoriler
Kodlama

Bilmediğiniz CSS medya sorguları CSS'de genellikle ekran boyutunu sorguladığımız CSS medya sorgularında bazı pek bilmediğimiz, sık kullanılmayan farklı medya sorguları.

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.

Kategoriler
Kodlama

Resimlere hover ile açıklayıcı metin eklemek HTML ve CSS ile resimlere hover ile açıklayıcı metinler eklemek.

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.

Kategoriler
Kodlama

Front End ultimate Cheat sheets Frontend developerlar için cheatsheet derlemesi. HTML, CSS ve JavaScript.

Hello World! Bugün sizlere Front End web developerların işine yarayacak, @DevLorenzo’nun hazırladığı Cheatsheet derelemesini paylaşacağım.

Kategoriler
Kodlama

Sayfa içi arama (jQuery) Sayfa içerisinde çok fazla aynı elemandan varsa bu jQuery fonksiyonu ile sayfa içerisinde arma yaptırabilirsiniz.

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.

Kategoriler
Kodlama

FlexBox Cheat Sheets (CSS) 2021'e girdik ve CSS Flexbox'u hatırlayıp bilgilerimizi tazeleyelim.

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.