Css Gradient Background
Css Gradient Background
Html Css stil kodları ile istediğimiz alanın arka planını degrade yani renk geçişli olarak nasıl ayarlıya bileceğimizi css kodlarını kullanarak gradient background oluşturalım. Html arka planında bildiğiniz üzere bir çok degrade çeşidi olduğundan burada en fazla kullanılan bir kaç gradient backgroundı size göstereceğim. ( <style type="text/css"> background-image: gradient(); </style> )
Mavi Beyaz Doğrusal Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_1{
background-image: linear-gradient(to bottom, #ffffff 0%, #5adaf3 100%);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;
}
</style>
Mavi Beyaz Soldan Sağa Doğre Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_2{
background-image:linear-gradient(to right, #5adaf3 , white);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Mavi Beyaz Sol Üstten Sağ Alta Doğre Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_3{
background-image:linear-gradient(to bottom right, #5adaf3 , white);
width:99.3%;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Mavi Beyaz Çizgi Açılı Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_4{
background-image:linear-gradient(-90deg,#5adaf3 , white);
width:99.3%;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Beyaz Yeşil Mavi Üstten Alta Doğru Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_5{
background-image:linear-gradient(white, #00ffcc ,#5adaf3);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Soldan Sağa Doğru Çoklu Renk Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_6{
background-image:linear-gradient(to right, yellow,red,violet,indigo,green,blue);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Daire Şeklinde Çoklu Renk Radyal Degrade
Uygulama Css Kodu
<style type="text/css">
.degrade_7{
background-image:radial-gradient(circle, green,indigo ,blue);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>
Yorum Gönder
Yazı Hakkındaki Düşünceleriniz...