1. 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);
2. Center anything
Easily center anything, horizontally and vertically, with 3 lines of CSS:
3. Smooth scrolling
Smooth scrolling with zero JavaScript, with just one line of CSS.
4. Typing Effect
Did you know that you can create a typing effect with zero JavaScript?
You can change the color of the text input cursor.
7. CSS Scroll Snap
You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:
8. Cursors
Did you know that you can use your own image, or even emoji as a cursor?
9. Truncate text
Truncate text with plain CSS.
10. The `::selection` CSS pseudo-element
The `::selection` CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
11. Use the `inset` CSS property as a shorthand for `top`, `right`, `bottom`, `left`:
12. Anything resizable
Did you know that you can make any element resizable, just like `<textarea>`?
13. Use the `gap` CSS property to set the gaps (gutters) between rows and columns.
14. Use the `background-clip` property to create beautiful headlines.
15. Dynamic Tooltips
Create dynamic CSS-only tooltips, using the `attr()` CSS function.
Did you find this useful?
Retweet the 1st tweet and help others discover it.
Happy coding!
If you're learning HTML, CSS or JavaScript be sure to follow me and never miss tips like this.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
There are 26 modules to explore, all created by Google trainers, and packed with practical exercises and real-world examples to help you turn knowledge into action.
Using `console.log()` for JavaScript debugging is the most common practice. But, there is more…
🧵
1/ The most common Console methods:
console.log() – For general output of logging information.
console. info() – Informative logging.
console.debug() – A message to the console with the log level debug.
console.warn() – A warning message.
console.error() – An error message.
2/ Custom CSS styles for a console.log():
The `console.log` output can be styled in DevTools using the CSS format specifier.
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: