Hemen her tasarımda kullanılan detaylar için küçük CSS ipuçları…
Metinlere gölge vermek
Özellikle yakın renklerdeki arka plan ve metinler için kullanıldığında işimize çok yarayacak bir özellik.
text-shadow: 2px 2px 2px #000;
CSS ile metinlere blur efekti vermek
Bu basit CSS kodu ile metinlere transparanlık ve gölge vererek blurlanmış şekilde görünmelerini sağlıyoruz.
.blur{
color: transparent;
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);
}
Site açılışına yükleniyor ibaresi eklemek
Bu CSS kodunu body etiketine ekleyerek site açılırken yüklendiğini belli eden gif’ler ekleyebiliriz.
body:before {
content: url(images/hover3.gif);
display:none;
}
Gradient metinler oluşturmak
HTML5 ile gelen yeniliklerden bir tanesi de metinlere geçişli renk efekti uygulamak, aşağıdaki kod parçası ile yapabiliyoruz.
h1 {
font-size: 20px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Imajlara opacity vermek
Güncel tüm browserlarda çalışan bu özelliği sadece yoğun kullanımından ötürü ie8 ve öncesine göre ayrı bir kod yazarak düzenleyebiliyoruz.
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Birden çok arka plan kullanmak
Ara yüz kodlamasında işimizi oldukça kolaylaştıran bu özellik ile birden çok arka plan atıyoruz, arka planların konumlarını da belirleyerek iç içe div yazmaktan kurtuluyoruz.
#Multiple-Backgrounds {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}
Internet Explorer’da kullanılan textarea’larda ki scrool’ları silmek
IE her zamanki gibi ek kodlara ihtiyaç duymakta.
textarea {
overflow:hidden;
}
Bizi Facebook üzerinden takip ederek güncellemelerden haberdar olabilirsiniz…
Facebook sayfamız: https://www.facebook.com/renklisayfatasarim
