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
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.
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!
Happy coding!!!