Gradients - Geneva Area City Schools
Download
Report
Transcript Gradients - Geneva Area City Schools
Gradients
What are Gradients?
Gradients are graphics files that gradually
blend from one shade of color to another.
By using gradients as background images, we
can make our web pages look more modern
and stylish.
There is no need to use a large image when
building a gradient effect on our page. We
take advantage of the background-repeat
property in CSS.
How Gradients Work:
200 pixels high
10 pixels wide
By repeating the graphic
horizontally, we can fill a
much larger area with the
gradient effect.
To make web pages load
faster, most web
designers make their
gradients just 1 pixel wide.
Gradient Example:
<head>
<style type="text/css" media="all">
.header {
width:800px;
height:200px;
background-image:url('gradient.jpg');
background-repeat:repeat-x;
}
h1 {
text-align:center;
color:white;
}
</style>
</head>
<body>
<div class="header">
<h1>Gradient Example</h1>
</div>
</body>
We can use horizontal
gradients to style our pages
also.
Many XHTML elements can use
gradients as their background
images: <body>, <div>,
<table>, <tr>, <td>, etc.
Gradient Example
Creating Gradients:
Gradient files are created using graphics applications
such as Adobe Photoshop.
They can also be created at no cost by using online
resources, such as tools.dynamicdrive.com/gradient/ :
Choose which type of gradient.
Choose dimensions of gradient.
Set the start and end colors.
Choose a file format.
See a preview of the gradient.