PROWAREtech

articles » current » css » tutorial » page-11

Cascading Style Sheets: Tutorial - Page 11

Linear Gradients, Radial Gradients, Repeating Radial Gradients, Images.

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;
}

Document Heading

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

Document Heading

#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;
}

Document Heading

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;
}

Document Heading

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

Document Heading

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;
}

Document Heading

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;
}

Document Heading

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.

<<<[Page 11 of 15]>>>

PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE