HTML VE CSS İLE TÜRK BAYRAĞI YAPIMI

[ibrahim6516]

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ı

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ı

<div class="flag">
  <div class="moon"></div>
  <div class="star"></div>
</div>

Css Kodları

<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.

 

[Replicant]

Paylaşım için teşekkürler