Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 29, 2021 07:55 pm GMT

Amazing CSS Tips & Tricks - Part 2

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

The link: pseudo-class controls all links that havent 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. Heres 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:
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;}

Transition for Hover Effect

For hover effects, on menus or images in your website, you dont 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:hover{    color:#f00;    transition: all 0.3s ease;}



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.


Original Link: https://dev.to/tarandeep_singh/amazing-css-tips-tricks-part-2-37lg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To