Amazing CSS Tips & Tricks - Part 2

#css #webdev #beginners

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);
}

The following comparison image shows how I turned 13 lines of code into just 1 using this trick:

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; }

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;
}

Output:

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;
}

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;
}

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.

Top comments (4)

James Thomson • Jul 29 '21

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;
}

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