CSS Grid ile layout’u oluşturmak çok kolay ve fonksiyonel. Bu makalede grid özelliklerinden olan grid-template-areas özelliği ile HTML bileşenlerimizi nasıl component gibi kullanabiliriz, bunu göreceğiz. Layout’umuzu Parçalara Bölmek Uzun bir süre Bootstrap’ten gelen bir alışkanlık olarak layout’u kolonlar ile bölerdik. Örneğin, 3 eşit parça için 3 x .col-4 yapısını kullanırdık. Flex ve grid…

CSS’te bir resmin istediğimiz bir bölümünü kırpmamız için doğal bir yöntem yoktu. Ya resmi saran farklı bir elemente ihtiyacımız vardı (<figure> gibi) yada background-image kodu ile resmin pozisyonunu ve boyutunu ayarlamak gerekiyordu. İki yöntemide nasıl kullanacağımıza bakalım. Resmi Farklı Bir Element ile Sarmak Bu yöntemde üç adımda istediğimiz sonuca ulaşabiliyoruz. <img /> etiketimizi bir kapsayıcı…

omergulcicek.com — Düzenli aralıklarla kişisel sitemi farklı yazılım dilleriyle baştan yazıyorum. Teknolojinin yanı sıra, tasarımsal olarakta daha minimal, sade ve şık bir arayüz yapmaya özen gösteriyorum. v6 olarak isimlendirdiğim bir önceki versiyonda React başlangıç kiti olan Gatsby ile geliştirmiştim. Kaynak kodlara GitHub’tan ulaşabilirsiniz. v7 yani NextJS ile geliştirilmiş olan versiyonu yayına almış…

Çalıştığım projede tasarımı dinamik olarak render edilen componentlere ihtiyacımız oldu. Detaylandırmak gerekirse, default bir butonumuz var fakat bu butonu isteyen kişi istediği gibi stillerini customize edebilecek ve özelleştirilmiş stilleri içeren JSON Frontend’e geldiğinde buna uygun bir çıktı elde edecek. Buradaki asıl sıkıntımız ise, var olan CSS’lerin üzerine yeni bir CSS…

Yeni bir yıl, yeni hayaller, yeni hedefler… Geride bıraktığımız senede hedeflerimi büyük oranda başarmıştım. Yeni yılda çok daha hareketli, gezgin, sosyal bir kişi olmayı hedefleyeceğim. 🎮 Alınacaklar Listesi Teknolojik olarak büyük donanımları hep aldım. Fakat güzel bir çalışma masası ve mouse’a ihtiyacım var. …

Responsive Design kavramı 25 Mayıs 2010 tarihinde Ethan Marcotte adlı bir arayüz tasarımcısı sayesinde hayatımıza girmişti. Responsive Web Design başlığı ile duyrulan bu fikir, her Frontend geliştiricisinin aktif olarak kullandığı bir özellik konumunda. CSS Media Sorgularıyla İlgili Sorunlar Responsive design harika fakat yetersiz kaldığı noktalar olabiliyor. Bunu bir örnek üzerinden kavramaya çalışalım.

Her yiğidin yoğurt yiğişi ayrıdır, bir kodu birden çok şekilde yazabilirsiniz. Hepsi doğru çıktığı verebilir fakat performans anlamında birbirlerine göre artı eksileri olabilir. Şöyle örnek bir resim etiketimiz olsun: <img id="logo" src="/logos/turkey-national-day-2021.png" alt="Cumhuriyet Bayramı kutlu olsun!" title="Cumhuriyet Bayramı kutlu olsun!" height="200" width="500" /> JavaScript’te bir HTML etiketine erişmek için çeşitli…

15 Temmuz sabahı bavullarımızı alıp 4 üniversite arkadaşım ile Fethiye’ye doğru yola çıktık. Güzergah üzerinde önce İzmir’i gezdik, ardından Marmaris İçmeler plajında yüzdükten sonra, son ve asıl durağımız olan Fethiye Ölüdeniz’e gittik. Arkadaşlarla ilk tatilim olması açısından benim için önemliydi. Tarihe not düşmek adına biraz özet, birazda fotoğraflar paylaşmak istedim. İzmir …

CSS yazarken hayatımızı kolaylaştıran bazı fonksiyonlar var. Bazı durumlarda kullanılan genişlik, font-size gibi değerlerin dinamik olarak hesaplanmasına ihtiyacımız olabiliyor. Örneğin, bir kart sayfada 70% yer kaplasın fakat 300px’den küçük olmasın gibi bir senaryomuz varsa, bu durumda şöyle bir CSS yazılmasını bekleriz; .card { width: 70%; min-width: 300px; } CSS min()…