A comment box with an arrow and containing an inner text can be created in CSS by using the clip-path property.

A triangle can created in CSS using the clip-path property. This property can give a triangular shape to any element.

Creating a vertical direction text with horizontal characters can be achieved using text-orientation & writing-mode CSS properties.

A multi-row layout where the last DIV needs to be placed at bottom of its parent container can be created using CSS flex, by setting margin-top as auto for the last element.

A two-column layout, where the first item is aligned to the left, and the second item is aligned to the extreme right, can be created using justify-content CSS flex property.

A responsive slider / carousel can be created with CSS flexbox using the order property. Items can be repeated infinitely in a circular loop by changing the order property each time.

A three-column layout where items are aligned to left, center and right can be created with CSS flex, and using justify-content property.

A responsive logo can be achieved in a HTML page using the CSS min() function, without involving any media query.

While applying CSS transform on an image, and scaling it, a common problem comes up that the image becomes blurred. This can be largely improved using the CSS image-rendering property.

Making the height of a container element same as that of the window is useful in cases where there is a hero content to be presented. This can be done by setting the CSS height of the element in vh units.

An image can be converted to grayscale or black & white by applying the grayscale CSS filter on it. Even a partial grayscale conversion can be done.

The CSS display property has been upgraded to a two-valued syntax. This will allow us to make new layouts that were not possible before.

By default, the color of the underline in a link is the same as its text color. However with the newly introduced text-decoration-color CSS property, the underline and the text can have different colors.

The new CSS properties such as text-decoration-thickness, text-decoration-color etc can help in creating attractive text decorations and underlines, which were not possible before.

Giving user the preference of choosing a dark or light mode has become a very popular feature of operating systems. Webpages can also be shown in dark or light theme depending on the mode chosen in the device settings.

Pull-to-refresh feature on mobile browsers that refreshes the page, can be disabled using the overscroll-behaviour CSS property.

Many next generation CSS properties and APIs have been introduced in browsers lately. These can help in creation of user interfaces that were previously not possible or were difficult to achieve.

Many times it may be required to select elements that are not having a specific class, attribute, id etc. This can be achieved using the CSS :not pseudo-class selector.

Creating table with fixed headers on scroll can be achieved by using CSS position:sticky on the table thead or th elements.

Pseudo-class and pseudo-element are both CSS selectors, however pseudo-class represents a virtual CSS class, whereas pseudo-element represents a virtual HTML element.