Box shadows in CSS can be layered. You can apply multiple box shadows for the same element. This is generally used for a rich and realistic box shadow, but what's stopping us hacking this 🤭
▪️ Here we create a box shadow with 0 blur and some offset to create a duplicate layer
▪️ Then we create a similar layer but a pixel more of spread, to create a pseudo border
▪️ Finally another actual box shadow layer
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38❤18👏7😁1
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥35👍13❤9🥰2👏2
These are ways to hide elements in different ways, affecting visibility, layout, or accessibility.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍14❤2
🔅 Learning Regular Expressions
🌐 Author: Kevin Skoglund
🔰 Level: Advanced
⏰ Duration: 3h 18m
📗 Topics: Regular Expressions
📤 Join Webdev Training for more courses
🌀 Learn to use regular expressions to define complex text patterns that can be used for powerful search and replace techniques.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3
Drop cap is a typography technique where the first letter of a new chapter is dropped to occupy multiple lines. You may be familiar with this through books!
🔥 In CSS, this can be achieved through the initial-letter property, with a value indicating the number of lines to drop the character to
This property works only inside the ::first-letter pseudo element (and some other exceptions)
This also supports a multi value syntax of the format initial-letter: 3 2; where 2 indicated to have the baseline at line 2 (leave a gap of one line)
⚠️ This is not widely supported and required a vendor prefix to work in all browsers
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤13🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
The cursor property in CSS supports providing simple values, like 'pointer', for predefined cursors.
Or you can even plug in your own cursors!
This would look great in games, or special applications like spreadsheets, video editors etc.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤33👍28🔥3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤14🔥7
🔅 Figma: Designing with Variables and Conditionals
🌐 Author: Joseph Labrecque
🔰 Level: Intermediate
⏰ Duration: 1h 1m
📗 Topics: Figma
📤 Join Webdev Training for more courses
🌀 Learn how to design with flexibility using variables and conditionals in the collaborative design tool Figma.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤3🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥1