DEV Community

loading...

10 Helpful CSS Tips

mrwolferinc profile image mrwolferinc Updated on ・3 min read

These are 10 small CSS tips that can actually help you in projects. If you would like to request more tips, let me know in the comments section.


1. Smooth Scrolling

When you visit some websites and try to go to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line of CSS.

Note: this will not work in Safari!

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


2. Prevent <textarea> Resize

You can use the resize property to prevent a <textarea> element from being resized (or limit it to one axis).

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


3. Drop Cap

You can add a drop cap to a paragraph by using the ::first-letter pseudo-element.

::first-letter {
  font-size: 250%;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


4. Drop Shadow

You can use the drop-shadow() filter effect on transparent images. It will give a much better shadow effect than using the box-shadow property.

img {
  filter: drop-shadow(0 0 3px #000);
}
Enter fullscreen mode Exit fullscreen mode

Live Example


5. Center Any <div> Element

It can sometimes be difficult to center a <div> element on the page, but not with this tip. You can center any <div> element on the page using a few lines of CSS code.

body {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


6. Input Caret Color

You can use the caret-color property to change the color of the input field caret.

input {
  caret-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


7. Prevent Highlighting

This one is similar to #2, but you can use the user-select property to prevent an element from being highlighted by the user.

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


8. Input Range Pseudo-Classes

The lesser-known :in-range and :out-of-range pseudo-classes can help you validate an <input> element whose current value is within the range specified by its min and max attributes.

input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}
Enter fullscreen mode Exit fullscreen mode

Live Example


9. Image Overlay

You can create an image overlay using the object-fit property. This can prove to be useful when you want to create a hero image on your website.

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}
Enter fullscreen mode Exit fullscreen mode

Live Example


10. The transition Property

You might know this one already, but what if I told you that there was a way to animate elements without the use of keyframes? The transition property allows you to define the transition between two states of an element. It is mostly used for hover animations.

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}
Enter fullscreen mode Exit fullscreen mode

Live Example

Discussion (30)

Collapse
mccurcio profile image
Matt Curcio

I consider #7 evil. LOL
I hate it when I cannot steal text from the internet. ;)

Collapse
hugekontrast profile image
Ashish Khare😎

Guys press F12 and copy it from the inspector. Work smart, not hard!

Collapse
phalkunz profile image
Saophalkun Ponlu

I hate that too when it's used in the wrong place. However, I think there's a time and place for it. For example, you might wanna use it on a display copy where allowing text selection might interfere with other interactive elements.

Collapse
bravedave profile image
Dave Bray

a useful example of the user-select is user-select: all; - use it to auto select a block which is a target for copy or drag
eg. here is [URL] click and select the whole URL and copy (if it wasn’t useful to follow it)

Collapse
hseritt profile image
Collapse
mrwolferinc profile image
mrwolferinc Author • Edited

I don't steal text because its illegal btw I hate it too

Collapse
hseritt profile image
Harlin Seritt

I can always screenshot it, transform image to a pdf, use a text extractor for the pdf and Bob's your uncle. Anyways, I may not own the rights to it -- as though I wrote it myself but if I can read it, it is mine.

Thread Thread
mccurcio profile image
Matt Curcio

Yea, I've done that too, but it's a pain.
That fits my definition of evil; making you do more work than is necessary. lol

Thread Thread
hseritt profile image
Collapse
gregoriofrancisco99 profile image
Gregório Francisco

Lol! Me too!

Collapse
leob profile image
leob

Some amazing features here which I had no idea existed ... CSS is insanely vast as a topic. BTW am I the only one who finds so called "smooth scrolling" incredibly annoying on websites? That's one feature which in all likelihood I'll never ever use.

Collapse
hseritt profile image
Harlin Seritt

I guess I don't fully understand what smooth scrolling is. Is it super fast? If so, yeah I'm not a fan of it either.

Collapse
leob profile image
leob

Yeah man I also don't fully understand it! But there's a certain kind of "scrolling behavior" that I witnessed on some websites, and it's super annoying, although the site creators probably thought it was cool. Maybe that's smooth scrolling, or maybe it isn't :-)

But the example given here of smooth scrolling falls more or less in that same category, I don't like it either.

Thread Thread
hseritt profile image
Harlin Seritt

I looked into it some more and yes this is exactly what is meant by smooth-scrolling. I'm not a fan of it. I get it that some frontend guys will overdo it. No biggie.

Thread Thread
leob profile image
leob

Same! I don't like it either, what's more - I don't even see the point of it ... as a user I think, "my scroll wheel and mouse and its native/natural behavior are mine, don't mess with it!" It irks me greatly when a website is doing that :-)

Thread Thread
hseritt profile image
Harlin Seritt

Yeah it can certainly be annoying and give the site an amateurish feel to it.

Thread Thread
leob profile image
leob

Well the dev adding this feature probably thinks it's "professional" :-)

Collapse
ludamillion profile image
Luke Inglis

Please consider adding caniuse references or similar. CSS is amazing but almost every ‘awesome tips’ or ‘little known’ features article I see includes stuff that is not fully supported by all browsers. Even modern, evergreens.

Collapse
mrwolferinc profile image
mrwolferinc Author

Excuse me but what are caniuse references?

Collapse
ludamillion profile image
Luke Inglis

Entries on caniuse.com/ or similar sites which detail the support for particular CSS rules, web APIs etc.

Collapse
robinbastiaan profile image
Robin Bastiaan

#8 is quite interesting. A lot is going on that one would no longer need to do with JS after seeing this trick. Even the text of the validation label changes when needed, as seen below. 😎🤩

input#value:in-range + label#value-status::after {
content: 'okay.';
}

Collapse
mrwolferinc profile image
mrwolferinc Author

Thank you! This has become my most successful post, and I would like to thank everyone for reacting and commenting!

Collapse
hseritt profile image
Harlin Seritt

Thanks for posting. I enjoyed going through each one!

Collapse
hseritt profile image
Harlin Seritt

Some observations:

I thought there was only one way to scroll and that is "smooth" :-D

I normally want users to resize my textareas!

Never knew there was a place-items for grid :-D

What is the use of a non-default colored caret?

What no highlighting? That's lame.

Drop-cap, drop shadows on images, input ranges, image overlays and transitions are pretty cool!

Thanks for sharing and putting up with my comments!

Collapse
tonyboy78 profile image
Collapse
64j0 profile image
Vinícius Gajo

Nice post, thanks for sharing!!

Collapse
mrwolferinc profile image
mrwolferinc Author

your welcome

Collapse
markandersonnc profile image
MarkAndersonNC

Great tips!

Collapse
amirmohammadtaati profile image
Amir Mamad

Thanks!!

Forem Open with the Forem app