LocalHost
CSS PRO TIPS you might not know!

CSS PRO TIPS you might not know!

Anurag Singh's photo
Anurag Singh

We are all aware of the basic properties of CSS. But do you know about some of its hidden gems that'll surely blow your mind?

In this article, we'll cover some amazing properties which are not commonly used and might save a lot of your time.

The conic-gradient() function

It allows you to easily create good-looking pie charts!

Code 👇

div {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

Output 👇 image.png

The writing-mode property

It sets the direction of text lines in CSS to be vertical or horizontal.

Code 👇

h1 {
    writing-mode: vertical-lr;
}

h2 {
    writing-mode: horizontal-tb;
}

Output 👇 image.png

The filter function

Its used to apply graphical effects to elements

You can achieve many effects because the filter function has a lot of other functions that you can nest into it such as blur, brightness, contrast

Here is a CodePen that I created for you 👇

https://codepen.io/anuragstwt/pen/VwpXmed

Blend modes

There are two blend mode properties in CSS:

mix-blend-mode: defines the blending between an element and the element behind it.

background-blend-mode: defines the blending between the background color and the background image of an element.

Code 👇

.blend h1 {
    font-size: 150px;
    mix-blend-mode: overlay;
}

Output 👇 image.png

The user-select property

It allows you to control if the text can be selected or not!

h1 {
    user-select: none;
}

The clamp() function

clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.

It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Code 👇

p {
    font-size: clamp(0.8em, 1em, 1.6em);
}

The calc() function

calc() allows you to do calculations in order to determine the size values of CSS properties.

It calculates the result using math operators +, -, *, /

PRO TIP ✨

Use calc(100vh - 100px) to fit the page within the window height while having the navbar.

Code 👇

div {
    height: calc(100vh - 100px);
}

That's it!

I hope you found this blog valuable. If yes do let me know in the comments 😊

Also if you got any question feel free to ping me on Twitter .

CSStipsDesign