Images play a large role on the Web. You\'ve heard the old adage that a picture
ID: 3888222 • Letter: I
Question
Images play a large role on the Web. You've heard the old adage that a picture is worth a thousand words, right? Imagine surfing the Internet without any graphics. In the early days, that's how it was done. It was all bulletin board sites, where everything was just plain text! Today, however, graphics don't necessarily need to be built with a graphic program; CSS3 will enable us to create graphics concurrently using new CSS properties and rules (we may need a little JavaScript). However, as experienced website users, we also want speed. Graphics are the main culprits that cause web pages to load slowly in our browsers. The quantity and the file sizes of images have a huge impact. The value of including an image must be balanced against the added download time. Given a Web page that requires images and advanced styles, create and edit graphics and incorporate them into the page. Enablers Demonstrate basic image editing techniques.Resize images (thumbnails)Crop imagesRed-eye reductionColor enhancement Demonstrate an understanding of advanced-level CSS styles, such asrounded corners;box shadow;text shadow;transform, rotate, scale, skew;transitions; andanimations. Demonstrate an understanding of the differences between using images versus CSS to achieve a desired effect. Demonstrate an understanding of intellectual property when it comes to images and photos. Given a project, create a website that contains text, links, images, and any other content necessary to complete the website using HTML and external CSS. Enablers Gather user requirements, such as audience, goals, and objectives, to create a style definition, and describe how this definition is used in website design and maintenance. Using knowledge gathered in COs 1 through 8, build a website. Evaluate your project to ensure that it meets the accessibility standards. Demonstrate an understanding of local and remote sites. Upload local website files to a remote web server.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Advanced Demonstration</title>
<style media="screen">
.for-rounded {
border-radius: 10px;
}
.for-box-shadow {
box-shadow: 10px 10px 5px #888;
}
.for-text-shadow {
text-shadow: 10px 10px #888;
}
div.for-trans {
width: 100px;
height: 100px;
background: red;
transition: 2s;
}
.for-trans:hover {
width: 300px;
background-color: yellow;
border: 1px solid black;
}
.for-rotate:hover {
transform: rotate(70deg) scale(2, 3);
transition: 2s;
}
</style>
</head>
<body>
<p>
Demostration Rounded corners, Box shadow, Text shadow, Transform, Rotate,
Scale, Skew, Transitions
</p>
<h3>Rounded Corners</h3>
<img src="http://via.placeholder.com/350x150" alt="placeholder image"
class="for-rounded">
<h3>Box Shadow</h3>
<img src="http://via.placeholder.com/350x150" alt="placeholder image"
class="for-box-shadow">
<h3>Text Shadow</h3>
<p class="for-text-shadow">Something here!!</p>
<h3>Transform</h3>
<div class="for-trans">something here</div>
<h3>Rotate & Scale</h3>
<img src="http://via.placeholder.com/350x150" alt="placeholder image"
class="for-rotate">
</body>
</html>