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

  • 5 Ekim 2013 - Cumartesi
  • ADMIN

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

Yazı hakkında görüşlerinizi belirtmek istermisiniz?