In the story, I will share 10 important CSS properties with you. They are so amazing and interesting and useful.

1. :in-range and :out-of-range Pseudo-Classes

CSS’s :in-range and :out-of-range pseudo-classes are used to style inputs within and outside specified range constraints.

:in-range If the current value of an input element falls within the range defined by the min and max attributes, it is considered within range. This pseudo-class is useful for determining whether the current value of a field is acceptable.

:out-of-range If the current value of an input element exceeds the range defined by the min and max attributes, it is considered out of range. This provides users with a visual indication that the field value exceeds the allowed range.

/* Styling for elements within range */
input:in-range {
 background-color: rgba(0, 255, 0, 0.25);
}

/* Styling for elements out of range */
input:out-of-range {
 background-color: rgba(255, 0, 0, 0.25);
}

These pseudo-classes offer a straightforward way to style input elements based on their adherence to specified value constraints.

Note: These pseudo-classes apply only to elements with a scope limit, without which the element cannot be in or out of scope.

For more information, you can refer to the MDN Web Docs.

2. The grayscale Function

By using values ranging from 0 to 100%, you can create various effects. Lower values will retain some color, while higher values will make the image closer to black and white.

This image effect can be achieved using the CSS filter property. By setting the filter property of an image to grayscale(100%), you can completely transform the image into black and white.

To create different effects, you can experiment with different grayscale values, such as grayscale(50%), which will give the image a halftone effect.

With CSS image transformation effects, we can easily convert a color image to black and white by adjusting…