Wordpress Wordpress kodları

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

css3-markup
4

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;

}
Oğuzhan isa
Adım Oğuzhan İsa. Bir başlangıç gerekiyor değil mi ? Peki ama kim için ? Neden bu kadar emek ? Neden bu kadar çaba diyorsunuz değil mi ? Demeyin diye bunları yazıyorum aslında. Daha önce bir çok siteye Freelance SEO hizmeti verdim. Profesyonellik katmak amacıyla hatta kendi şirketim olan Exclusive Creative’yi kurmuştum. Sonrasında takım ile ilgili problem olduğu için şirketi kapattım. Kıbrıs’ta Dijital Pazarlama Uzmanı olarak çalıştıktan sonra Türkiye’ye dönüş yapıp Ukrayna’da okumaya karar vermiştim. Teocw’ye ortaklık yaptıktan sonra bu fikrimi daha detaylıca düşünme fırsatım oldu ve gitmemeye karar verdim. Türkiye’de kalıp Clicksus olarak sponsor olduğumuz Egitio.com projesine destek vermek istiyorum çünkü. İnsanlara Gerçek bilgiyi öğretmek istiyorum. Gerçeklere ulaşıp her algoritmik değişimden sonra sitelerimiz yandı bitti kül oldu demesinler istiyorum. Ben Oğuz. Clicksus’da Kıdemli SEO Uzmanı adı altında 2017 yılında damga vuran değişiklikler için çalışıyorum. Her zaman daha iyisini yapabilecek kapasiteye sahip , hızlı öğrenen , zeki ve biraz egolu birisiyim. Neysem oyumdur her zaman aynıydım ve aynı kalmak istiyorum. En az 3 Yıl daha Türkiye’deyim. Bakalım neleri değiştirebileceğiz ? Neler katabileceğiz ?
You may also like
wordpress
En popüler WordPress eklentileri
WordPress Kategori ID Öğrenme

Bir yorum yap!

Yorumunuz*

İsminiz*
Web siteniz