Click and drag to scroll left and right to view all 11 figures.
<!-- figure 16.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
a.button {
background-image: url("images/buttons.png");
display: inline-block;
width: 220px;
}
a#register {
background-position: 0px 0px;
height: 60px;
}
a#register:hover {
background-position: 0px -60px;
height: 60px;
}
a#register:active {
background-position: 0px -120px;
height: 50px;
}
</style>
</head>
<body>
<a class="button" id="register"></a>
</body>
</html>
<!-- figure 16.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.part1 {
background-image: url("images/buttons.png");
width: 220px;
height: 60px;
background-position: 0 0;
}
#register:hover { background-position: 0 -60px; height: 60px; }
#register:active { background-position: 0 -120px; height: 50px; }
</style>
</head>
<body>
<form>
<input type="image" name="regButton" id="register" alt="submit form"
src="images/transparent_image.png">
</form>
</body>
</html>
<!-- figure 16.6 & figure 16.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 50px; width: 600px; color: white; font-size: 24px; padding: 10px; }
#grad1 { background: linear-gradient(orange, black); }
#grad2 { background: linear-gradient(to left, #ffa500, black); }
#grad3 { background: linear-gradient( to right, rgb(255,165,0), rgba(0,0, 0,0.1)); }
#grad4 { background: linear-gradient(to right, hsl(39,100%,50%), hsla(0,0%, 0%,0.1)
); }
#grad5 { background: linear-gradient(45deg, orange 50%, black); }
#grad6 { background: linear-gradient(to right, red, transparent 70%, blue); }
#grad7 { background: linear-gradient(to right, grey 15%, orange 15%, orange 85%,
grey 85%); }
#grad8 { background: linear-gradient(to top right, red, orange, yellow, green,
blue, indigo, violet); }
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1">(orange, black)</div><br>
<div id="grad2">(to left, orange, black)</div><br>
<div id="grad3">(to right, #ffa500, rgb(0,0,0))</div><br>
<div id="grad4">(to right, orange, rgba(0,0,0,0.1))</div><br>
<div id="grad5">(45deg, orange 50%, black)</div><br>
<div id="grad6">( to right, red, transparent 70%, blue)</div><br>
<div id="grad7">(to right, grey 15%, orange 15%, orange 85%, grey 85%)</div><br>
<div id="grad8">(to top right, red, orange, yellow, green, blue, indigo, violet)</div>
</body>
</html>
<!-- figure 16.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 50px; width: 600px; padding: 10px; font-size: 24px; }
span { background-color: grey; color: white; }
#grad1 { background: repeating-linear-gradient(180deg, grey, grey 7%, black 15%); }
#grad2 { background: repeating-linear-gradient(45deg, black 20px, white 50px); }
#grad3 { background: repeating-linear-gradient(-45deg, transparent, black 20px,
white 50px); }
</style>
</head>
<body>
<h1>Repeating linear gradient</h1>
<div id="grad1"><span>(180deg, grey, grey 7%, black 15%)</span></div><br>
<div id="grad2"><span>(45deg, black 20px, white 50px)</span></div><br>
<div id="grad3"><span>(-45deg, transparent, black 20px, white 50px)</span></div>
</body>
</html>
<!-- figure 16.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 70px; width: 650px; black; text-align: center; font-size: 24px; }
#gradient1 { background: radial-gradient(circle farthest-corner at 100% 0%, yellow,
darkorange 20%); }
#gradient2 { background: radial-gradient(circle farthest-side at 50% 50%, yellow,
darkorange 20%); }
#gradient3 { background: radial-gradient(circle closest-side at 50% 50%, yellow,
darkorange 20%); }
#gradient4 { background: radial-gradient(ellipse farthest-corner at 50% 50%,
yellow, darkorange 20%); }
#gradient5 { background: radial-gradient(circle farthest-side at top right, yellow,
darkorange 20%); }
#gradient6 { background: radial-gradient(circle farthest-side at 50% 50%, yellow,
darkorange, blue, grey); }
#gradient7 { background: radial-gradient(circle closest-side at 50% 50%, yellow,
darkorange, blue, grey); }
#gradient8 { background: radial-gradient(35px 35px at 50% 50%, yellow, darkorange,
blue, violet); }
</style>
</head>
<body>
<h1>Radial Gradients</h1>
<div id="gradient1">(circle farthest-corner at 100% 0%, yellow,
darkorange 20%)</div><br>
<div id="gradient2">(circle farthest-side at 50% 50%, yellow,
darkorange 20%)</div><br>
<div id="gradient3">(circle closest-side at 50% 50%, yellow, darkorange 20%)</div><br>
<div id="gradient4">(ellipse farthest-corner at 50% 50%, yellow,
darkorange 20%)</div><br>
<div id="gradient5">(circle farthest-side at top right, yellow 20%,
darkorange 20%)</div><br>
<div id="gradient6">(circle farthest-side at 50% 50%, yellow, darkorange, blue,
grey)</div><br>
<div id="gradient7">(circle closest-side at 50% 50%, yellow, darkorange, blue,
grey)</div><br>
<div id="gradient8">(35px 35px at 50% 50%, yellow, darkorange, blue, violet)</div>
</body>
</html>
<!-- figure 16.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#gradient {
width: 800px; height: 400px; text-align: center; font-size: 24px;
background: radial-gradient(ellipse farthest-corner at 100% 0%, yellow 5%,
darkorange);
}
</style>
</head>
<body>
<h1>Radial gradient as background</h1>
<div id="gradient">
(ellipse farthest-corner at 100% 0%, yellow 5%, darkorange)
</div>
</body>
</html>
<!-- figure 16.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#outerbox {
width: 1000px; border: 1px solid pink; background-color: rgba(255,192,206,0.3);
}
#gradient {
height: 500px;
width: 250px;
color: black;
text-align: center;
font-size: 24px;
background: repeating-radial-gradient(circle farthest-corner at 100% 0%,
transparent, rgba(255,192,203,0.4) 40px, rgba(255,255,255,0.2) 50px);
}
</style>
</head>
<body>
<h1>Repeating radial gradient</h1>
<div id="outerbox">
<div id="gradient">(circle farthest-corner at 100% 0%, transparent,
rgba(255,192,203,0.3) 40px, rgba(255,255,255,0.2) 50px)
</div>
</div>
</body>
</html>
<!-- figure 16.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
-webkit-filter: hue-rotate(90deg) contrast(190%);
filter: hue-rotate(90deg) contrast(190%);
}
</style>
</head>
<body>
<h1>Filter</h1>
<img src="images/yacht.jpg" alt="a yacht race">
</body>
</html>
<!-- figure 16.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
width: 640px; height: 640px;
background-size: 640px 640px;
background-repeat: no-repeat;
background-image: linear-gradient(green, transparent),
linear-gradient(90deg, skyblue, transparent),
linear-gradient(-90deg, red, transparent),
url("images/rose_transparent_full.png"),
url("images/grey_wall.png"),
url("images/flora.png");
background-blend-mode: overlay, multiply, screen, difference;
}
</style>
</head>
<body>
<h1>Filter</h1>
<div></div>
</body>
</html>
<!-- figure 16.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
background-image: url("images/yacht_400.png");
background-repeat: no-repeat;
text-align: center;
width: 400px; height: 268px;
}
img { mix-blend-mode: overlay; }
</style>
</head>
<body>
<img src="images/rose_transparent_full.png">
</body>
</html>
<!-- figure 16.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { position: absolute; left: 0; top: 0; }
img { mix-blend-mode: difference; }
.three { isolation: isolate; }
</style>
</head>
<body>
<div class="one"><img src="images/yacht_400.png"></div>
<div class="two"><img src="images/beach_400.png"></div>
<div class="three"><img src="images/rose_transparent_full.png"></div>
</body>
</html>