DEV Community 👩‍💻👨‍💻

Cover image for 10 CSS tips you need to know right now.
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on • Updated on • Originally published at blog.abhiraj.co

10 CSS tips you need to know right now.

1. Change the color of the cursor for any input field

caret

2. Center any thing with just 3 lines of CSS

Imgur

3. Add smooth scroll in just one line of CSS

Imgur

4. Add any image to the heading of a page to create a cool effect

Imgur

5. Truncate text with plain CSS

Imgur

6. Make any element resizable

Imgur

7. Add any image as the cursor

Imgur

8. Animate Scroll Behaviour

Imgur

9. Enable Blend Mode

Imgur

10. Select content with CSS

Imgur


Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches and tech news.

Abhiraj's Dev-letter

Top comments (6)

Collapse
 
mavuriel profile image
mavuriel

Knowledge is for everyone and time you take to share it is appreciated, but friend I saw these same 7 snippets in a Twitter thread, I don't want to say that anyone else can have that knowledge but I think at least you should give a little credit to the person who did it before.
https://twitter.com/denicmarko/status/1450768106872311809?t=1tb-pktzntK3RiC7PriWeA&s=19

Collapse
 
abhirajb profile image
Abhiraj Bhowmick • Edited on

sure thing! I have done it.

Collapse
 
iakovosvo profile image
iakovosvo

The second one can also be done with 2 lines of CSS:

display: grid;
place-items: center;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
luizc91 profile image
LuizC91

Neat

Collapse
 
harsvnc profile image
Hrn Svncハルン

2 always gets me googleing. Today I bookmared this thread, thanks man!

Collapse
 
mukhammadakilov profile image
Mukhammad Akilov

Nice 👍👍

Make Your Github Profile Stand Out

Github is great, but have you considered how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

Take a couple of hours and show your best side as a person - and a programmer.