Web Development
131K subscribers
571 photos
58 videos
541 files
110 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript, React, Node.js

💳 Paid ads: https://telega.io/c/Webdev_Trainings
Download Telegram
💻 Using box shadow in a way you might not have expected

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
👍3817👏6😁1
🔰 Some useful CSS shortcuts!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33👍128🥰2👏2
👍15634😁27❤‍🔥15👌10
🔰 display: contents in CSS

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👍142
🔅 Learning Regular Expressions

🌐 Author: Kevin Skoglund
🔰 Level: Advanced

Duration: 3h 18m

🌀 Learn to use regular expressions to define complex text patterns that can be used for powerful search and replace techniques.


📗 Topics: Regular Expressions

📤 Join Webdev Training for more courses
Please open Telegram to view this post
VIEW IN TELEGRAM
👍226
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42
🔰 Drop Cap In CSS

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
👍2212🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
🔰 Adding custom cursors in CSS! 🔥

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
32👍27🔥3