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

Hi developer! Welcome to this article. We have divided this article into two parts, Part 1 and Part 2, to make it easier for you to understand. This is Part 1, and you will learn about 10 fantastic CSS properties that few developers are aware of. Whether you're a beginner or an expert coder, learning these properties will allow you to make any website look amazing.

So let us begin.

1. The clip-path property

The CSS clip-path property allows us to create many shapes, like circles, ellipses, and polygons, for the website's background. You've probably seen many web pages with backgrounds of various shapes that are made using the clip-path property. Although there are other ways to build shapes, but this method is easy to use.

To create cool shapes using the clip-path property, visit a CSS clip-path-maker site. This tool lets you design shapes easily, and it even generates the CSS code for you after you're done making your shape.

To shape our background, we'll use the clip-path maker tool. Let's say we want a bottom point shape. We'll create it in the tool, and the code will be generated automatically. After making the shape, we'll copy the code. Then, we'll paste this code into our code editor where we want the shape to appear.

CSS clip-path property

We've created the shape, and you can find the code automatically generated at the bottom of this site. Simply copy and paste this code into your CSS file to use it in your project.

.bg-image {
    background-image: url("https://codemafias.com/img/post_imgs/1669767719313.jpg");
    background-size: cover;
    height: 100vh;
    clip-path: polygon(0 0, 100% 0, 100% 71%, 50% 100%, 0 71%);
}

2. The shape-outside property

The "shape-outside" property enables text to wrap around elements and within specific shapes.

This property has different values, and accept it in different ways.

Keyword values: none, margin-box, padding-box, border-box, padding-box.
Function values: circle(), ellipse(), inset(), polygon().

If you give a value to the Clip Path property, it will also accept this property. Go to the clip-path-maker site and make the shape.

Clip-path defines how users will see your element, whereas shape-outside specifies how other HTML elements will see it.

