Herhangi bir elementi boyutlandırabilmek: resize

Aşağıdaki CSS’yi uygularsak herhangi bir öğe yeniden boyutlandırılabilir hale getirilebilir: Dikkat edeceğiniz en önemli noktalardan birisi de overflow özelliği olan elementlerde çalışabilir. Ayrıca max-width veya max-height gibi değerler ile ne kadar boyutlandırılabileceğine de karar verip sınırlar oluşturabilirsiniz. See the Pen Resize Any HTML Element by Ibrahim Nergiz (@phyesix) on CodePen.

CSS Revert Nedir?

Aslında CSS özelliğini default a çevirmek olarak kısaca özetleyebiliriz. Genel olarak yazdığımız class ve buna bağlı stillere bağlı olarak bu tip problemle eminim ki karşılaşmışsınızdır. Bazen yazdığımız kuralın default halinde olmasını isteriz. İşte tam bu noktada CSS revert devreye giriyor. Örnekle daha güzel açıklayabilirim. HTML: SCSS: See the Pen CSS Revert by Ibrahim Nergiz (@phyesix) …

HTML’in Yeni Gücü: Input Type List ile Autocomplete

Bugün UI Developerların bir sıkıntısı daha çözüldü. Gün geçtikçe HTML gerçekten güçleniyor. Buna en güzel örnek de input elementine “list” özelliğinin eklenmesi. Peki bu da ne diyecek olanlar olabilir. Aslında bir inputa yazı yazdıkça belirli bir listede arama yapmanıza olanak sağlıyor. Autocomplete gibi düşünebilirsiniz. See the Pen HTML Input Type List by Ibrahim Nergiz (@phyesix) …

File Upload / Dosya Seç Görümünü CSS ile Değiştirme

Bugünün güzel haberlerinden birisi de “file-selector-button” selektörünün devreye girmiş olması olsa gerek. Bu özellik aracılığı ile o çirkin dosya yükleme butonuna biraz daha şekil verebileceğiz. HTML CSS See the Pen CSS File Input – file-selector-button by Ibrahim Nergiz (@phyesix) on CodePen.

overscroll-behavior nedir? Nerelerde Kullanabiliriz?

Sayfanın olmazsa olmaz özelliklerinden birisi de scroll olsa gerek. Sayfa içerikleri günümüzde o kadar fazla ki scroll neredeyse kaçınılmaz hale geliyor. Üzerine bir de modallar açarak user experience’i devam ettiriyoruz. Sayfanın herhangi bir bölgesinde chat ekranı var diyelim … Baya uzun bir yazışma sonrasında en üste veya en aşağıda doğru scroll ettiniz ettiniz, işte o …