DEV Community

loading...

7 CSS Tricks you should know!

SAIFULLAH­čç«­čç│
TechGeek, Exploring Web development and Cyber security field.
Ńâ╗2 min read

As I am learning Development, I would like to share this 7 CSS tricks that you should know for better results.

If you know this before hit heart below!

So let's begin...

1. Disable a link

Image

~You can disable any link using css and no action will take place while you click on the link.

2. Disable Text Selection

Image

~The property user-select says whether the use can select the element or not.

3. Resize images to fit

Image

~when you get in a pinch where images need to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this.

4. Custom caret color

Images

~The caret-color property sets the color of the insertion carpet, the visible marker where the next character types will be inserted.

5. Disable Text Area resize

Image

~Resize property will resize the textarea, inorder to disable textarea you should give none value.

6. Making image fit

image

~This object-fit property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.

7. Placeholder's color

Image

~The ::placeholder selector selects fork elements with placeholder text. This will let you style the placeholder text.

Thanks for reading.
Do read my previous posts you will love it.

Discussion (7)

Collapse
afif profile image
Temani Afif

also remove the JS tag please since your post is not related to JS (you can use #webdev instead)

Collapse
afif profile image
Temani Afif

small typo in the title know :)

Collapse
saifullah profile image
SAIFULLAH­čç«­čç│ Author

Thank you

Collapse
snuppedeluxe profile image
SnuppeDeluxe

THANK YOU!!!!
I've searched so long for a good integration for my images. For a me, as a beginner, it's sometimes a bit difficult for searching the right words on google.

Collapse
alohci profile image
Nicholas Stimpson

Note that your first example does not disable the link, it just makes it unclickable. A user can still follow the link by tabbing it into focus and pressing the enter key.

Collapse
modulesunraveled profile image
Brian Lewis

I think your images for #3 and #6 are swapped

Some comments have been hidden by the post's author - find out more