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