Lecture Notes Of Class 27: CSS Filters
Objective:
Learn how to apply CSS filters to elements, especially images, to create
visually appealing effects. Filters allow you to adjust the appearance of
elements like images and backgrounds by applying various graphical effects.
Introduction to CSS
Filters
CSS filters are used to
apply visual effects like blurring, adjusting brightness, or changing contrast
to elements on a webpage. They are commonly used with images, but can also be
applied to other elements, such as text or containers.
You can combine multiple
filters to create more complex effects. Filters are easy to apply using simple
CSS properties.
Filter Functions
The filter property in
CSS is used to apply visual effects to elements. Some of the most commonly used
filter functions are:
1. blur()
- The
blur() function applies a Gaussian blur effect to an element.
- The
argument specifies the radius of the blur, i.e., how much the element is
blurred.
- A
higher value results in a stronger blur.
Syntax:
css
CopyEdit
filter: blur(radius);
- Example:
css
CopyEdit
img {
filter: blur(5px);
}
This applies a blur
effect to the image with a radius of 5px.
2. brightness()
- The
brightness() function adjusts the brightness of an element.
- It
accepts values between 0 (black) and 1 (original brightness), with values
greater than 1 making the element brighter.
Syntax:
css
CopyEdit
filter: brightness(value);
- Example:
css
CopyEdit
img {
filter: brightness(1.5);
}
This makes the image 1.5
times brighter than its original state.
3. contrast()
- The
contrast() function adjusts the contrast of an element.
- It
also accepts values between 0 (no contrast) and 1 (original contrast), and
values greater than 1 will increase the contrast.
Syntax:
css
CopyEdit
filter: contrast(value);
- Example:
css
CopyEdit
img {
filter: contrast(1.5);
}
This increases the
contrast of the image by 1.5 times.
Combining Filters
You can combine multiple
filter functions to create more complex effects. Simply separate each filter
with a space.
Example:
css
CopyEdit
img {
filter: blur(5px) brightness(1.2) contrast(1.5);
}
This will apply a blur of
5px, make the image 1.2 times brighter, and increase the contrast by 1.5.
Other Available Filters
- grayscale():
Converts an element to grayscale (black and white).
- Syntax:
filter: grayscale(value);
- sepia():
Applies a sepia tone to an element, creating an old-timey look.
- Syntax:
filter: sepia(value);
- invert():
Inverts the colors of an element.
- Syntax:
filter: invert(value);
- saturate():
Adjusts the saturation of an element.
- Syntax:
filter: saturate(value);
- hue-rotate():
Rotates the hues of an element.
- Syntax:
filter: hue-rotate(value);
Lab Exercise: Create a
Gallery with Image Filters
Objective:
In this exercise, you will create a simple gallery of images and apply CSS
filters to them. The goal is to make the images appear with different effects
such as blur, brightness, and contrast.
Steps:
1.
HTML Structure:
o Create
a container for the image gallery.
o Add
several images to the gallery.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Image Gallery with Filters</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image
1">
<img src="image2.jpg" alt="Image
2">
<img src="image3.jpg" alt="Image
3">
</div>
</body>
</html>
2.
CSS Styling:
o Style
the gallery with a grid layout.
o Apply
CSS filters to the images for visual effects.
css
CopyEdit
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
transition: all 0.3s ease;
}
/* Apply filter effects
*/
img:nth-child(1) {
filter: blur(5px);
}
img:nth-child(2) {
filter: brightness(1.5);
}
img:nth-child(3) {
filter: contrast(1.5);
}
/* Hover effect */
img:hover {
filter: none; /* Remove filter on hover */
}
3.
Result:
o The
first image will have a blur effect.
o The
second image will have increased brightness.
o The
third image will have increased contrast.
o When
you hover over the images, the filters will be removed.
4.
Optional Enhancements:
o Experiment
with combining filters on the same image.
o Apply
hover effects to change the filter dynamically.
o Add
text captions or overlays to the images.
Conclusion:
CSS filters are a
powerful tool to create visually engaging effects on images and other elements.
By understanding how to use blur(), brightness(), and contrast(), you can
enhance the user experience on your webpage and make it more interactive.
Filters can be combined to achieve a variety of creative looks.
Assignment:
1.
Create a gallery of images with different
CSS filters applied to each.
2.
Experiment with hover effects to change
the filters dynamically when the user interacts with an image.
3.
Submit the HTML and CSS code used to
create your gallery.
By the end of this class,
students should be comfortable using CSS filters to enhance the visual
appearance of elements on a webpage.
HTML Code:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Image Gallery with CSS Filters</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="image">
<img src="image1.jpg" alt="Image
1">
</div>
<div class="image">
<img src="image2.jpg" alt="Image
2">
</div>
<div class="image">
<img src="image3.jpg" alt="Image
3">
</div>
<div class="image">
<img src="image4.jpg" alt="Image
4">
</div>
</div>
</body>
</html>
CSS Code (styles.css):
css
CopyEdit
/* General Styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 0;
}
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
justify-items: center;
}
.image {
width: 100%;
max-width: 300px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease, filter 0.3s
ease;
}
/* Filter Effects on
Images */
.image:nth-child(1) img {
filter: blur(4px);
}
.image:nth-child(2) img {
filter: brightness(1.5);
}
.image:nth-child(3) img {
filter: contrast(1.5);
}
.image:nth-child(4) img {
filter: grayscale(1);
}
/* Hover Effects: Change
Filters on Hover */
.image:hover img {
transform: scale(1.1); /* Slight zoom on
hover */
}
.image:nth-child(1):hover
img {
filter: brightness(1.2); /* Brighten the
image on hover */
}
.image:nth-child(2):hover
img {
filter: contrast(1.8); /* Increase contrast
on hover */
}
.image:nth-child(3):hover
img {
filter: sepia(1); /* Apply sepia filter on
hover */
}
.image:nth-child(4):hover
img {
filter: saturate(2); /* Increase saturation
on hover */
}
Explanation of the Code:
1.
HTML Structure:
o We
have a div with the class gallery that contains 4 images, each wrapped in a div
with the class image.
o Each
image has a unique filter applied to it using the :nth-child() selector in the
CSS.
2.
CSS Styling:
o grid-template-columns:
This creates a 4-column grid layout for the gallery.
o img
Styles: The images are set to be responsive (width: 100%) and
have a smooth transition applied to both the transform (zoom effect) and filter
properties.
o filter
Properties: Each image has a different filter
applied:
§ Image
1:
A blur effect.
§ Image
2:
A brightness increase.
§ Image
3:
A contrast increase.
§ Image
4:
A grayscale effect.
o Hover
Effects: When the user hovers over an image, the filter
changes dynamically:
§ The
first image becomes brighter on hover.
§ The
second image increases its contrast.
§ The
third image has a sepia filter applied.
§ The
fourth image becomes more saturated.
3.
Hover Transitions:
o The
transform: scale(1.1) on hover creates a slight zoom effect when the user
hovers over an image.
o The
filters on hover are used to enhance the interactive experience, making the
images more visually engaging.
How it Works:
- When
you load this HTML page in a browser, the images will be displayed in a
4-column grid.
- Each
image will initially have a different filter applied, and when you hover
over any image, the filter will change according to the hover effect
defined in the CSS.
Note:
- You
can replace image1.jpg, image2.jpg, etc., with the actual image paths or
URLs you want to display.
- You
can also experiment with different filters (like grayscale, invert, sepia,
etc.) and values to create a variety of effects.
Conclusion:
This assignment
demonstrates how CSS filters can be used to create dynamic visual effects on
images, and how hover effects can make the user experience more interactive and
engaging.
No comments:
Post a Comment