Web Design Mastery: 7 Cool CSS Properties to Help You Stand Out

#webdev #css #programming #beginners

CSS is the backbone of web designing and front-end development. A little knowledge of CSS properties will help you take your web designing skills to the next level. In this article, we will discuss some of the coolest CSS properties that will make you a pro at web designing.

1. mask-image

The mask property in CSS is used to hide an element using the clipping or masking the image at specific points. Masking defines how to use an image or the graphical element as a luminance or alpha mask. It is a graphical operation that can fully or partially hide the portions of an element or object.

Using masking, it is possible to show or hide the parts of an image with different opacity levels. In CSS, the masking is achieved by using the mask-image property, and we have to provide an image as the mask.

The mask-image property works in a similar way to the background-image property. Use a url() value to pass in an image. Your mask image needs to have a transparent or semi-transparent area.

Here are two examples of interesting effects that can be accomplished with masking using gradients:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .mask1 {
        -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
         mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
    }
    .mask2 {
        -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
         mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
    }
    </style>
</head>
<body>
    <img class="mask1" src="image.jpg" width="400"  height="400" alt="Image"/>
    <img class="mask2" src="image.jpg" width="400"  height="400" alt="Image"/>
</body>
</html>

Demo:

2. clip-path

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask3{
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
    </style>
</head>
<body>
    <img class="mask3" src="image.jpg" width="400"  height="400" alt="Image"/>
</body>
</html>

3. backface-visibility

The backface-visibility property defines whether or not an element should be visible when not facing the screen.

This property is useful when an element is rotated, and you do not want to see its backside.

To better understand this property, view the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .flip {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);

    -webkit-backface-visibility: visible;
    -moz-backface-visibility:    visible;
    -ms-backface-visibility:     visible;
    }

    .flip.hide-back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    }
    </style>
</head>
<body>
    <div class="flip">text</div>
    <!-- U NO SEE! -->
    <div class="flip hide-back">text</div>
</body>
</html>

4. background-blend-mode

The background-blend-mode property defines the blending mode of each background layer (color and/or image). To use it, you need to specify the blending mode of a background-image.

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}
</style>
</head>
<body>

<h1>The background-blend-mode Property</h1>

<div id="myDIV"></div>

<p><b>Note:</b> Edge prior 79 do not support the background-blend-mode property.</p>

</body>
</html>

5. resize

With the CSS resize property, we can resize an element horizontally, vertically, or in both directions.

We can set four different values to resize the property:

none — Element cannot be resized. This is the default value for most of the elements (except some elements like text area).
horizontal — Element can be resized in the horizontal direction.
vertical — Element can be resized in the vertical direction.
both — Element can be resized in the horizontal and vertical direction. Let’s create four p elements, and set height to 100px and width to 200px. Then, apply four resize properties to four p and test how it works.

<html>
 <head>
 </head>
 <style>
    .wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  width: 200px;
  height: 100px;
  overflow: auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize {
  background: orange;
  resize: both;
}

.resize-horizontal {
  background: #fcba03;
  resize: horizontal;
}

.resize-vertical {
  background: pink;
  resize: vertical;
}

.resize-none {
  background: tomato;
  resize: none;
}
 </style>
 <body>
   <div class="wrapper">
      <p class="resize-none">
        resize: none
      </p>  
      <p class="resize-horizontal">
        resize: horizontal
      </p>

      <p class="resize-vertical">
        resize: vertical
      </p>

      <p class="resize">
        resize: both
      </p>
</div>
 </body>
</html>

Demo:

6. scroll-snap-type

The Scroll Snap type property is an inbuilt property in the Scroll Snap module. Without the Scroll Snap module, the image gallery will look ridiculous. Before the Scroll Snap module, this effect can be achieved by JavaScript but during this days Scroll Snap with the CSS can be achieved. This property is useful to stop scrolling at some specific point of the page. You can use this property in the gallery section of your web-page. It will give you the full control of the scrolling.

Syntax:

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

7. writing-mode

The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, let’s say we want to add some text that is read from top to bottom and from right to left, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p {
        font-family: Georgia, serif;
        font-size: 18px;
    }

    .vertical-rl {
        writing-mode: vertical-rl;
        color: #0074d9;
        display: inline-block;
    }
    </style>
</head>
<body>
    <p>This is text that needs to be read from top to bottom, and from right to left:</p>

    <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</body>
</html>

Demo:

Summary

In conclusion, mastering the art of web design is not an impossible task. With the help of these 7 cool CSS properties, you can take your design skills to the next level and stand out in the competitive world of web design. These properties are essential for any web designer looking to elevate their game. So, go forth and experiment with these tools, and see how they can help you create visually stunning and engaging websites that will grab the attention of your audience.