Bugünkü yazımızda, HTML ve CSS’yi kullanarak İsveç bayrağı dizaynı yapmayı öğreneceğiz. Hemen başlayalım!
İsveç bayrağı, mavi bir zemin üzerine sarı bir haça sahip. Bu renklerin ve şeklin birleşimi biraz karmaşık bir yapı oluşturur, ancak endişelenmeyin, HTML ve CSS ile olan temel bilginiz bu iş için yeterli olacak.
Öncelikle, bayrağın genel yapısını oluşturmak için bir div elementi oluşturuyoruz:
|
1 2 3 4 5 6 |
<div class="sweden-flag"> <div class="horizontal-stripe"></div> <div class="vertical-stripe"></div> </div> |
Bu div elementine “sweden-flag” sınıfı veriyorum. İçindeki iki div elementi ise bayrağın üzerindeki sarı çizgileri oluşturacak.
CSS’te bu bayrağı oluşturmak için, aşağıdaki kodu yazıyoruz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style> .sweden-flag { position: relative; width: 320px; height: 200px; background: #005cbf; } .horizontal-stripe, .vertical-stripe { background: #ffc720; position: absolute; } .horizontal-stripe { height: 40px; width: 100%; top: 80px; } .vertical-stripe { width: 40px; height: 100%; left: 120px; } </style> |
İşte bu kadar!
Şu yazılarda ilginizi çekebilir.
Html ve Css ile Fransa Bayrağı
Html ve Css ile Almanya Bayrağı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Happy coding!
