5 CSS One-Liners that you should Know!

Published by Pawan Sargar on

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!

css one liners that you should know!

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.

image in input css one liner

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.

drop shadow css one liner
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.

Pawan Sargar
Follow him
Spread the love
```html ```

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.