<head>
    <style>
        .round-shape-1 {
            shape-outside: circle(50%);
            float: left;
        }

        .round-shape-2 {
            shape-outside: polygon(58% 0, 100% 50%, 58% 100%, 0% 100%, 0 49%, 0% 0%);
            float: left;
        }

        .image {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            margin-right: 60px;
            overflow: hidden;
        }

        img {
            height: 100%;
        }

        p {
            width: 35%;
            text-align: justify;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>padding-box value</h1>
        <div>
            <div class="image round-shape-1">
                <img src="https://codemafias.com/img/post_imgs/1669960428840.jpg">
            </div>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, voluptatibus! Consectetur,
                ipsam! Architecto recusandae ad incidunt ipsam libero nam illum perspiciatis rerum voluptatibus
                a explicabo asperiores quas eveniet assumenda aspernatur provident, sapiente quidem laudantium vero veniam nulla maxime earum? Voluptate perspiciatis dolorem totam, quod libero minus delectus sunt impedit ex enim distinctio veniam maiores corrupti debitis iste exercitationem voluptas voluptatum voluptatibus ducimus? Quos perspiciatis, doloribus amet modi delectus numquam assumenda tenetur quas sint, beatae alias nihil quaerat odit ex nemo est provident dignissimos error velit adipisci nam incidunt rem. Rerum tenetur nobis velit eveniet, quis impedit, quasi, voluptates aliquid dicta ullam quos quibusdam pariatur repellat eius placeat dolorem quidem autem. Ab numquam enim quia, tenetur impedit fugit quis cum tenetur repudiandae!</p>
        </div>
    </div>

    <div class="container">
        <h1>polygon value (clip path)</h1>
        <div>
            <div class="image round-shape-2">
                <img src="https://codemafias.com/img/post_imgs/1669960428840.jpg">
            </div>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, voluptatibus! Consectetur,
                ipsam! Architecto recusandae ad incidunt ipsam libero nam illum perspiciatis rerum voluptatibus
                a explicabo asperiores quas eveniet assumenda aspernatur provident, sapiente quidem laudantium vero veniam nulla maxime earum? Voluptate perspiciatis dolorem totam, quod libero minus delectus sunt impedit ex enim distinctio veniam maiores corrupti debitis iste exercitationem voluptas voluptatum voluptatibus ducimus? Quos perspiciatis, doloribus amet modi delectus numquam assumenda tenetur quas sint, beatae alias nihil quaerat odit ex nemo est provident dignissimos error velit adipisci nam incidunt rem. Rerum tenetur nobis velit eveniet, quis impedit, quasi, voluptates aliquid dicta ullam quos quibusdam pariatur repellat eius placeat dolorem quidem autem. Ab numquam enim quia, tenetur impedit fugit quis cum tenetur repudiandae!</p>
        </div>
    </div>
</body>

3. The writing-mode property

The CSS property "writing mode" is used to arrange text horizontally or vertically and set the direction of block progress.

This property offers various values:

horizontal-tb (default): Text flows horizontally from left to right and vertically from top to bottom.
vertical-rl: Text flows horizontally from right to left and vertically from top to bottom.
vertical-lr: Text flows horizontally from left to right and vertically from top to bottom.
sideways-lr: Text flows in a left-to-right block direction. Although written vertically, each line follows the previous one.
sideways-rl: Text flows from right to left. Each line appears to the left of the previous one.

Note: Currently, "sideways-rl" and "sideways-lr" are only supported by Firefox and may not work in other browsers.

The following example will help you clarify the concept.

4. The user-select property

The "user-select" property controls whether users can select text on a webpage. By default, text can be selected by double-clicking. However, you can customize this behavior using different values for this property:

auto: Default value. Allows text selection as per browser settings.
none: Prevents text selection entirely.
text: Allows users to select text.
all: Enables text selection with a single click instead of a double click.

<head>
    <style>
        div {
            padding: 10px;
            border: 1px solid grey;
            margin: 10px 0;
        }

        .first {
            user-select: auto;
        }

        .second {
            user-select: none;
        }

        .third {
            user-select: text;
        }

        .fourth {
            user-select: all;
        }
    </style>
</head>

<body>
    <div class="first"><strong> 1. Auto (Select):</strong> Lorem ipsum dolor sit, amet consectetur adipisicing
        elit.Esse, mollitia.</div>
    <div class="second"> <strong> 1. None (Not Select):</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, eaque!</div>
    <div class="third"> <strong> 1. Text (Select):</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia,eaque!</div>
    <div class="fourth"> <strong> 1. All (One Click Select):</strong> Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quia, eaque!</div>
</body>

5. The object-fit property

The "object-fit" property determines how elements like images or videos should be resized to fit their container. Here are the different values for this property:

fill: Default value. The content is resized to fill the container, potentially stretching or squeezing the image or video.
contain: The content retains its original aspect ratio while fitting into the container.
cover: The content also maintains its aspect ratio but may be cropped if it exceeds the container size.
scale-down: The content is resized as if "none" or "contain" were specified, whichever results in a smaller object size.
none: The content is not resized at all.

<head>
    <style>
        img {
            margin: 15px;
            width: 300px;
            border: 1px solid rgb(163, 163, 163);
            height: 300px;
        }

        .img-1 {
            object-fit: fill;
        }

        .img-2 {
            object-fit: contain;
        }

        .img-3 {
            object-fit: cover;
        }

        .img-4 {
            object-fit: scale-down;
        }

        .img-5 {
            object-fit: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="img-1" src='https://codemafias.com/img/post_imgs/1669767685854.jpg' alt="">
        <img class="img-2" src='https://codemafias.com/img/post_imgs/1669767685854.jpg' alt="">
        <img class="img-3" src='https://codemafias.com/img/post_imgs/1669767685854.jpg' alt="">
        <img class="img-4" src='https://codemafias.com/img/post_imgs/1669767685854.jpg' alt="">
        <img class="img-5" src='https://codemafias.com/img/post_imgs/1669767685854.jpg' alt="">
    </div>
</body>

6. The backface-visibility property

The "backface-visibility" property controls whether the backside of an element is visible when it's rotated, commonly used with 2D or 3D transforms. Here are the available values:

visible: Default value. Allows the user to see the backside of the element when it's rotated.
hidden: Hides the back of the element from view when the user hovers or clicks over it.

<head>
    <style>
        .container {
            background-color: steelblue;
            display: flex;
        }

        .box {
            height: 200px;
            width: 200px;
            margin: 20px;
            font-size: xx-large;
            padding: 50px;
            background-color: thistle;
            animation: rotate 5s ease;
            animation-iteration-count: infinite;
        }

        .box-1 {
            backface-visibility: hidden;
        }


        .box-2 {
            backface-visibility: visible;
        }

        @keyframes rotate {
            from {
                transform: rotateY(0);
            }

            to {
                transform: rotateY(1turn);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box-1 box">The hidden value</div>
        <div class="box-2 box">The Visible value (default)</div>
    </div>
</body>

In this example, we've set the "backface-visibility" property to "hidden" for the first box, hiding the text when the box is rotated to the backside. For the second box, we've set the property to "visible," allowing the text to remain visible even when the box is rotated to the backside.

7. The mix-blend-mode property

The CSS mix-blend-mode property is used to blend the content of an element with its background. This includes different values such as normal, multiply, exclusion, overlay, lighten, darken, and many more.

In this example, we'll explore the "darken" and "overlay" values of the "mix-blend-mode" property.

Darken value example

In this case, we have a parent-child relationship between the body tag and the div tag. The body tag sets the background color to red, acting as the parent, while the div tag, serving as the child, blends its content with the parent color using the "darken" value.

<head>
    <style>
        body {
            background-color: red;
        }

        div {
            height: 98vh;
            width: 90vw;
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-image: url("https://codemafias.com/img/post_imgs/1669767685854.jpg");
            background-size: cover;
            mix-blend-mode: darken;
        }
    </style>
</head>

<body>
    <div></div>
</body>

Overlay value example

In this example, the div tag serves as the parent of the h1 tag, with the h1 tag acting as the child of the div tag. We've placed an image within the div tag and applied the "overlay" value to the h1 tag. This setup allows the text within the h1 tag to blend with the color of the image.

<head>
    <style>
        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-image: url("https://codemafias.com/img/post_imgs/1669960428840.jpg");
            background-size: cover;
        }

        h1 {
            font-size: 150px;
            mix-blend-mode: overlay;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Sealine Beach</h1>
    </div>
</body>

CSS mix-blend-mode proeprty

8. The background-blend-mode property

The "background-blend-mode" property is employed to blend background images and colors of elements together.

It offers various blending modes, including; normal (default), multiply, screen, darken, lighten, color-dodge, saturation, difference, luminosity, and overlay.

<head>
    <style>
        div {
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            height: 50vh;
            width: 40%;
        }

        #darken {
            background-image: url(./img/tree.jpg), url("https://codemafias.com/img/post_imgs/1669960428840.jpg");
            background-blend-mode: darken;
        }

        #hard-light {
            background-image: url("https://codemafias.com/img/post_imgs/1669960428840.jpg");
            background-color: red;
            background-blend-mode: hard-light;
        }
    </style>
</head>

<body>
    <div id="darken"></div>
    <div id="hard-light"></div>
</body>

CSS background-blend-mode property

9. The place-items property

The "place-items" property is a convenient shorthand for aligning elements both horizontally and vertically within a layout system like Flexbox or Grid. It combines the functionalities of "align-items" and "justify-items."

This property accepts two values simultaneously. If only one value is provided, the second value defaults to being the same.

This property has different values: auto, normal, start, end, flex-start, flex-end, center, self-start, self-and, space-evenly, and stretch (default).

You can center any element, with just two lines of code.

<head>
    <style>
        div {
            display: grid;
            height: 100vh;
            place-items: center;
        }

        .center-box {
            height: 500px;
            width: 500px;
            background-color: steelblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center-box">Place-items Center</div>
    </div>
</body>

10. The resize property

The "Resize" property in CSS is used to change the size of an element both vertically and horizontally. It is mostly used in textareas so that we can adjust the size of the input.

This property has different values.

Vertical: Allows vertical resizing.
Horizontal: Enables horizontal resizing.
Both: Allows resizing in both directions.
None: Disables resizing by the user.

<head>
    <style>
        .textarea-1 {
            resize: horizontal;
        }

        .textarea-2 {
            resize: vertical;
        }

        .textarea-3 {
            resize: both;
        }

        .textarea-4 {
            resize: none;
        }
    </style>
</head>

<body>
    <textarea class="textarea-1" name="" id="" cols="30" rows="10">You can only change the size horizontally.</textarea>
    <textarea class="textarea-2" name="" id="" cols="30" rows="10">You can only change the size vertically.</textarea>
    <textarea class="textarea-3" name="" id="" cols="30" rows="10">You can change the size on both sides.</textarea>
    <textarea class="textarea-4" name="" id="" cols="30"
        rows="10">You don't change the size in any direction.</textarea>
</body>