CSS3 Tutorial: linear gradients

Lineair gradients

linear-gradient

Syntax: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) 
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
/*Examples:
Gradient on 45 deg axis starting with black and finishing with white */
background: linear-gradient( 45deg, black, white ); 

/* Gradient from the bottom right to the 
top left starting yellow and finishing green */
background: linear-gradient( to left top, yellow, green); 

/* Gradient  from  bottom to top, starting red, 
being green after 20% and finishing blue */ 
background: linear-gradient( 0deg, #f16529, #0f0 20%, #00f ); 

Browser support

Example1: Lineair and radial gradients in DOM-elements

The CSS

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 16, 2011 */
@font-face {
  font-family: 'VTCLettererProRegular';
  src: url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.eot');
  src: url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.woff') format('woff'),
  url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.ttf') format('truetype'),
  url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.svg#VTCLettererProRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
#linear_gradient_test1 {
  font-family: "VTCLettererProRegular", Verdana;
  float: left;
  width: 200px;
  height: 110px;
  margin:20px;
  background: linear-gradient(to left top, #fdd0ce, red);
  text-align: center;
  padding-top: 70px;
  font-size: 18px;
  color: #333;
}
#radial_gradient_test1 {
  font-family: "VTCLettererProRegular",Verdana;
  margin:20px 20px 20px 0;
  float: left;
  width: 200px;
  height: 110px;
  background: -webkit-radial-gradient(circle 100px at 100px 50%, #fdd0ce 0%, red 100%);
  background: radial-gradient(circle 100px at 100px 50%, #fdd0ce 0%, red 100%);
  text-align: center;
  padding-top: 70px;
  font-size: 18px;
  color: #333;
}

The HTML code

<!DOCTYPE html>
<html>
<head>
	<title>Kleurverloop (gradi&euml;nt)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
    <div id="linear_gradient_test1">I have a dream!</div>
    <div id="radial_gradient_test1">I have a gradient!</div>
</body>
</html>
kleurverloop (gradiënt)
Image 1. lineair and radial gradients with CSS3.

Check this examples in your browser

Example2: CSS3 buttons with lineair gradients

The CSS

/*  Buttons with lineair gradients */
  /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 16, 2011 */
  @font-face {
  font-family: 'NobileRegular';
  src: url('../fonts/nobile/regular/nobile-webfont.eot');
  src: url('../fonts/nobile/regular/nobile-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/nobile/regular/nobile-webfont.woff') format('woff'),
  url('../fonts/nobile/regular/nobile-webfont.ttf') format('truetype'),
  url('../fonts/nobile/regular/nobile-webfont.svg#NobileRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  }
div#buttons div{
  margin-bottom:20px;
  }
.button {
  display: inline-block;
  zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: "NobileRegular",Arial, Helvetica, sans-serif;
  font-size:13px;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em;
  border-radius: .5em;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2);
  } 
  
  .button:hover {
  text-decoration: none;
  } 
  
  .button:active {
  position: relative;
  top: 1px;
  } 
  
  .round {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  } 
  
  .smaller {
  font-size: 11px;
  padding: .4em 1.5em .42em;
  } 
  
  .smallest {
  font-size: 10px;
  padding: .0em 1em .30em;
  } 
  
  .orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: linear-gradient(to left top, #faa51a, #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
  } 
  
  .orange:hover {
  background: linear-gradient(to left top, #f88e11, #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
  } 
  
  .orange:active {
  color: #fcd3a5;
  background: linear-gradient(to left top, #f47a20, #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
  } 
  
  .white {
  color: #606060;
  border: solid 1px #b7b7b7;
  background: linear-gradient(to left top, #fff, #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  } 
  
  .white:hover {
  background: linear-gradient(to left top, #fff, #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
  } 
  
  .white:active {
  color: #999;
  background: linear-gradient(to left top, #ededed, #fff);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
  } 
  
  .black {
  color: #d7d7d7;
  border: solid 1px #333;
  background: linear-gradient(to left top, #666, #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
  } 
  
  .black:hover {
  background: linear-gradient(to left top, #444, #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
  } 
  
  .black:active {
  color: #666;
  background: linear-gradient(to left top, #000, #444);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
  } 

The HTML code

<!DOCTYPE html>
	<html>
	<head>
	<title>Buttons met CSS3 gradient effect</title>
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
	</head>
	<body>
	<div id="buttons">
        <div>
        <a href="#" class="button black">Verstuur</a>
        <a href="#" class="button black round">Verstuur</a>
        <a href="#" class="button black smaller">Verstuur</a>
        <a href="#" class="button black smallest">Verstuur</a>
        </div>
        <div>
        <a href="#" class="button orange">Verstuur</a> 
        <a href="#" class="button orange round">Verstuur</a> 
        <a href="#" class="button orange smaller">Verstuur</a> 
        <a href="#" class="button orange smallest">Verstuur</a> 
        </div>
        <div>
        <a href="#" class="button white">Verstuur</a> 
        <a href="#" class="button white round">Verstuur</a> 
        <a href="#" class="button white smaller">Verstuur</a> 
        <a href="#" class="button white smallest">Verstuur</a> 
        </div>
	</div>
	</body>
</html>
CSS3 Buttons met gradiënt stijl
Image 2. CSS3 buttons with lineair gradiënt.

Check this examples in your browser

Leave a comment