19-11-2015, 14:53
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.
Kullanım:
Resme bulanıklık vermeyi içeren bir örnek:
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>