Hey dude 👋 , Hope you are good and coding the masterpiece of your work. Here, I'm going to talk about CSS as Every year new CSS properties are standardized and made available in major browsers for you to use. They are meant to make the life of web developers like you easier, and to allow the creation of new and beautiful designs. So, in this article, I'll try to introduce you to some CSS properties that by the end of this post you should feel comfortable using.

1. Line-Clamp

The line-clamp property is a way to truncate (cut off) text after a specific number of lines.
Syntax :

.selector{
  line-clamp: [none | <integer>];
}

👉 See Example

2. Shape-Outside

The shape-outside property is used to define the shape that the adjacent inline content may wrap around. It can be used to define complex shapes including images that can be used to wrap text around instead of simple boxes.
Syntax -

selector{
shape-outside: <basic-shape> | <shape-box> | <image> | none |  initial | inherit;
}

👉 See Example

3. Background-clip

CSS background-clip property specifies how far the background-color and background-image should be from the element. If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions, otherwise, the border shows the difference.
Syntax -

selector{
background-clip: border-box | padding-box | content-box | text | initial | inherit;
}

👉 See Example

4. Vertical-align

The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy property for beginners.
Syntax -

selector{
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;
}

👉 See Example
Resource - MDN

5. CSS Counters

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
Example-

body {  
    counter-reset: section;  
}  
h3::before {  
    counter-increment: section;  
    content: "Section " counter(section) ": ";  
}

<h3>First Heading</h3>
<h3>Second Heading</h3>
<h3>Third Heading</h3>

To know in detail Click here

6. Text-Stroke

This CSS property adds a stroke to the text and also provides decoration options for them. It defines the color and width of strokes for text characters.
Syntax -

selector{
/* Width and color values */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
text-stroke: inherit;
text-stroke: initial;
text-stroke: unset;
}

👉 See Example

⚡ How much of these properties did you know about? And what are the properties you think should be added to this list? Tell me in the comments.