5 Next-level CSS Tricks to Enhance Your Web Design

CSS (Cascading Style Sheets) is a powerful tool that allows developers to design beautiful web pages. In this article, we’ll explore 5 CSS tricks that can take your web design skills to the next level.

1. get HTML attribute value using CSS

CSS attr() function allows developers to retrieve values of HTML attributes within their stylesheets. In the following example, I use attr() function to display the text content of ::after pseudo-class of span HTML element using it’s data-value attribute.

<span id="counter" data-value="1"></span>

#counter::after {
  content: attr(data-value);
}

This CSS property allows JS to easily change the value without directly manipulating the text content of HTML elements. Take a look at this CodePen snippet to see the code in action.

2. Resize using CSS

in CSS resize property allows users to dynamically adjust the width and height of an element with resizable controls like textarea HTML element. you can enable resizing horizontally, vertically or both.

.resize{
  resize: both;
}

Check out the CodePen below for a quick demonstration.

3. Increment using CSS

The CSS counter feature automatically generates and displays numerical values, eliminating the need for explicit provides from the developer. for that, you need 3 CSS properties counter-reset, counter-increment and counter() function

1. counter-reset — used to create a new counter or reset the current counter. by default, it assigned 0;

counter-reset: item-counter; /* like a variable name */

If you want to set a starting number for the counter, you can do it like this:

counter-reset: item-counter 5;

2. counter-increment — used to increment a current counter. by default, it increments by 1

counter-increment: item-counter

If you want to increase the current counter by a certain number, you can do it like this.

 counter-increment: item-counter 3;

3. counter(): fetches the current value of the counter

content: "Item " counter(item-counter);

This CodePen shows how to automatically add h1 elements to the div below, and CSS automatically adds numbers in front of each h1 tag, eliminating the need for manual developer input or the use of JS. This provides a much cleaner code.

<div class="container">
 <h1>Toffees</h1>
</div>

Check out the CodePen below for a demonstration.

FromFrom

4. Remove the background of images just using CSS

For this, we can use mix-blend-mode CSS property. Using this we can set how the content of an element should blend with its parent and background. In this case an img element.

Here, you can see that I used two images: one is coloured, and the other is black, and both have a white background. I’m going to remove the background of the images just using CSS without using any image editing software.

To remove the white background from the coloured image, you can use the mix-blend-mode CSS property with the value multiply. The colours from both layers blend by multiplying their values, resulting in a darker and more blended appearance. This is useful when removing the white background from a colour image, as the white parts become transparent, showing the underlying background. although this makes the image a bit darker.

.blend-multiply{
  mix-blend-mode:multiply;
}

To remove the white background from the black image, you can use the mix-blend-mode CSS property with the value color-burn. It applies a darkening effect by blending the colours of an element with its background. This method enhances the darker areas, producing a burnt or shadowy appearance. perfect to use in a case like this

.burn-color{
  mix-blend-mode:color-burn;
}

After applying the CSS, the final result looks like this.

Check out the following CodePen below.

5. Add a shadow to PNG, only where it’s needed.

To add a shadow to an element, we typically use the CSS property box-shadow. This property adds a shadow around the border of an element. If we add a box-shadow property to a PNG image which has a transparent background it still shows a background around the image which shows a square appearance.

img {
  width: 250px;
  box-shadow: 15px 15px 15px #555;
}

However, if we use the filter CSS property with the drop-shadow() CSS function instead of box-shadow, we can add a shadow only to the actual image part in PNG without including the transparent background.

img {
  width: 250px;
  filter: drop-shadow(15px 15px 15px #555)
}

and the final result looks like this.

and don't forget to check out the below CodePen as well!

So here they are, 5 Next-level CSS tricks. Each trick adds its unique touch, so feel free to combine them to create awesome web designs.

If you’d like even more CSS tricks to make cool web designs, don’t miss out on the sequel to this article!

Another 5 Next-level CSS tricks to make beautiful Web Designs.

Happy coding!!!