CSS ve HTML Dersleri | Dreamweaver Kurulumu | CSS Programlama Dersleri
Bu dersimizde kutuya gölge verme, kenarlık ve arkaplan koymayı öğreneceğiz.
"box-shadow:" etiketi gölge oluşturmayı sağlar. Gölgelerin normal değerleri sağ ve aşağıdır eğer değerleri eksili olarak girersek sol ve yukarı olur.
"transform:" kutuyu ya da başka bir şeyi döndürmeyi sağlar. Dereceyi girdikten sonra "deg" yazmalıyız.
"border-radius:" kenarları kıvırma işlemine yarar.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ders</title>
<style type="text/css">
.bg{
background: linear-gradient(to right,red,blue);
}
.kutu{
width:300px;
height:300px;
background:#ffffff;
margin:40px auto 0px auto;
box-shadow: 20px 20px 15px #f00,-20px -20px 15px #f00;/* sağ-aşağı gölge/gölge yoğunluğu/gölge rengi*/
border-radius:20px 20px 20px 20px;
transform:rotate(0deg);
float:none;
}
h1{
font:30px bold tahoma;
text-align:center;
background-color:#FFF;
}
</style>
</head>
<body class="bg">
<h1>DENEME</h1>
<div class="kutu" ></div>
</body>
</html>