5 CSS One-Liners that you should Know!

CSS is not that bad at all, I know you might hate it, but I did when I started my journey learning Web Dev. CSS is an important skill to master if you aim to become a front-end web developer but, it’s hard and we cannot learn everything, right?

So today, in this post, we’ll see some of the CSS One-Liners that will eliminate all the hard work of writing down the bunch of lines that you don’t even remember.

Let’s get started!

5 CSS One-Liners to boost your productivity –

#5 Smooth Scrolling –

Whenever you scroll or have a navigation scroll then you’ll notice a smooth scrolling effect. Enable smooth scrolling for you website in just one line, you don’t have to use any JavaScript to do that.

html, body {
   scroll-behaviour: smooth;
}

#4 Reset all default styles –

I find this useful whenever I use a framework or library like Bootstrap or Material UI. Instead of individually changing all styles of an element, we can just do that in one line.

button, a {
  all: unset;
}

#3 Add Image in Input –

You might’ve seen many websites which have an input elements which consists an image, for example let’s say you are entering an amount and there will be a “$” just before you enter the amount.

You can achieve that in simple one line, don’t believe? here’s a snippet.

input {
  background: hsl(189, 41%, 97%) url("/icon-dollar.svg") no-repeat scroll 8px 8px;
}

Also, check out,
CSS Layout Tools to Boost Productivity – link

#2 Gradient Over an Image –

Gradients look so modern and aesthetic, and you can also achieve that only in single line. First step is to add a linear gradient color, then the URL of the image and then we just add some tweaks so that it’s looks perfect.

div {
    background: linear-gradient(135deg, #fc456a, #4160fb),
    url("image.jpg") no-repeat center center / cover;
}

#1 Beautiful Drop Shadow –

Drop shadows add that smooth effect to your website giving it a premium and smooth look. You an add this drop shadow to any element or a particular component like Card, Image, etc.

img {
  filter: drop-shadow(20px 20px 6px #949693);
}

So, these were just the few CSS One-Liners, though there are many and if you know any make sure to leave it in the comments below. Though there will be coming more amazing and awesome web dev content, so stay tuned.

Also, subscribe to the Codingmasterweb newsletter to never miss any interesting blog posts updates.

• Author
• Recent Posts

Follow him

Pawan Sargar

Blogger at Coding Master

Pawan Sargar is a self-taught web developer & content writer. He is passionate about helping people learn about web development & tech through easily digestible content. He also owns a tech blog waystoweb.com and you can find him on twitter.

Follow him

Latest posts by Pawan Sargar (see all)

• Frontegg: Best Auth System for your Frontend - September 27, 2022
• NextJS vs ReactJS: Which is the best for your project? - September 26, 2022
• 5 Amazing React libraries to make your App Stand Out! - July 28, 2022