Bu yazımda Css3 ile birlikte gelen transform özelliğini kullanarak Türk Bayrağı tasarımı yapacağız.
Tasarımımızın son hali şu şekilde olacak.
Kodlarımızı yazarken Css3 özelliklerinden transform özelliğini kullanıyoruz. Bu konuda eksikleriniz varsa aşağıdaki linkten ilgili yazımı inceleyebilirsiniz.
Artık kodlarımızı yazmaya başlayalım.
Html Kodları
|
1 2 3 4 5 6 |
<div class="flag"> <div class="moon"></div> <div class="star"></div> </div> |
Css Kodları
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<style> .flag { position: relative; width: 390px; height: 250px; background-color: #b10102; } .moon { position: absolute; top: 48px; left: 130px; width: 150px; height: 150px; background-color: transparent; border-radius: 50%; box-shadow: -25px 0px 0px 15px #ffffff; } .star { position: absolute; border-right: 50px solid transparent; border-bottom: 33px solid #ffffff; border-left: 50px solid transparent; transform: rotate(93deg); top: 103px; left: 220px; } .star:before { border-bottom: 53px solid #ffffff; border-left: 6px solid transparent; border-right: 30px solid transparent; position: absolute; top: -32px; left: -27px; content: ''; transform: rotate(-28deg); } .star:after { position: absolute; left: -50px; border-right: 50px solid transparent; border-bottom: 35px solid #ffffff; border-left: 50px solid transparent; transform: rotate(-70deg); content: ''; } </style> |
Umarım “Html ve Css ile Türk Bayrağı Yapımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Html ve Css ile Gökyüzü Tasarımı Yapımı
Html ve Css ile Güp Güp Atan Kalp Yapımı
Yeni bir yazımda görüşmek üzere.
