This content originally appeared on DEV Community and was authored by Tarandeep Singh
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: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.
This content originally appeared on DEV Community and was authored by Tarandeep Singh
Tarandeep Singh | Sciencx (2021-07-29T19:55:37+00:00) Amazing CSS Tips & Tricks – Part 2. Retrieved from https://www.scien.cx/2021/07/29/amazing-css-tips-tricks-part-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.