- Katılım
- 8 Eki 2012
- Konular
- 555
- Mesajlar
- 1,301
- Online süresi
- 2mo 3d
- Reaksiyon Skoru
- 718
- Altın Konu
- 68
- TM Yaşı
- 13 Yıl 8 Ay 14 Gün
- Başarım Puanı
- 282
- MmoLira
- 2,295
- DevLira
- 243
HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
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.
Html ve Css ile Türk Bayrağı Yapımı
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ı
Css Kodları
Umarım “Html ve Css ile Türk Bayrağı Yapımı” başlıklı yazım sizin için faydalı olmuştur.
Tasarımımızın son hali şu şekilde olacak.
Html ve Css ile Türk Bayrağı Yapımı
HTML VE CSS İLE TÜRK BAYRAĞI YAPIMI
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.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Artık kodlarımızı yazmaya başlayalım.
Html Kodları
Kod:
<div class="flag">
<div class="moon"></div>
<div class="star"></div>
</div>
Css Kodları
Kod:
<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.
Son düzenleme:




