Html ve Css ile Gökyüzü Tasarımı Yapımı

Bu yazımda Css3 ile birlikte gelen gradient özelliğini kullanarak gökyüzü tasarımı yapacağız.

Tasarımımızın son hali şu şekilde olacak.

Kodlarımızı yazarken Css3 özelliklerinden linear-gradient özelliğini kullanıyoruz. Bu konuda eksikleriniz varsa aşağıdaki linkten ilgili yazımı inceleyebilirsiniz.

Css Gradient Kullanımı

Artık kodlarımızı yazmaya başlayalım.

Html Kodları

<div id="background"></div>
<div id="moon"></div>

Css Kodları

<style>
#background {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
#moon {
background-color: white;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
left: 80%;
top: 15%;
}
</style>

<style>

#background {

position: fixed;

padding: 0;

margin: 0;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);

}

#moon {

background-color: white;

height: 80px;

width: 80px;

border-radius: 50%;

position: fixed;

left: 80%;

top: 15%;

}

</style>

Umarım “Html ve Css ile Gökyüzü Tasarımı Yapımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Html ve Css ile Kalp Yapımı

Html ve Css ile Güp Güp Atan Kalp Yapımı

Yeni bir yazımda görüşmek üzere.

Html ve Css ile Gökyüzü Tasarımı Yapımı

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın