Web Geliştiriciler İçin CSS İpuçları

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