CSS Battle — Target #4 — Ups n Downs
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Merhaba arkadaşlar. CSS Battle serisinin dördüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in dördüncü challenge’ına bakıyor olacağız. Hadi başlayalım!
Target #4 — Ups n Downs
Challenge’ın linki:
Hedeflenen Tasarım:
Kullanacağımız renkler:
- Öncelikle body’nin background özelliğine #62306D rengini vererek arka plan rengimizi belirleyelim.
Daha sonrasında 3 tane kutu oluşturalım.
Hedeflenen tasarımda, elemanlar ekranın tam ortasında olduğu için oluşturduğumuz bu kutuları ortalayacak bir CSS yazmamız gerekmektedir. Flexbox özelliğinden yararlanarak kutuların 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.
Şimdiiii gelelim her bir div’i stillendirme işlemine. Burada aklıma gelen 2 yöntem bulunuyor:
1 — Her bir div’e bir class atayıp bu class’lara stillendirmeleri yazmak.
2 — Pseudo sınıfılarından biri olan :nth-of-type özelliğinden yararlanmak.
Bu yazımızda ikinci çözümün detayına değinmek istiyorum :)
:nth-of-type ile bu kutuları nasıl konumlandırabileceğimize ve şekillendirebileceğimize bakalım.
div:nth-of-type(1) ile, parent’ı aynı olan div’lerden ilk karşılaşılan div elemanına, yazmış olduğumuz stillendirmelerin uygulanmasını sağlarız.
- border-radius ile kutunun kenarlarının yuvarlanması sağlanır.
- transform:translateY(50px) ile elemanın 50px dikey konumda aşağıya doğru konumlandırılmasını sağlarız.
Diğer div elemanları içinde stillendirmelerimizi gerçekleştirelim.
Bu şekilde tek tek hangi div’e nasıl bir stillendirme uygulayacağımızı belirlemek yerine tek haneli olanlarda ve çift haneli olanlarda nasıl bir stillendirme uygulanması gerektiğini belirleyebiliriz. Böylelikle her seferinde hardcoded (:nth-of-type(1), :nth-of-type(2), :nth-of-type(3) …. :nth-of-type(n) ) şekilde yazmaktan kaçınabiliriz.
Böylelikle dördüncü challenge’ımızı da tamamlamış olduk!
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
