May 29, 2012

CSS3 Gradient Textures

A snippet share just to show the power of CSS3 gradient, I just follow some free PSD's texture and try it to code in CSS3. So its time to share with you all.

CSS3 Gradient Texture

[css]
/* Gradient */

#texture1{
background-image: -moz-linear-gradient(90deg, #9fc9d7, #9fc9d7 2px, #a3dcf0 2px, #a3dcf0 4px, #9fc9d7 4px);
background-image: -webkit-linear-gradient(90deg, #9fc9d7, #9fc9d7 2px, #a3dcf0 2px, #a3dcf0 4px, #9fc9d7 4px);
background-repeat: repeat;
background-size: 2px 4px;
}

#texture2{
background-image: -moz-linear-gradient(0deg, #202125, #202125 2px, #292a2e 2px, #292a2e 4px, #202125 4px);
background-image: -webkit-linear-gradient(0deg, #202125, #202125 2px, #292a2e 2px, #292a2e 4px, #202125 4px);
background-repeat: repeat;
background-size: 5px 10px;
}

#texture3{
background-image: -moz-linear-gradient(90deg, #9dd9da, #9dd9da 15px, #a6dcde 15px, #a6dcde 30px, #9dd9da 30px);
background-image: -webkit-linear-gradient(90deg, #9dd9da, #9dd9da 15px, #a6dcde 15px, #a6dcde 30px, #9dd9da 30px);
background-repeat: repeat;
background-size: 15px 30px;
}

#texture4{
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25)), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25));
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25)), -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25));
background-position: 0 0pt, 2px 2px;
background-size: 4px 4px;
background-color: #202125;
}
[/css]

 

4 comments :

  1. BlackDante29/5/12 5:06 AM

    You don't support prefix right. This code doesn't work in Opera.

    ReplyDelete
  2. I coded this snippet for major browsers moz and webkit, if you want for opera just replace -moz- with -o-

    ReplyDelete
  3. BlackDante29/5/12 8:00 PM

    Yes, ok. But in this way you teach bad habits.

    ReplyDelete
  4. Rex Jonatthan29/5/12 10:10 PM

    Nice snippet share @nirajmchauhan:disqus  didn't knew that with CSS3 could do this, @dd342292ecf2e5dfd051fe72fb57752d:disqus he is just sharing a snippet not a tutorial so respect what ever he is giving to you rather then complaining for opera. You can use prefixr.com for making it compatible for all browsers.

    ReplyDelete