CSS’in devamlı geliştirilmekte olmasının avantajları ve dezavantajları var. Dezavantajlara flex özelliğinin 3 kere değişmesini gösterebiliriz. Avantajları çok tabi. Bunlardan bir tanesine örnek bu makalenin konusudur. Artalan resimlerinin konumlandırmasında bazı sorunlar vardı. Bu sorunları görerek mevcut tanım geliştirildi.

Daha önce anlattığımız artalan tanımına artı özellikler eklendi.

div {
    background-position: 20px 30px;
}

yukarıdaki örnekte yaptığımız gibi sabit hizalama tanımı yaptığımızda her zaman elemanın sol ve üst köşesine göre mesafe belirtebiliyorduk. Tam işte burada yenilik geldi. Gerçi yenilik geleli bayağı zaman oluyor. Ben bu yazıyı daha önce yazmak istemiştim ama zamanım olmamıştı. Şimdiye nasipmiş.

Yeni gelen özellikten sonra artık sağ ve alttan belli mesafede artalan resmi hizalayabiliyoruz. Hemen bir örnek yapalım.

div {
    background-position: right 20px bottom 80px;
}

Gayet kullanışlı bir özellik. Zamanında çok aramışlığım vardı. Eskiden çözüm için genelde Photoshop’ta resime sağdan ve alttan belirttiğimiz mesafeyi verip saydam olarak kaydederdik.

Tarayıcı desteği konusunda da gayet güzel bir noktada.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4+ + +

Kalın sağlıcakla.

Kaynaklar

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi İpucu

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi ipucu Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.

Sublime Text Sidebar Yazı Tipi Düzenlemesi

03 April 2019 tarihinde yayınlandı.