CSS Weekly

@cssweekly.bsky.social

Posts

Helping you stay up to date with CSS.

🎥 YouTube: https://cssw.io/youtube
⚜️ Mastering Prettier & Stylelint: https://cssw.io/lint
🏷️ CSS Stickers https://cssw.io/stickers

Posts Replies Media

CSS Weekly #586 💥 Unleash the power of Scroll-Driven Animations" 🧐 Misconceptions About CSS Specificity 🌈 CSS Gradient Text Styles 〽️ Alternating Style Queries Featuring @bram.us, @shadeed9.bsky.social, @yuanchuan.bsky.social, @aardrian.bsky.social. cssw.io/issue-586

CSS Weekly Issue #586cssw.io Learn all about scroll-driven animations, misconceptions about specificity in CSS, how to create gradient text styles, and more.

Happy Monday, friends! 👋 I did a bit of wall climbing (first time ever) and found it quite energizing. 🧗‍♂️ What were you up to this weekend besides coding? (Pics appreciated.) 🙂

🔥 VS Code Tip 🔥 Did you know you can add section headers to the minimap of Visual Studio Code? Use "MARK:" in the comment, and the designation will be clearly visible in the minimap, which will help you quickly scan and navigate your files. #vscode

A comprehensive guide to creating intuitive context menus. Michael Villar explains how to: 🎯 Position menus 🤚 Reposition menus ⌨️ Add keyboard navigation 🪧 Give hints to the user 🛣️ Offer access to submenus 📜 Handle Content overflow cssw.io/context-menu...

Building like it's 1984: A comprehensive guide to creating intuitive context menus - Heightcssw.io

Have you ever seen a YouTube subscribe button light up when "subscribe" is mentioned in a video? This is how you can recreate this interaction. 🔥 (Link in the comments.)

CSS Weekly #585 📘 The Front End Developer/Engineer Handbook 2024 🖼️ Sliding 3D Image Frames In CSS 🔗 CSS Email Obfuscation 🙇🏿 Is CSS getting harder to learn? Featuring @una.im, @kevinpowell.bsky.social, @chriscoyier.net, @cita.bsky.social, @rachelandrew.bsky.social. cssw.io/issue-585

CSS Weekly Issue #585cssw.io Learn how to get better at CSS, create sliding 3D image frames, build clickable CSS-obfuscated email links, and more.

A guide on creating a stunning staggered CSS animation on page load. Using only: 💫 CSS Transitions 🔥 starting-style at-rule ⛔️ No CSS Animations

The reception of my latest two videos on animating Details HTML element and transitioning to "height: auto;" and "display: none;" is absolutely amazing. 🤩 Thank you all for commenting, liking, and, most of all, watching. 🙏

Learn how to animate the HTML Details/Summary disclosure widget using pure CSS. The guide covers how to: 🌘 Disclose HTML Details Shadow DOM in DevTools 🔼 Transition to "height: auto;" using calc-size() 🙈 Use transition-behavior to animate content-visibility ⛓️ Connect multiple HTML Details elements

Stoked to see my demo for the guide on transitioning to "height: auto;" using calc-size() on the front page of @codepen.io 😊

Did you know that you can* transition from “height: 0;” to “height: auto;” and “display: none;” to “display: block;” without any hacks, tricks, or JavaScript, using only new CSS features? That's precisely what I'll show you in the new video: cssw.io/transition-h...

Transition to "height: auto;" & "display: none;" Using Pure CSScssw.io Find out how to easily transition from “height: 0;” to “height: auto;” and “display: none;” to “display: block;” without any hacks, tricks, or JavaScript, us...

What's stopping you from coding like this?

Happy Monday! What are you up to this week? 🤔 I took a cheeky walk on the way to the studio—recording new YouTube and Mastering Linting videos today. 🎬

CSS Weekly #584 👾 CSS-Only Swipe-Aware Game 🫙 Interactive Guide to Container Queries 📭 Email Obfuscation Using CSS 🌓 Persisting Color Scheme Preferences Featuring incredible work by @shadeed9.bsky.social, @cita.bsky.social, @adactio.com, @bell.bz, @bram.us, & others. cssw.io/issue-584

CSS Weekly Issue #584cssw.io Learn how to create CSS-only swipe-aware game, how container queries work, how to obfuscate emails using CSS, and more.

Do you know any good use cases for `text-emphasis` other than in East Asian languages? 🤔 I've seen some tips recently that advocate using it to highlight your headlines, but for me, it just looks bad, as the spacing is character-based instead of uniform. 🤷

CSS Weekly Issue #583 🎚️ Configurable switch component 📐 Viewport-relative units: vh, dvh, lvh, svh 🛠️ Fixing Multiline Comments in VSCode 🌊 Wavy Circles with Fancy Animations Featuring @bell.bz, @dbushell.bsky.social, @scottohara.bsky.social, @jhey.bsky.social.

CSS Weekly Issue #583cssw.io Learn how to create configurable switch components, how new viewport-relative units work, how to fix broken block comments behavior in VS Code, and more.

