20 Amazing CSS Properties You Need to know - Part 2 - Blog

Welcome, developers, to our series where we delve into the 20 Amazing CSS Properties You Need to Know Part 2. If you've landed here directly, don't miss out on Part 1, where you can explore even more CSS properties to master your skills with a solid understanding.

So, let us learn about 10 fantastic CSS properties in Part 2.

11. The filter property

With the filter property in CSS, we can add a background shadow effect to images. The box-shadow property applies a shadow to the entire box, whereas the filter property specifically targets the image itself.

In this example, we'll show how the Box Shadow and Filter properties work differently. Box Shadow adds a shadow around the image and its surroundings. While the filter only adds a shadow to the image itself, not its surroundings.

<head>
    <style>
        .filter {
            filter: drop-shadow(5px 8px 15px #222);
        }

        .box-shadow {
            box-shadow: 5px 8px 15px #222;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="filter" src="https://codemafias.com/img/post_imgs/1670220088197.png" alt="">
        <img class="box-shadow" src="https://codemafias.com/img/post_imgs/1670220088197.png" alt="">
    </div>
</body>

12. The font-display property

The "font-display" property controls how web fonts are loaded and shown by the browser. It's used with the @font-face rule to define custom fonts in a stylesheet.

Here's a simple breakdown of how it works:

Block Period: Text remains invisible until the web font loads or after three seconds, then the fallback font is used.
Swap Period: Starts with the fallback font and switches to the web font if it loads successfully.
Failure Period: If the web font fails to load, the fallback font continues.

You can choose one of these five values:

Auto (default): The browser uses its default loading method, similar to "block."
Block: Hides text until the web font loads.
Swap: Shows text with a fallback font, then swaps to a web font.
Fallback: Short block and swap periods, try web font briefly before fallback.
Optional: Hides text until a custom font is available.

Here's an example of how to use this property:

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2');
    font-display: swap;
    /* Specifies font loading behavior */
}

h1 {
    font-family: CustomFont, Arial, sans-serif;
    /* Applying the custom font to headings */
}

This ensures better control over font loading and display for a smoother user experience.

13. The perspective property

The "perspective" property adds depth to a 3D-positioned element, indicating its distance from the viewer. Lower values create a stronger 3D effect compared to higher ones.

When applied to an element, the perspective affects its child elements, not the element itself.

We can give length values to this property, the default value is "none".

<head>
    <style>
        .box-1 {
            height: 150px;
            width: 150px;
            margin-left: 100px;
            border: 1px solid lightblue;
            perspective: 100px;
        }

        .box-2,
        .box-4 {
            padding: 50px;
            border: 1px solid black;
            background: steelblue;
            transform: rotateX(60deg);
        }

        .box-3 {
            height: 150px;
            width: 150px;
            margin-left: 60px;
            border: 1px solid lightblue;
            perspective: none;
        }
    </style>
</head>

<body>
    <h2>Perspective: 100px;</h2>
    <div class="box-1">Box-1
        <div class="box-2">Box-2</div>
    </div>

    <h2>Perspective: none;</h2>
    <div class="box-3">Box-3
        <div class="box-4">Box-4</div>
    </div>
</body>

14. The white-space property

The "white-space" property controls how white space within elements is handled. Here are its different values:

normal: Default value. Sequences of white space collapse into a single space, and text wraps if needed.
nowrap: White space sequences collapse into a single space, but text continues on the same line unless a <br> tag is encountered.
pre: White space is preserved, and text wraps at line breaks. Similar to the behavior of a <pre> tag.
pre-line: White space collapses into a single space, and text wraps at line breaks.
pre-wrap: White space is preserved, and text wraps at line breaks when necessary.

<head>
    <style>
        p {
            width: 500px;
            height: 100px;
            border: 1px solid grey;
        }

        p.normal {
            white-space: normal;
        }

        p.pre {
            white-space: pre;
        }

        p.nowrap {
            white-space: nowrap;
        }

        p.pre-line {
            white-space: pre-line;
        }

        p.pre-wrap {
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati corporis nemo cum
            unde, dolorem officiis, eos dolor autem voluptatibus excepturi repudiandae ut quod reprehenderit et
            error hic perferendis nihil illum necessitatibus voluptatum praesentium at? Quisquam rem esse quas.
            Commodi, harum. </p>
        <p class="pre">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore minima beatae deserunt?
            Tempora repellat nulla, odit quibusdam dolor laborum commodi ipsum nisi corporis dolore fugiat
            consectetur enim doloremque voluptatem veniam deleniti voluptate.</p>
        <p class="nowrap">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore minima beatae
            deserunt?Tempora repellat nulla, odit quibusdam dolor laborum commodi ipsum nisi corporis dolore
            fugiat consectetur enim doloremque voluptatem veniam deleniti voluptate quam aliquam vero? Amet commodi labore facere voluptatibus voluptatum autem, blanditiis natus nihil quas quasi, nesciunt
            exercitationem.</p>
        <p class="pre-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dicta dolores
            quidem veritatis aperiam eaque harum dolorum fugiat beatae sapiente? Eum itaque, amet recusandae
            dolorem magnam libero perspiciatis ullam nemo? </p>
        <p class="pre-wrap">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos dolores quod
            beatae est at quis reiciendis perspiciatis exercitationem repellat libero, fuga atque dolor, facilis
            vitae vel aliquid quas provident iure.</p>
    </div>
</body>

15. The selection property

The ::selection selector allows you to customize the color of selected text when you double-click to highlight it. This means you can style the appearance of selected text according to your design preferences.

<head>
    <style>
        ::selection {
            color: thistle;
            background: steelblue;
        }
    </style>
</head>

<body>
    <h1>The Selection selector</h1>
    <p>Lorem ipsum...magnam.</p>
    <h3>Lorem ipsum dolor sit amet.</h3>
</body>

16. The box-reflect property

The box-reflect property offers a unique way to create reflections of elements, typically used for images.

Here's a breakdown of its values:

none: Default value, no reflection is displayed.
below: Generates a reflection at the bottom of the element.
above: Generates a reflection at the top of the element.
left: Generates a reflection on the left side of the element.
right: Generates a reflection on the right side of the element.
position offset: Specifies the position and distance of the reflection. The distance can be defined in pixels or other units.
position offset gradient: Specifies the position and distance of the reflection, along with a fading transition for the gradient reflection.

Note: The box-reflect property is non-standard and requires the -webkit prefix for compatibility with certain browsers.

<head>
    <style>
        img {
            height: 300px;
        }

        .img-1 {
            -webkit-box-reflect: below 100px;
        }

        .img-2 {
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
        }

        .img-3 {
            -webkit-box-reflect: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="img-1" src="https://codemafias.com/img/post_imgs/1670220088197.png" alt="">
        <img class="img-2" src="https://codemafias.com/img/post_imgs/1670220088197.png" alt="">
        <img class="img-3" src="https://codemafias.com/img/post_imgs/1670220088197.png" alt="">
    </div>
</body>

17. The empty-cell property

The "empty-cells" property controls the visibility of borders on empty cells within a table. However, it's important to note that if the "border-collapse" property is set to "collapse," the "empty-cells" property won't have any effect.

Here are the values for this property:

show: Default value. Displays borders on empty cells.
hide: Hides borders on empty cells.

<head>
    <style>
        table {
            empty-cells: show;
        }

        .td {
            empty-cells: hide;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <td>Programing Language</td>
            <td>What use</td>
        </tr>
        <tr>
            <td>Java</td>
            <td></td>
        </tr>
        <tr>
            <td>
                Python
            </td>
            <td class="td"></td>
        </tr>
    </table>
</body>

18. The image-rendering property

The "image-rendering" property determines the algorithm used for image scaling, affecting the quality of the scaled image.

Here are its values:

auto: Default value. The browser chooses the scaling algorithm.
smooth: Applies algorithms to smooth image colors.
high-quality: Prefers high-quality scaling, similar to "smooth."
crisp-edges: Preserves image contrast and edges.
pixelated: Enlarges the image using the nearest-neighbor algorithm, creating a pixelated effect. When the image is small, it behaves like "auto."

<head>
    <style>
        .auto {
            height: 300px;
            image-rendering: auto;
        }

        .pixelated {
            height: 300px;
            image-rendering: pixelated;
        }

        .smooth {
            height: 300px;
            image-rendering: smooth;
        }

        .crisp-edges {
            height: 300px;
            image-rendering: crisp-edges;
        }

        .high-quality {
            height: 300px;
            image-rendering: high-quality;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="auto" src="./img/img.gif" alt="">
        <img class="pixelated" src="./img/img.gif" alt="">
        <img class="smooth" src="./img/img.gif" alt="">
        <img class="crisp-edges" src="./img/img.gif" alt="">
        <img class="high-quality" src="./img/img.gif" alt="">
    </div>
</body>

19. The inset property

The "inset" property defines the distance between an element and its parent, setting its physical offset. However, it doesn't apply to inline or logical blocks. This property applies to any write-mode property.

The "inset" property accepts length or percentage units, with the default value being auto. It allows setting four values simultaneously:

Four values: Top, Right, Bottom, Left
Three values: Top, Left/Right, Bottom
Two values: Top/Bottom, Left/Right
One value: Top, Right, Bottom, Left

<head>
    <style>
        .main {
            display: flex;
        }

        .container {
            position: relative;
            height: 400px;
            width: 400px;
            border: 1px solid lightgray;
        }

        .box {
            position: absolute;
            background-color: steelblue;
        }

        .box-1 {
            inset: 10px 50px;
        }

        .box-2 {
            inset: 20% 10px 20px 10%;
        }

        .box-3 {
            inset: 20% 5% 30%;
        }

        .box-4 {
            inset: 40px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="box-1 box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat,
                dolore.</div>
        </div>
        <div class="container">
            <div class="box-2 box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat,
                dolore.</div>
        </div>
        <div class="container">
            <div class="box-3 box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat,
                dolore.</div>
        </div>
        <div class="container">
            <div class="box-4 box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat,
                dolore.</div>
        </div>
    </div>
</body>

20. The mask-image property

The "mask-image" property positions an image mask behind the text, making the text visible as an image. It's utilized in CSS to create a layer mask for an element.

You can use both image files and URLs as mask images. The default value is "none."

<head>
    <style>
        .container {
            display: flex;
        }

        .img-1 {
            -webkit-mask-image: url(./img/Logo.png);
            mask-image: url(./img/Logo.png);
            -webkit-mask-size: 50%;
            mask-size: 50%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="img-1" src="https://codemafias.com/img/post_imgs/1670220336377.png" alt="" height="500px">
        <img src="https://codemafias.com/img/post_imgs/1670220336377.png" alt="" height="200px">
    </div>
</body>

Conclusion

In Part 1 and Part 2, we covered all the important CSS properties. Now you need to practice. As you practice more, you will gain a deeper understanding of these properties, eventually becoming a CSS master.

I hope you liked this article. If you have any questions about these two articles, Part 1 and Part 2, then you can ask us using the question box given below. And you will get an answer soon.

Next: Mastering CSS border Property with example...