Click and drag to scroll left and right to view all 6 figures.
<!-- figure 18.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
padding: 50px;
font-size: 60px;
text-align: center;
color: darkorange;
animation-name: zooming;
animation-duration: 1.5s;
animation-delay: 1s;
animation-fill-mode: both;
animation-iteration-count: 3;
}
@keyframes zooming {
0% { transform: scale(0.1); }
50% { transform: scale(1.0) roatateZ(45deg); }
100% { transform: scale(2, 0); }
}
</style>
</head>
<body>
<div>Zooming in</div>
</body>
</html>
<!-- figure 18.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.ball {
height: 200px;
width: 200px;
background-color: orange;
border-radius: 100%;
animation: move 10s ease-in infinite alternate, pulse 1s linear
infinite alternate;
}
@keyframes move {
0% { transform: translate(0, 0); }
100% { transform: translate(600px, 0); }
}
@keyframes pulse {
0% { transform: translate(orange); }
100% { transform: translate(red); }
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
<!-- figure 18.9 & figure 18.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#window {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
display: none;
}
.box {
width: 300px;
height: 300px;
padding: 15px 20px 0 20px;
position: relative;
top: 25%;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
background-color: white;
text-align: center;
border: 1px solid black;
box-shadow: inset 0 0 1em 0.5em blue, 0 0 1em 0.5em orange;
animation: move 0.5s;
}
@keyframes move {
0% { transform: translate(-500px, 0); }
100% { transform: translate(0px, 0); }
}
.close {
text-decoration: none;
font-size: 22px;
font-weight: bold;
color: white;
background-color: orange;
border: 1px solid black;
border-radius: 50%;
width: 36px; height: 2px;
padding: 7px 1px 30px 2px;
position: absolute;
top: -16px;
left: 317px;
}
.close:hover { color: black; cursor: pointer; }
#window:target { display: block; }
</style>
</head>
<body>
<h2>Lightbox with :target</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu ut nunc cursus
rutrum sit amet id eros. Nunc iaculis risus lacus, nec malesuada sapien placerat sed.
Maecenas elit urna, euismod at ipsum ut, sagittis fermentum elit. Donec blandit mi
mauris, at iaculis diam gravida sit amet. Nulla vestibulum pulvinar arcu hendrerit
molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sit amet
magna consectetur, sagittis purus id, tincidunt velit. Donec sed nunc vel metus
consectetur vulputate. Duis semper lacinia posuere. Ut vel tristique mi. Nullam tempor
erat ac vulputate sagittis. Etiam in libero vehicula, venenatis mauris non, faucibus
enim. </p>
<p class="link"><a href="#window">Click to see a lightbox</a></p>
<p>Ut non risus vel ex tincidunt lobortis ut auctor diam. Vestibulum id leo venenatis
nisi posuere bibendum. Nulla tempor eget erat a volutpat. Maecenas at mollis neque, et
ornare risus. Nam sed orci rhoncus, posuere erat in, venenatis nibh. Sed rhoncus elit
et imperdiet semper. Integer massa eros, scelerisque ac arcu et, rhoncus blandit
metus. Nam sit amet dignissim magna. Suspendisse rhoncus porttitor erat in efficitur.
Vestibulum eget ligula sodales eros porta euismod. Curabitur suscipit nulla vitae nisi
volutpat, non sagittis justo sagittis. Nullam et accumsan enim, at aliquet massa. In
nec porttitor massa.</p>
<p>Sed at enim erat. Nulla placerat odio vel finibus pulvinar. In varius, nulla vitae
euismod pharetra, justo ipsum mattis felis, cursus imperdiet dolor quam a arcu. Ut
feugiat varius nunc, nec aliquet nunc porta id. Curabitur id rhoncus lectus,
viverra auctor tellus. In hac habitasse platea dictumst. Aenean sollicitudin augue
sed aliquam feugiat. In dolor justo, blandit id ultricies ac, finibus a diam.</p>
<p>Morbi eget dapibus erat, id pharetra purus. Quisque cursus sed metus ac hendrerit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vitae pretium urna, nec rutrum nulla. Phasellus non sollicitudin elit.
Curabitur id varius felis, vitae vulputate justo. Praesent eget ex non lacus vulputate
sollicitudin. Curabitur quis orci tincidunt, mollis diam et, ullamcorper nisl. Ut
dictum magna at sapien gravida, id egestas est bibendum.</p>
<div id="window">
<div class="box">
<a href="#" class="close">X</a>
<p>This is a basic example of a lightbox or modal window.</p>
<p>This box can contain any media object type, such as image or video.</p>
<p>(Clicking the X closes it.)</p>
</div>
</div>
</body>
</html>
<!-- figure 18.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: ornage;
transition: width 0.5s ease-out, height 0.5s ease-out;
}
div:hover {
width: 150px;
height: 150px;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!-- figure 18.14 & figure 18.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
margin: 500px;
background-color: grey;
border: 2px solid black;
border-radius: 20px;
perspective: 500px;
}
#banner {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
border: 2px solid black;
border-radius: 20px;
animation-name: rotation;
animation-timing-function: linear;
animation-duration: 6s;
animation-iteration-count: infinite;
}
p {
font: bold 32px Arial, sans-serif;
text-align: center;
margin: 75px 0px;
}
@keyframes rotation {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div id="container">
<div id="banner"><p>Stop it!</p></div>
</div>
</body>
</html>
<!-- figure 18.17 & figure 18.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#carousel img { position: absolute; border: 1px solid lightgrey;
background-color: rgba(255,255,255,0.7); width: 213px; height: 160px; }
#image1 { transform: rotateY(0deg) translateX(180px); padding: 0 0 0 147px; }
#image2 { transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px; }
#image3 { transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 147px; }
#image4 { transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px; }
#image5 { transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 147px; }
#wrapper { perspective: 1200px; padding: 300px; height: 180px; }
#carousel {
animation-name: carousel;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-style: preserve-3d;
transform-origin: 180px 0 0;
}
@keyframes carousel {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img id="image1" src="images/beach.jpg">
<img id="image2" src="images/tunnel.jpg">
<img id="image3" src="images/sunrise.jpg">
<img id="image4" src="images/yacht.jpg">
<img id="image5" src="images/south.jpg">
</div>
</div>
</body>
</html>