Gelişmiş CSS Kontrolleri

CSS Navbar (Gezinme Çubuğu)

“Navigation Bar” kelimesinden türetilmiş olan “Navbar” web sayfası üzerindeki menü ya da gezinme çubuğu olarak adlandırılabilir. “Navbar” oluşturmada kullanılan en doğru yaklaşım “<ul>,<li>,ve <a> ” elementlerini kullanmaktır.

Vertical Navbar (Dikey Gezinme Çubuğu) “Vertical Navbar (Dikey Gezinme Çubuğu)” adından da anlaşılacağı üzere web sayfası içerisinde dikey olarak oluşturulmuş bir menü tipidir.

Horizontal Navbar (Yatay Gezinme Çubuğu) “Horizontal Navbar” bir web sayfası içerisinde yatay olarak oluşturulmuş bir menü tipidir.

CSS Image Gallery (Resim Galerisi)

“Image Gallery (Resim Galerisi)” HTML elementlerle bir yapı tasarlanıp CSS ile bu yapıya arzu edilen görünümün kazandırılabilmesidir.

CSS 2D Transforms (2 Boyutlu Dönüştürme)

“2D Transform” iki boyutlu (x ve y ekseni) bir uzayda html elementlerinin yerini değiştirme, döndürmek, ölçeklendirmek ve çarpıtmak için kullanılır. “2D Transform” yöntemleri; translate, rotate, scaleX, scaleY, scale, skewX ,skewY ve matrix olmak üzere dokuz (9) başlıkta incelenebilir.

Translate

“Translate” yöntemi ile bir nesnenin konumu x ve y ekseni üzerinde belirlenen değerler doğrultusunda değiştirilebilir.

Rotate

“Rotate” yöntemi ile bir nesne saat yönünde veya saat yönünün tersine yönde döndürülebilir.

Scale

“Scale” yöntemi ile bir nesnenin x-eksenindeki width (genişlik) ve yeksenindeki height (yükseklik) değerleri artırılıp azaltılabilir.

ScaleX

“ScaleX” yöntemi ile bir nesnenin sadece x-eksenindeki width (genişlik) değeri artırılıp azaltılabilir.

ScaleY

“ScaleY” yöntemi ile bir nesnenin sadece y-eksenindeki height (yükseklik) değeri artırılıp azaltılabilir.

Skew “Skew” yöntemi ile bir nesnenin x ve y-eksenlerindeki eğimi artırılıp azaltılabilir.

SkewX

“SkewX” yöntemi ile bir nesnenin x-eksenindeki eğimi artırılıp azaltılabilir.

SkewY

“SkewY” yöntemi ile bir nesnenin y-eksenindeki eğimi artırılıp azaltılabilir.

Matrix

“Matrix” yöntemi tüm 2 boyutlu dönüştürme metotlarının birleşimidir. “Matrix” yöntemiyle bir element üzerinde aynı anda istenen tüm dönüştürme işlemleri uygulanabilir.

CSS Transitions (Geçişler)

“CSS Transitions” teknik olarak bir html elemente ait özelliğin değiştirilmesi sırasında meydana gelen işlemin hızını kontrol etmektir. Fare imlecinin bir “ <div>” elementinin üzerine geldiğinde (hover) arka plan renginin ya da boyutunun değişmesi gibi işlemler css geçiş komutları ile zamana yayılarak kullanıcının gözünde daha yumuşak ve estetik görünmesi sağlanabilir. “Transitions” işlemi birçok tarayıcı tarafından desteklenmektedir. Bu da tasarımcılara geniş bir ortamda kullanıcı deneyimini artırabilme imkanı sağlamaktadır.