CSS Battle — Target #3 — Push Button

3 min readApr 18, 2021

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo

Merhaba arkadaşlar. CSS Battle serisinin üçüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in üçüncü challenge’ına bakıyor olacağız. Hadi başlayalım!

Target #3 — Push Button

Challenge’ın linki:

CSSBattle

CSS Code Golfing Game is here!

cssbattle.dev

Hedeflenen Tasarım:

Kullanacağımız renkler:

Öncelikle body’nin background özelliğine #62374e rengini vererek arka plan rengimizi belirleyelim.

Hedef tasarımı elde edebilmek için yapabileceklerimiz:

Bir dikdörtgen oluşturup bu dikdörtgenin ortasındaki en küçük daireden başlayarak en büyük daireye kadar eleman ekleyebiliriz veya
içerideki sarı daire’yi oluşturduktan sonra bir önceki yazımızda yaptığımız gibi box-shadow özelliği ile etrafındaki dairelerin oluşturulmasını sağlayabiliriz.

Bu yazımızda ikinci çözümün detayına değinmek istiyorum :)

Öncelikle dikdörtgenimizi oluşturmayla başlayalım:

Hedeflenen tasarımda, dikdörtgen ekranın tam ortasında olduğu için oluşturduğumuz dikdörtgeni ortalayacak bir CSS yazmamız gerekmektedir. Flexbox’tan yararlanarak, dikdörtgenin body’nin merkezinde yer almasını sağlayabiliriz.

display özelliğine flex’i tanımladıktan sonra;

justify-content:center ile elemanların yatayda ortalanmasını sağlarız.
align-items:center ile elemanların dikey konumda ortalanmasını sağlarız.

Süper! Şimdi dikdörtgenimizin içerisinde bulunan sarı daire’yi oluşturma işlemine geçelim.

Bunun için Pseduo elemanlarından ::before veya ::after özelliğinden yararlanabiliriz.

Oluşturduğumuz bu daireyi div’in ortasına almak için body’de yaptığımız gibi yine flex’ten faydalanabiliriz.

Artık yapmamız gereken, bu sarı daire’nin etrafında iki tane daha daire oluşturmak.

Bir önceki yazımızda box-shadow’un ilk iki parametresini kullanarak, oluşturulan gölgenin konumlandırılmasını sağlamıştık. Bu yazımızda ise 4.parametre olan spread parametresinden yararlanıyor olacağız.