9 Useful and Interesting CSS Properties

Nowadays, website and web application online requires a lot of css code to make things look nice and stand out. I don't think we'll ever have a great web design that stands out without CSS.

CSS is a very useful style sheet language that is mainly used to implement the look and feel of a website or web application design. By using CSS, we can easily style web pages and also enable responsive development.

Over the years, CSS has brought many new features that make life easier for web developers. Interesting and useful properties such as Flexbox, Grid, etc. CSS has improved a lot in recent years, and there are always some interesting and useful new properties that we may never have used or heard of.

So, in this article, I would like share you with some useful and interesting CSS properties that a lot of developers talk about, and maybe some you've never used.

1. user-select Attribute in CSS

The user-select property in CSS is useful if we want to prevent the user from highlighting or selecting text on a web page. This property defines whether the text of the element can be selected.

Because by default when you double click on text with mouse it will be selected (highlighted). The attribute user-select can be used to prevent this from happening. Below is an example.

div{
user-select: none;
}

2. resize Attribute in CSS

The resize property in CSS allows users to resize elements on a web page by clicking and dragging the upper-right corner of the element. Therefore, it defines if and how the user should resize the element. This attribute is typically used on elements such as textarea, which users can easily resize to write long-form text.

Additionally, there are 4 values ​​that can be used with the resize attribute.

Below is an example.

textarea{
resize: none;
}

3. object-fit Attribute in CSS

The object-fit attribute allows us to set or define how the replaced element's content (img, video, etc.) should be adjusted to fit its container. All major browsers support this property. It can take these values, including fill, contain, cover, scale-down, and none.

The following code example allows the image to maintain its aspect ratio and fill the given dimensions. Image is cropped to fit.

img{
object-fit: cover;
}

4. clip-path Attribute in CSS

clip-path is very interesting, it allows us to create different types of complex shapes (ellipses, circles, polygons and other different shapes) using CSS.

This attribute can create complex shapes by defining which parts of an element should be displayed. clip-path can take different values, such as shape functions and clip sources. The following is a syntax example.

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

5. writing-mode Attribute in CSS

The CSS writing-mode attribute allows us to define whether lines of text are laid out vertically or horizontally. Among other things, it allows to set the forward direction of the block. This property is supported by all major browsers and can take the following values. An example is shown below.

horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr

h1{
 writing-mode: vertical-lr;
}
h2{
 writing-mode: horizontal-tb;
}

6. backface-visibility Attribute in CSS

The backface-visibility attribute in CSS sets whether the back face of an element is visible when turning to the user. This property is often used when creating flip cards with hover effects. It can take one of two values, visible or hidden. Below is an example.

div{
backface-visibility: hidden;
}

7. place-items Attribute in CSS

The CSS place-items attribute is a great shorthand for the align-items and justify-items properties. It allows us to easily align elements in both directions (inline and block) in layout systems like Flexbox or Grid.

This property can take two values ​​at a time. But if we only use one value, that value will automatically be used as the second value. The place-items property can take these values, including center, start, end, stretch, and so on. Below is an example.

div{
place-items: center stretch;
}

8. mix-blend-mode Attribute in CSS

The mix-blend-mode property of CSS is another useful property that many people are not familiar with, or even most web developers know about. So this property sets and defines how the content of the element should blend with the content of the parent element and its background.

Here we simply say it defines a blend between an element and another element behind it. This property has many values, such as normal , multiply , overlay , screen and so on. Below is an example.

.parent img{
 position: absolute;
}
.parent h1 {  
 mix-blend-mode: overlay;
}

9. background-blend-mode Attribute in CSS

The background-blend-mode property in CSS is another useful blend mode property that allows to define and set the blend between an element's background image and background color. This property has many values ​​(Normal, Multiply, Screen, etc.) that allow us to set different blending modes. It is supported by all major browsers except older versions. Let's take a look at the two settings below.

div{
background: url("garden.png"), url("home.png");
background-blend-mode: normal;
}

div{
background: url("garden.png"), url("home.png");
background-blend-mode: overlay;
}

As you can see in this article, CSS has a lot of interesting properties that many developers don't use or know about. As we learn more and more CSS, the more you will find that there is a lot to learn.

CSS is a great stylesheet language and it has a lot of features that we can use to make the web prettier, we just need to keep updating and learning new things all the time.