DEV Community

loading...
Cover image for Amazing CSS Tips & Tricks - Part 2

Amazing CSS Tips & Tricks - Part 2

Tarandeep Singh
Learning Full-Stack Web Development | Sharing knowledge & resources along the way!
・3 min read

After an amazing response on my first "Amazing CSS Tips & Tricks" blog, here I am with Part-2. So gear up and get ready to take a dive into CSS!

Clamp it Down

Making the websites responsive is a big headache for most developers as they have to write lengthy code with lots of media queries. But I have a life-saver for you guys. You can use functions like min, max, and clamp to refactor your code. The following code shows how you can set the width to a clamped value that has a minimum of 200 pixels, a max of 600, and a preferred value of 50%.

article {
    width: clamp(200px, 50%, 600px);
}
Enter fullscreen mode Exit fullscreen mode

The following comparison image shows how I turned 13 lines of code into just 1 using this trick:
Comparison: clamp() vs media query

The link pseudo-class

A lot of developers and designers often miss this simple yet effective CSS trick that solves usability issues with visitors.

a:link { color: blue; }
a:visited { color: purple; }
Enter fullscreen mode Exit fullscreen mode

The link: pseudo-class controls all links that haven’t been clicked on yet & the :visited pseudo-class handles the styling of all of the links user has already visited. This tells the visitors where they have already been on your site, and where they have yet to explore.

Drop Caps

Drop caps remind me of the traditional printed books & newspapers. I just love it as it is a great way to start a page with written content. That first, large letter really grabs your attention. We can use :first-letter to create a drop cap in CSS. Here’s an example:

p:first-letter {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}
Enter fullscreen mode Exit fullscreen mode

Output:
drop-cap output image

Hover Effects

This might be an easy one, yet very useful. If you want to highlight something whenever the user hovers the mouse over it then add :hover to that button, text link, block section or icon. Here's how the CSS would look if you wanted to change the color of h2 tag whenever the user hovers over it:

.entry h2{
    font-size:24px;
    color:#000;
    font-weight:700;
}

.entry h2:hover{
    color:#f00;
}
Enter fullscreen mode Exit fullscreen mode

Transition for Hover Effect

For hover effects, on menus or images in your website, you don’t want colors snapping too quickly as they might not look pleasing to the end-user. So ideally, we should ease the change gradually, which is where the transition property comes into play. The following code shows how in the same hover effect used above, we can make the change happen over .4 seconds, instead of just instantly snapping to red.

.entry h2 {
  transition: color 0.3s ease;
}

.entry h2:hover{
    color:#f00;
}
Enter fullscreen mode Exit fullscreen mode



That's all for this one! I want to thank all of you guys for such an overwhelming response on my first blog. I was amazed to see how it got 60+ bookmarks in just 24 hours of posting it! If you have not seen it, Check it out here.
Tell me in the comments which trick did you guys liked the most!

You can follow me on Twitter and LinkedIn.

Discussion (4)

Collapse
jamesthomson profile image
James Thomson

This last one would be better written with the transition in the h2 so you get the same effect on transition out.

.entry h2 {
  transition: color 0.3s ease; // Also, it's best to only target the property you intend to transition
}

.entry h2:hover{
    color:#f00;
}
Enter fullscreen mode Exit fullscreen mode

+1 for the reminder of clamp, I need to use this more often now that it's far more widely supported.

Collapse
tarandeep_singh profile image
Tarandeep Singh Author • Edited

That's a really nice advice James! Thank you ✨ I'll improve that part, so that all the readers get the best version!

Collapse
stevehoskins profile image
Steve Hoskins

Thanks for this Tarandeep. I'm still new to all of this so it is good to have these insights at this stage whilst learning.
Cheers,
Steve

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Thankyou so much Steve. I'm glad that you liked my blog! ✨💫