Cara Membuat CSS Gradient Text Cross Browser Without Background Images

Ternyata membuat gradient text itu tanpa image itu tidak susah, kalau tau caranya :d.
Berikut ini bagaimana cara membuat gradient text warna cross browser hanya menggunakan CSS without background images. Dalam hal ini pseudo class :before digunakan untuk menerapkan overlay dengan gradient opacity. Satu-satunya kelemahannya adalas h warna overlay harus sama dengan warna background yang di gunakan.
Satu-satunya kelemahannya adalah warna overlay harus sama dengan warna background yang di gunakan.
HTML

TYPOGRAPHY

TYPOGRAPHY

TYPOGRAPHY

KODE CSS

h4.gradient {
  text-align:center;
  font-family:'Arbutus', cursive; 
  font-weight: 700; /* Disesuaikan besaran hurufnya */
  font-size:100px;   
  padding:0 10px; 
  margin:0; 
  position:relative; 
  float:left;  
  width:100%;
  text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
h4.gradient:before {
  content:""; 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index: 2;
}
h4.satu:before{
  background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
}
h4.dua:before{
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
}
h4.tiga:before{
  background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
}
h4.satu{
  background:white;
  color:black;
}
h4.dua{
  background:black;
  color:red;
}
h4.tiga{
  background:white;
  color:#132A60;
}

Sumber : zifana.com

Judul : Cara Membuat CSS Gradient Text Cross Browser Without Background Images
Peringkat : 7 / 10 . 264 voting. 197 pengguna.
URL : http://seotipsku.blogspot.com/2013/12/cara-membuat-css-gradient-text-cross.html
Ditulis Oleh : EraVisi