Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Bulanıklık Efekti
#1
Merhaba arkadaşlar,

Sizlerle, CSS ile bulanıklık efekti vermeye ilişkin ufak bir örnek paylaşmak istiyorum.
Bulanıklık efekti için filter: blur kullanmamız yeterli.

Kod:
<style>
.bulanik{
filter: blur(4px);
-webkit-filter: blur(4px);
}
</style>

Kullanım:
Kod:
<div class="bulanik" style="font-size:50px">
Turkishcode.com
</div>


Resme bulanıklık vermeyi içeren bir örnek:
Kod:
<!Doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Bulanıklık Efekti</title>
<style>
.bulanik{
filter: blur(4px);
-webkit-filter: blur(4px);
}

.bulanikImgKutu
{
border:1px solid #333;
width:200px;
height:75px;
padding-top:5px;
}

.bulanikImgKutu:hover img
{
filter: blur(5px);
-webkit-filter: blur(5px);
}

.bulanikImgKutu:hover > .Aciklama
{
visibility:visible;
}

.Aciklama {
position: absolute;
margin-top:20px;
margin-left:65px;
color:#0072C6;
font-weight:bold;
visibility:hidden;
z-index:999;
}
</style>
</head>
<body>
<center>
<div class="bulanik" style="font-size:50px">
Turkishcode.com
</div>
<br>
<div class="bulanikImgKutu">
<a href="http://www.turkishcode.com" class="Aciklama">TurkishCode</a>
<img src="http://turkishcode.com/tema/TCode/images/logo.png" />
</div>
</center>
</body>
</html>
Cevapla


Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi