CSS tips you won't see in most tutorials:
1/ Create a beautiful text portrait with a few lines of CSS:
2/ When you work with transparent images you can use the `drop-shadow()` filter function to create a shadow on the image's content, instead of `box-shadow` property which creates a rectangular shadow behind an element's entire box:
filter: drop-shadow(2px 4px 8px #585858);
filter: drop-shadow(2px 4px 8px #585858);
3/ Four modern ways of centering a div:
4/ Smooth scrolling
Smooth scrolling with zero JavaScript, with just one line of CSS.
Smooth scrolling with zero JavaScript, with just one line of CSS.
5/ `caret-color`
You can change the color of the text input cursor.
You can change the color of the text input cursor.
6/ CSS Scroll Snap
You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:
You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:
7/ Dynamic Tooltips
Create dynamic CSS-only tooltips, using the `attr()` CSS function.
Create dynamic CSS-only tooltips, using the `attr()` CSS function.
8/ Create beautiful rounded, gradient borders:
9/ CSS modals
You can use the `:target` pseudo-class to create modals with zero JavaScript.
You can use the `:target` pseudo-class to create modals with zero JavaScript.
10/ Anything resizable
Did you know that you can make any element resizable, just like `<textarea>`?
Did you know that you can make any element resizable, just like `<textarea>`?
11/ Typing Effect
Did you know that you can create a typing effect with zero JavaScript?
Check this demo to see it in action, and to check the code:
codepen.io
Did you know that you can create a typing effect with zero JavaScript?
Check this demo to see it in action, and to check the code:
codepen.io
If you liked this thread, share it with your friends:
Loading suggestions...