Üste ki resimde de gördüğünüz gibi iki resim arasında bulunan başlığın ve metin satırlarının olduğu kutunun gölge ile efekt oluşturmak için aşağıda ki kodları kullanarak sizde internet siteniz veya CSS ve HTML kodlarını destekleyen sitelerinizde de kullanabilirsiniz.
HTML KODLARI:
<html>
<head>
<style>
.gec {
height: 300px;
position: absolute;
top: 100px;
left: 370px;
margin: 20 auto;
text-align: justify;
padding: 50px;
border-radius: 20px;
width: 300px;
background: linear-gradient(to bottom right, white, gray);
box-shadow: 20px 20px 30px white;
z-index: 1;
}
h3 {
text-shadow: 5px 5px 5px #888888;
}
body {
background-color: black;
}
.resim {
position: absolute;
top: 170px;
background-repeat: no-repeat;
z-index: 0;
}
.resim2 {
position: absolute;
top: 170px;
right: 0px;
background-repeat: no-repeat;
z-index: 0;
}
</style>
</head>
<body>
<div class="resim">
<img src="resSol.jpg" width="300px">
</div>
<div class="resim2">
<img src="resSag.jpg" width="300px">
</div>
<div class="gec">
<br>
<h3> İSTİKLAL MARŞI</h3>
<p>
Korkma, sönmez bu şafaklarda yüzen al sancak;</br>
Sönmeden yurdumun üstünde tüten en son ocak.</br>
O benim milletimin yıldızıdır, parlayacak;</br>
O benimdir, o benim milletimindir ancak.</br>
</p>
<p>
Çatma, kurban olayım, çehrene ey nazlı hilal!</br>
Kahraman ırkıma bir gül... Ne bu şiddet, bu celal?</br>
Sana olmaz dökülen kanlarımız sonra helal;</br>
Hakkıdır, Hakk'a tapan, milletimin istiklal.</br>
</p>
</div>
</body>
</html>
.gec {
height: 300px;
position: absolute;
top: 100px;
left: 370px;
margin: 20 auto;
text-align: justify;
padding: 50px;
border-radius: 20px;
width: 300px;
background: linear-gradient(to bottom right, white, gray);
box-shadow: 20px 20px 30px white;
z-index: 1;
}
h3 {
text-shadow: 5px 5px 5px #888888;
}
body {
background-color: black;
}
.resim {
position: absolute;
top: 170px;
background-repeat: no-repeat;
z-index: 0;
}
.resim2 {
position: absolute;
top: 170px;
right: 0px;
background-repeat: no-repeat;
z-index: 0;
}
Yorum Gönder Blogger Facebook