DEV Community

Cover image for A few CSS tricks that frontend developers should know
KhanhKitin
KhanhKitin

Posted on

8 2

A few CSS tricks that frontend developers should know

Here is a few tricks that I encountered in the process of making CSS and learned how to solve it in a simple way.

1. Vertical alignment

I offten use this in a CSS Navigation Menu.
vertical-alignment

2. Remove white space below image

remove-white-space-below-image
Solution
.img-css {
width: 300px;
height: 200px;
display: block;
}
or
.img-css {
vertical-align: middle
}

3. Using display: flex, the icon is distorted when the text is long

using-display-flex-the-icon-is-distorted-when-the-text-is-long
Solution
.cc {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
margin-right: 20px;
flex-shrink: 0;
}

4. Truncate Text

Solution
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
truncate-text

5. Disable Text Selection Highlighting

If we want to disable the highlight effect.
Solution
user-select: none;

Disable-Text-Selection-Highlighting

6. Make a Textarea Unable to Resize

Make-a-Textarea-Unable-to-Resize

7. Math with Calc

Math-with-Calc

8. Change an HTML5 Input Placeholder Color

Change-an-HTML-Input-Placeholder-Color

The article will still be updated with more cool things about CSS. Thank you for your support and reading until now.
My blogs hoangkhanh.tech
Thank you!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
planet_cbx profile image
Charlène Bonnardeaux • • Edited

For the first tip; the good practice is to use a number as multiplier factor; that’s works but it a little bit tricky a flexbox make the job and is more readable ;) but thanks for sharing :D

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video