Thursday, October 4, 2012

CSS3 BG Patterns


Its time to say bye to bg images as html body background. CSS3 has super cool properties to create different types of creative bg patterns, absolutely image free.

We can achieve this by using CSS3 properties like gradient, transparent etc..

Here are few samples

1.   http://jsfiddle.net/XfsR6/

div{
background-size50px 50px;
background-color#c16height:500px;
background-image-webkit-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-moz-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-ms-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-o-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
}




2.    http://jsfiddle.net/ryy6c/1/

div{
    background-color#c16height:500px;
background-color#eee;
background-size60px 60px;
background-position030px 30px;
background-image-webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-imagelinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
-pie-backgroundlinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black60px,
                 linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black30px 30px 60px,
                 #eee;
behaviorurl(/PIE.htc);
}




3. http://jsfiddle.net/XfsR6/1/

div{
background-color#c16height:500px;
background-size50px 50px;
background-color#0ae;
background-image-webkit-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-moz-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-ms-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-o-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-imagelinear-gradient(rgba(255255255.250%transparent 50%transparent);
-pie-backgroundlinear-gradient(rgba(255255255.250%transparent 50%transparent50px #0ae;
behaviorurl(/PIE.htc);
}




P.S - Dont forget to use CSS PIE method as mentioned in my previous post.
  

3 comments:

  1. I think this post has just made life alot easier for many budding website designers :) Also, your css pie method.... very handy indeed.. thanks for taking the time to post these, I'm sure it will be appreciated by others as it is my me! :)

    ReplyDelete
  2. very cool .I like the way it was presented:)

    But Is there anyway to create a background using CSS3 properties like gradient, transparent etc.. and It should apply to all the browsers , with out rewriting the same code, each for mozilla , firefox , chrome..etc.,

    ReplyDelete