Gradient Patterns using CSS 3 with out Image

Tutorials Shared by the Internet Community

Advertisements


Synopsis

In this tutorials we are going to see how to create a Gradient Patterns for webpages with out using images. This tutorial has been coded with HTML and

Statistics

  • Total Hits - 26937

  • Total Votes - 112 votes

  • Vote Up - 49 votes

  • Vote Down - 63 votes

  • Domain - www.tutorialsfor.com

  • Category - CSS/Basic

  • Submitted By - Vinoth Kumar

  • Submitted on - 2013-01-09 06:17:07

Description

Pattern 1

.horizontalstrips{ width:200px; height:200px;float:left;
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
} ...


Site  |   Broken  |   Tweet  |   Facebook  |     |   Save  |   Liked  |   Down

Advertisements