Cascading Style Sheets: Tutorial - Page 11

Linear Gradients

Linear gradients are super easy. The property that controls this is background or background-image and the value is the linear-gradient() function. For example:

#header {
	background-color: #369;
	background-image: linear-gradient(to bottom, #ddd, #369);
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	color: #fff;
}

#header {
	background-color: #369;
	background-image: linear-gradient(to top, #ddd, #369);
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	color: #fff;
}

#header {
	background-color: #ffd800;
	background-image: linear-gradient(145deg, rgba(0,0,0,0), rgba(0,0,0,0.5));
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	width: 300px;
	color: #fff;
}

Radial Gradients

Radial gradients are just as easy. The property that controls this is background or background-image and the value is the radial-gradient() function. For example:

#header {
	background-color: #369;
	background-image: radial-gradient(ellipse, blue, yellow);
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	color: #fff;
}

#header {
	background-color: #369;
	background-image: radial-gradient(circle, blue, yellow);
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	color: #fff;
}

Supply a percentage to tell the browser how fast to blend the colors together. For example, here, blue starts and then slowly blends to yellow then the rest of the 100% (15%) is for red, green and black to blend.

#header {
	background-color: #369;
	background-image: radial-gradient(circle, blue 10%, yellow 75%, red, green, black);
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	color: #fff;
}

Repeating Radial Gradients

Repeating radial gradients are also a snap in CSS3. Simply use the repeating-radial-gradient function value for the background-image property.

#header {
	background-image: repeating-radial-gradient(circle, yellow, blue 5%);
	color: red;
}

Images

Place an image in the content of the document using the HTML <img> tag. To have text and other page elements wrap around an image specify a float value of either left or right. To add space between the image and its document content, use the margin property. Finally, specify a border using the border property.

Comment