Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤15🥰2🔥1😁1
A thorough, complete guide/reference covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥8❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Every coder’s basic need 👀
#meme
#meme
🤣173😁17👍14❤12🤩5
You can use counter() to create fancy step-by-step instructions or multi-level nested lists with custom numbering schemes.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤5
Forwarded from Linkedin Learning
Final Results
51%
💻 Programming and Coding Tutorials (Java, Python, C, C++, C#,...)
26%
🎨 Design Tutorials (Photoshop, Adobe Illustrator, After Effects, Figma, Canva...)
27%
📊 Finance and Business Tools (Excel, Power BI, Google Sheets, QuickBooks, SAP...)
14%
🏋️ Health and Fitness Tutorials (Workouts, Nutrition, Meditation, Yoga...)
25%
📚 English Language Learning (Grammar, Vocabulary, Speaking, Writing Skills...)
👍74👏8🤡7❤6🔥2
The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers.
Browser Support:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27❤8
To create a glass effect (also known as a glassmorphism effect) in CSS, you can use a combination of properties including background, backdrop-filter, box-shadow, and border.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤57👍19🔥8👎1😁1
Linkedin Learning
📢 Announcement! 📢
🎉 The votes are in, and the winner is: Programming and Coding Tutorials Channel! 💻✨
🚀 We’ll be creating this channel as soon as possible, so stay tuned and stay connected for updates!
🌟 Thank you all for your participation and support! 🙌
🎉 The votes are in, and the winner is: Programming and Coding Tutorials Channel! 💻✨
🚀 We’ll be creating this channel as soon as possible, so stay tuned and stay connected for updates!
🌟 Thank you all for your participation and support! 🙌
👍72🔥14🤡12❤7🥴3
Lets you create partial or full-page visuals with elements animating into and within the viewport, also known as scrollytelling, for dynamic visual impact.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍67❤16👎4
Recently, CSS has supported "logical" direction based properties for margin, padding, border, etc!
Previous to this, we were able to define properties based on physical directions like left, right, etc. This was a problem when different writing modes come into play, such as Arabic which is written from right to left, or traditional Chinese, Japanese, which are written from top to bottom.
👉 These new properties automatically adjust to the writing mode without the need for media queries.
"block" indicates main axis of writing mode (top to bottom for English)
"inline" indicates the cross axis of the writing mode (left to right for English)
You can combine this to create different properties for margin, padding, border, size and inset
👉 margin-block-end
👉 padding-inline
👉 border-inline-start
👉 inline-size
👉 block-size
✨ This also has the benefit that it provides shorthands like margin-inline which sets both left and right margin
Previous to this, we were able to define properties based on physical directions like left, right, etc. This was a problem when different writing modes come into play, such as Arabic which is written from right to left, or traditional Chinese, Japanese, which are written from top to bottom.
👉 These new properties automatically adjust to the writing mode without the need for media queries.
"block" indicates main axis of writing mode (top to bottom for English)
"inline" indicates the cross axis of the writing mode (left to right for English)
You can combine this to create different properties for margin, padding, border, size and inset
👉 margin-block-end
👉 padding-inline
👉 border-inline-start
👉 inline-size
👉 block-size
✨ This also has the benefit that it provides shorthands like margin-inline which sets both left and right margin
❤30👍20👎1🔥1
An idea I stole from MDN website 😛 how to setup a fade out for long text in article cards, etc
✨ The trick is to create a psuedo element that is placed in a manner to cover only the last line, and add a horizontal gradient, from full transparent to background color (white)
💡 You could also use CSS custom properties to avoid referring to 1.5rem multiple times
✨ The trick is to create a psuedo element that is placed in a manner to cover only the last line, and add a horizontal gradient, from full transparent to background color (white)
💡 You could also use CSS custom properties to avoid referring to 1.5rem multiple times
❤41👍20🤣8🌚6🔥2
Here is a simple implementation for a shimmering badge to grab the attention of your audience!
⚠️ Although not mentioned in this post, it is important to respect user's preferences regarding animations and enable this only when they are okay with animations. You can check for this using the prefers reduced motion media queries.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31❤14👏1