CSS Weekly #582 Highlights: 🌎 A Global Design System 👎 Devaluation of Frontend 📃 CSS for Printing to Paper Featuring @bradfrost.bsky.social, @michelleb.bsky.social, @kyleshevlin.com, @ryanmulligan.bsky.social, @davatron5000.bsky.social, @alvaromontoro.bsky.social cssw.io/issue-582

CSS Weekly Issue #582cssw.io Learn why we need a Global Design System, why front-end work is devaluated, how to optimize your web pages for print, and more.

🌈 Quick Tip — CSS Gradient Text Styles 🌈 Learn how to easily create gradient text styles and gradient text outlines with a few lines of CSS. cssw.io/gradient-tex...

CSS Gradient Text Stylescssw.io Learn how to easily create gradient text styles and gradient text outlines with a few lines of CSS. Even though the vendor prefix is required, this is supp...

Jerónimo García shares an in-depth guide on how to pair icons and typefaces to create a consistent visual language. Your primary considerations should be: 🎯 Purpose and context ⚜️ Style and aesthetics 🪜 Scalability and adaptability cssw.io/matching-ico...

The essential guide to matching icons with typefacescssw.io A simple guide on how to pair icons and typefaces to create a consistent visual language.

🔗 A practical, hands-on guide on creating clickable CSS-obfuscated email links. (This is essentially Part 2 of my previous video, in which I explored CSS as an email obfuscation technique.) cssw.io/clickable-em...

CSS Email Obfuscation - Create a Clickable Linkcssw.io A hands-on guide on how to create clickable CSS-obfuscated email links with a bit of JavaScript.🔗 LinksEmail Obfuscation Using CSS: https://youtu.be/w0rQwOS...

What are some of the web-dev projects, frameworks, libraries, tools, or apps that were widely used 10+ years ago but are now gone or completely irrelevant? 🤔 I'll start: 🧭 Compass 🦄 jQuery Do you remember any more? 🙂

🎉 The align-content property for block layouts is now part of Baseline, meaning it's supported by all major browsers and ready to use in production: ✅ Chrome 123 ✅ Edge 123 ✅ Firefox 125 ✅ Safari 17.4 Have you already tried it out?

CSS Weekly #581 🏘️ CSS Variable Groups 💭 Modern Tooltips and Speech Bubbles 🪧 :is() and :where() Pseudo-Classes 🚥 HTML Switch Control Featuring @lea.verou.me, @css-only.dev, @utilitybend.bsky.social, @bell.bz. cssw.io/issue-581

CSS Weekly Issue #581cssw.io Learn how :is() and :where() work, to create tooltips and speech bubbles, what are CSS Variable Groups, and more.

🔥 The new module of my Mastering Linting course, Stylelint Basics, is coming in 3, 2, 1... Actually, sometime in the next hour or so. 🙂

Did you know that CSS is one of the most effective Email Obfuscation techniques? 🤖 Hat-tip to Spencer Mortensen for the fantastic research on which this video is based. cssw.io/css-email-ob...

Email Obfuscation Using CSScssw.io Learn how email obfuscation works and why you should obfuscate your emails using CSS.Email obfuscation by Spencer Mortensen: https://spencermortensen.com/art...

Horizontal rule elements (

) in select elements () are now widely supported in desktop browsers: ✅ Chrome 119 ✅ Safari 17 ✅ Firefox 122 ⛔️ Safari on iOS Here's the quick-tip I created a while ago where I show how it works: cssw.io/hr-in-select

🔥 VS Code Tip 🔥 This is how you can fix strange block comments behavior in Visual Studio Code when toggling a comment adds a new comment instead of uncommenting the focused one. (Inspired by @wesbos.com' question. 🙏) cssw.io/vscode-block...

VS Code Tips - Fix Multiline Comments in CSS/HTMLcssw.io Visual Studio Code tip showing you how to fix broken block comments behavior in CSS/HTML when toggling a comment adds a new comment instead of uncommenting t...

A quick tip outlining how to easily center any content vertically (including block-level elements) in CSS using the align-content property. youtube.com/shorts/6eW0l... — #css #cssweekly #webdeveloper #webdevelopment #webdev #csstricks #htmlcss #learncss #csstips #csstutorial

Center ANYTHING in CSS With This Line of Code #css #csstipsyoutube.com A quick tip outlining how to easily center any content vertically (including block-level elements) in CSS using the align-content property.Subscribe to CSS W...

Achievement Unlocked 🏆 After being referred to as @wesbos.com for creating a CSS Stickers pack, I’ve now been referred to as @kevinpowell.bsky.social, I guess because I’m talking about CSS on YouTube. 🙂 Well, if my work reminds you of Wes’ and Kevin’s brilliance, I’m taking these as compliments. 🙏

Happy Monday, friends 👋 As Francesco Ciulla would say, let's crush this week! 🔥🔥🔥 I'm recording content for new YouTube videos and final lessons for my Mastering Linting course. What are you up to today and this week? 🙂