A few CSS tricks that frontend developers should know

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

1. Vertical alignment

I offten use this in a CSS Navigation Menu.

2. Remove white space below image

Solution
….

Here are a few tricks that I encountered in the process of working 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!


Print Share Comment Cite Upload Translate
APA
KhanhKitin | Sciencx (2024-03-29T15:15:23+00:00) » A few CSS tricks that frontend developers should know. Retrieved from https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/.
MLA
" » A few CSS tricks that frontend developers should know." KhanhKitin | Sciencx - Saturday June 26, 2021, https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/
HARVARD
KhanhKitin | Sciencx Saturday June 26, 2021 » A few CSS tricks that frontend developers should know., viewed 2024-03-29T15:15:23+00:00,<https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/>
VANCOUVER
KhanhKitin | Sciencx - » A few CSS tricks that frontend developers should know. [Internet]. [Accessed 2024-03-29T15:15:23+00:00]. Available from: https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/
CHICAGO
" » A few CSS tricks that frontend developers should know." KhanhKitin | Sciencx - Accessed 2024-03-29T15:15:23+00:00. https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/
IEEE
" » A few CSS tricks that frontend developers should know." KhanhKitin | Sciencx [Online]. Available: https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/. [Accessed: 2024-03-29T15:15:23+00:00]
rf:citation
» A few CSS tricks that frontend developers should know | KhanhKitin | Sciencx | https://www.scien.cx/2021/06/26/a-few-css-tricks-that-frontend-developers-should-know/ | 2024-03-29T15:15:23+00:00
https://github.com/addpipe/simple-recorderjs-demo