Assignments Of Class 27: CSS Filters
Assignment 1: Apply a Blur Effect to an Image
Objective:
Use the blur() filter to apply a blur effect to an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: blur(5px); /* Apply a 5px blur effect */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Blur Effect">
</body>
</html>
Explanation:
- The blur(5px) filter is applied to the image, causing it to appear blurred with a radius of 5px.
Output:
- The image will appear with a soft blur, making it look out of focus.
Assignment 2: Increase Brightness of an Image
Objective:
Use the brightness() filter to make an image brighter.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brightness Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: brightness(1.5); /* Make the image 1.5 times brighter */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Brightness Effect">
</body>
</html>
Explanation:
- The brightness(1.5) filter makes the image 1.5 times brighter than its original state.
Output:
- The image will be visually lighter, making it appear more vibrant and bright.
Assignment 3: Apply Contrast to an Image
Objective:
Use the contrast() filter to adjust the contrast of an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contrast Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: contrast(1.5); /* Increase the contrast of the image */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Contrast Effect">
</body>
</html>
Explanation:
- The contrast(1.5) filter increases the contrast by 1.5 times, making the dark areas darker and the light areas lighter.
Output:
- The image will have more distinct areas of light and shadow.
Assignment 4: Apply Grayscale to an Image
Objective:
Convert an image to grayscale using the grayscale() filter.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grayscale Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: grayscale(1); /* Convert the image to grayscale */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Grayscale Effect">
</body>
</html>
Explanation:
- The grayscale(1) filter converts the image to grayscale (black and white).
Output:
- The image will appear black and white.
Assignment 5: Apply Sepia Tone to an Image
Objective:
Use the sepia() filter to apply a sepia effect to an image, giving it an old-time photograph look.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sepia Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: sepia(1); /* Apply sepia tone to the image */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Sepia Effect">
</body>
</html>
Explanation:
- The sepia(1) filter gives the image a warm brown tone, making it look like an old photograph.
Output:
- The image will have a vintage look with a reddish-brown hue.
Assignment 6: Apply Multiple Filters to an Image
Objective:
Use multiple filters to combine effects such as blur, brightness, and contrast.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Filters</title>
<style>
img {
width: 100%;
height: auto;
filter: blur(4px) brightness(1.5) contrast(1.2); /* Apply blur, brightness, and contrast */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Multiple Filters">
</body>
</html>
Explanation:
- The blur(4px), brightness(1.5), and contrast(1.2) filters are applied in sequence.
Output:
- The image will have a combination of blur, increased brightness, and adjusted contrast.
Assignment 7: Hover Effects with Filters
Objective:
Apply a filter on hover to dynamically change the appearance of an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effects with Filters</title>
<style>
img {
width: 100%;
height: auto;
transition: filter 0.3s ease;
}
img:hover {
filter: sepia(1); /* Apply sepia filter on hover */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Hover Effect">
</body>
</html>
Explanation:
- The image has a sepia(1) filter applied when hovered over.
- The transition: filter 0.3s ease; ensures a smooth transition of the filter effect.
Output:
- The image will change to sepia when the user hovers over it.
Assignment 8: Invert Colors of an Image
Objective:
Use the invert() filter to invert the colors of an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invert Colors</title>
<style>
img {
width: 100%;
height: auto;
filter: invert(1); /* Invert the colors of the image */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Inverted Colors">
</body>
</html>
Explanation:
- The invert(1) filter inverts the colors of the image, creating a negative effect.
Output:
- The image colors will be inverted, similar to a photographic negative.
Assignment 9: Apply Hue-Rotation to an Image
Objective:
Use the hue-rotate() filter to rotate the hues of an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hue Rotation</title>
<style>
img {
width: 100%;
height: auto;
filter: hue-rotate(90deg); /* Rotate the hues by 90 degrees */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Hue Rotation">
</body>
</html>
Explanation:
- The hue-rotate(90deg) filter rotates the hues of the image by 90 degrees, changing the colors.
Output:
- The colors of the image will be shifted, changing its overall appearance.
Assignment 10: Saturation Effect on Image
Objective:
Use the saturate() filter to increase the saturation of an image.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saturation Effect</title>
<style>
img {
width: 100%;
height: auto;
filter: saturate(2); /* Increase saturation to 2x */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image with Saturation Effect">
</body>
</html>
Explanation:
- The saturate(2) filter increases the saturation of the image by 2 times, making the colors more vivid.
Output:
- The image will have more vibrant and intense colors.
Conclusion:
Each of these assignments demonstrates different CSS filter effects that can be applied to images. By understanding how filters like blur(), brightness(), contrast(), grayscale(), and others work, you can creatively manipulate images and other elements on a webpage.
No comments:
Post a Comment