2 Ekim 2013 css3-markup

Geliştiriciler için 10 Hızlı CSS3 Kod Parçacıkları

Web tasarımda en önemli dillerden birisi şüphesiz ki CSS3 oluverdi. Eğer CSS3 konusunda acemi iseniz şuan tam yerindesiniz ! Sizlere bu makalemizde “Geliştiriciler için 10 Hızlı CSS3 Kod Parçacıkları” paylaşacağız. Burada vereceğimiz CSS3 kodları ile birlikte sitenizi daha iyi noktalara getirebileceksiniz.

Bugünün sizler için gerçekten harika bir liste hazırladık. İsterseniz bu harika listemize hemen geçiş yapalım.

css3-markup

Bulanık Yazı

.blur{  
color: transparent;  
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);  
} 


Image Preloader

Resimleriniz bazen geç açılabilir. Bunun için düşünülmüş bir CSS3 kod parçacığımız :).

body:before {

    content: url(images/hover3.gif);

    display:none;

}

Gradient Yazı

Bu webkit yardımıyla günümüzde artık Gradient Yazı elde edebilirsiniz.

h1 { 
  font-size: 20px; 
  background:-webkit-lineer-gradyan (# eee, # 333); 
  -webkit-background-klip: Metin, 
  -webkit-text-fill-color: transparent; 
}

Resim Saydamlık

IE9, Firefox, Chrome, Opera ve Safari için uyumludur. 1.0 – Saydamlık özelliği 0.0 arasında bir değer alabilir. Daha düşük bir değer daha saydam yapar. IE8 ve daha önceki sürümler için filtre kullanın: alpha (opacity = x). 100 – x 0 arasında bir değer alabilir. Daha düşük bir değer daha saydam yapar.

img { 
donukluk: 0.4; 
filtresi: alpha (opacity = 40); IE8 için / * ve * / daha önce 
}

Çoklu Arka

CSS3 sayesinde birden fazla arka plan kullanmak isteyenlerin bir numaralı minik kod parçacığı :).

#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;
}

Metin Gölgesi

CSS3 ile metin gölgesi efekti vermeniz mümkün :). Tasarımlarınızı daha vazgeçilmez yapmaya ne dersiniz ?

text-shadow: 2px 2px 2px # 000;

Bağlantı Sözde Sınıflar

Bağlantılar CSS destekleyen tarayıcı farklı şekillerde görüntülenebilir:

a:link {color: blue;} /* unvisited link */
a:visited {color: purple;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: yellow;} /* selected link */

Yuvarlak Köşeler

CSS3 ile birlikte gelen özelliklerden birisi buda. Siteyi optimize etme konusunda yararı oluyor.

#roundedcorners {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

@ Font-face kullanımı

Web sitelerde en büyük sorunlardan birisi de fontlardır. Bu sorunu artık @font face kullanımı ile aşmanızı tavsiye ediyoruz.

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

IE kaydırma textarea Kaldır

Internet Explorer taşan metin alanları beni deli etmeye başladı ! Buna çözüm olarak ise bu kod parçacığını kullanmanızı tavsiye ederiz :).

textarea {

overflow:hidden;

}

Geliştiriciler için 10 Hızlı CSS3 Kod Parçacıkları” için bir yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu sitenin sunucu alt yapısı Netiyi tarafından karşılanmaktadır. Kaçak bahis - Betkem - Gastecikiz