Day 5: Mastering CSS Animation Learnt from @KevinJPowell pic.twitter.com/oJIA7OnLT3
If you accept money anywhere online, you might be missing out if these attributes aren't in order pic.twitter.com/EAQ0ObJK5g
A carousel component in 20 lines of modern CSS. 😱 pic.twitter.com/EyeA5bnAVZ
Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself pic.twitter.com/noFimkzqtm x.com/wesbos/status/…
Is preparing buttons for proper styling a chore or do you already know `all: unset;` ? pic.twitter.com/GrEChdPzql
A short thread of "TIL: You can..." featuring underrated but powerful HTML/CSS tips. 🧵 💡1/5: HTML buttons can submit forms without being inside them! Use the form attribute to link a button to a form by ID. Great for flexible layouts and improved UX! x.com/i/web/status/1… pic.twitter.com/B87URFECie
💡 TIL: You can set an accent color in CSS and it magically updates across your HTML user-interface controls! Just one line: accent-color: #55efc4 and your whole app gets a color refresh! pic.twitter.com/sFHY23nPd2
Container queries are cross-browser supported now for over a year. If you're still worried about not supporting browsers, you could adopt a fallback solution via custom elements. 🫣👇 web.dev/blog/how-to-us… pic.twitter.com/aCMJho9rzl
🔥 It feels like magic, but the <details> element will automatically expand when a search result is hidden within. It’s so hard to get this stuff right with <div>s and JS. The platform is awesome. 😄 pic.twitter.com/RZCN8hGAF0
The subtle differences when creating a squircle 🧐 Use a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇 pic.twitter.com/OoSBRjJAcI x.com/jh3yy/status/1…
Once again I’m in the same #webcomponents crossroads I’ve been many times before. My component (an editable <color-swatch> if you need to know) has an <input>. Ideally the input should be styled like other inputs on the page and be able to participate in form submission.… x.com/i/web/status/1…
limitations of web components
Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥 .success { --c: green; } aside { background: oklch(from var(--c) calc(l * 0.75) c h / 0.5); color: oklch(from var(--c) calc(l * 1.5) c h); } Magic! ✨ pic.twitter.com/uKC6wTkrUo x.com/JohnPhamous/st…
This has been my go-to monochrome palette for some time 💯 Has some great contrast between light/dark mode Bookmark for later 🤙 pic.twitter.com/ec1lWytvwh x.com/rehanxahmed/st…
Here's a quick Friday or weekend mini-project for you: why don't you spend a few mins to add Speculation Rules to your blog (or site) to quick speed it up? Simply adding this script tag to your pages will allow intra-site links to prerender as soon as you hover on them. 🧵 1/6 pic.twitter.com/FT8yAINByr
If you want to apply the global styles of the document to a shadowRoot, you can do it with this pic.twitter.com/dUSxmAyCQB
anchor-tool.com, now with a visualizer for the inset-modified containing block! pic.twitter.com/aqlMSHEn0b
With a bit of CSS, you can build a simple color picker out of a collection of radio buttons. No JS needed. Most of the time, our projects don't need a full-fledged color picker where users can craft any possible color. pic.twitter.com/FaINkg8gs5
I was fiddling around with css scroll animations a bit, but didn't know where to start... these are great examples to get started! ❤️ pic.twitter.com/ETmBqt27s1
Dune: Part Two (2024) - “That’s not hope!”📄 pic.twitter.com/pTjWBKIEN3
Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; } x.com/i/web/status/1… pic.twitter.com/zGhaobd9Mq
They're finally here: Zero-JS View Transitions Chrome just shipped support for native, app-like animations between page navigation. Just CSS & HTML, no JS required! Try them today with built-in Astro support on day 1. astro.build/blog/future-of…
We simply can't get enough of these micro animations. pic.twitter.com/LRKHf44xFu
Find out how to fully 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 ⛓️… x.com/i/web/status/1… pic.twitter.com/LQU02OXamb
Animated sign-in disclosure with only HTML and CSS using the Popover API 🤙 <button popovertarget="form">Sign In</button> <div popover="auto" id="form"></div> Use @starting-style to transition the open/close state pic.twitter.com/9vlWshlXpQ x.com/nitishkmrk/sta…
Am I the only one who tries as hard as possible to avoid SDKs? If I'm just going to hit a handful of your APIs, I prefer to hit the REST endpoints directly, thank you. Drastically simplifies things in these situations.
great little collection of pure html/css loading spinners you can just copy and paste. bookmarked for later! loading.io/css/ pic.twitter.com/yLQItsN1yR
To achieve animation theoretically I can `::highlight(h) { color: var(--c) }` and provide `--c: color-mix(in srgb, currentColor, transparent var(--r))`, and then set @property --r to be percentage and animate it from 0% to 100%. Sadly there seems to be a bug with color-mix &… x.com/i/web/status/1…
I'm obsessed with playful hover effects ☀️ → bradleyziffer.com pic.twitter.com/PrPQTEWwtc
Just moved my @solid_js Popover component to CSS Anchor Positioning: github.com/LexSwed/nouvet… It wasn't easy due to the lack of documentation and some bugs (like inset), but boi I'm so happy see this without any JS loaded. Thanks a lot @Una and @argyleink for the inspiration! pic.twitter.com/t21bLv4XCQ