CSS3 blue background pattern


Today I've launched tFormer.js plugin. One of the followers was impressed by CSS3 blue background on a documentation pages. So I decided to add that background to my lab.

Actually I've 'steal' this piece of code from @LeaVerou project (css3patterns) and edit it a little (make it a little bit clearly).




CSS

.bg_container {
    border-radius: 10px;
    height: 230px;
    background-color: #4e9ad5;
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: 15px 15px;
    background-image: linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), 
                      linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -webkit-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -webkit-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), 
                      -webkit-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -moz-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -moz-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), 
                      -moz-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -ms-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -ms-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), 
                      -ms-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-image: -o-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -o-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px), 
                      -o-linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), 
                      -o-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
}

blog comments powered by Disqus