Giando

YouTube video by Alvaro Montoro Drawing Yoda with CSS

Just shared a new video drawing with CSS. This time is Yoda (or Grogu?) in a kawaii-ish style.
youtu.be/r_FH65HpYgE?...

He looked a bit sad with the mouth like that so I flipped the mouth and make it smile :)

Live demo and source code on @codepen.io: codepen.io/alvaromontor...

#css #cssArt #html

Creating a Firework Effect with CSS Last week I created a firework effect with CSS. It is relatively simple (it only requires one HTML element per firework) and customizable (it uses CSS custom properties to customize colors, sizes, pos...

It's 4th of July, here's a throwback article on how to create a firework effect with CSS and a single HTML element (per firework)
alvaromontoro.com/blog/68002/c...

#css #html #july4 #fireworks

YouTube video by Alvaro Montoro Creating a cartoon with CSS: Venn's Summer (with commentary)

The @comicss.art cartoon for next Monday is ready (Patreon members got early access). This time, I recorded the process and shared it on my YouTube channel (and I added comments)... So if you see this post, you also get early access.
youtu.be/qhmZqHgpnmU

#css #cartoon #video #liveCoding

This 3D icons library is sooooo good! 🔥

This library has 4,000+ AI-generated 3D icons, perfect for your web, frontend, or design projects.

🔗: thiings.co

Hope this helps ✅️

Follow @rammcodes.bsky.social for more 💎

#html #css #javascript #reactjs #100daysofcode

calc-size() We can now do calculations based on the intrinsic size of an element

#css

html-css-tip-of-the-week.netlify.app/tip/calc-size/

Easier layout with margin-trim If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.

One more #CSS hack to add to your toolbox: margin-trim.

Screenshot of several color swatches in the Theme Machine

Need some colors for your next web project? I’ve got you covered. If you haven’t seen the Theme Machine, check it out! 🎨 #css #webdev

tools.keithjgrant.com/theme-machine/

A red, yellow, and black Superman logo on a blue background.

Okay, #CSS corner-shape is pretty super. No SVG, no shape() clip paths, or gradients, just some basic border-radius and you can make Superman's logo.

codepen.io/jbasoo/pen/r...

(Inspired by @amitsheen.bsky.social's @frontendmasters.com article)

Having figure match width of contained image Earlier this week, I explored a solution to center an image and caption by making the figure take on the width of the image even when the caption was longer than the image. I wanted the caption to…

Having figure match width of contained image: "I need to center an image and caption by making the figure take on the width of the image even when the caption is longer than the image and the caption should wrap if needed. I ask several #CSS wizards to weigh in." jeffbridgforth.com/having-figur...

Didn't get to do anything for this week's @codepen.io challenge yet, but here's an older demo: pure #CSS sphere of spheres codepen.io/thebabydino/...

#CodePenChallenge

Uses the spherical distribution tactic described 👇 then ensure no two spheres intersect. Also: pure CSS #3D shading!

A (more) Modern CSS Reset I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated versi...

Blog post about CSS reset piccalil.li/blog/a-more-... has a bit more wisdom about software development (and life in general).

“If something is already working for you, there’s no need to change it!”
—Andy Bell

#WebDev #CSS

Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect…

Exploring the OKLCH ecosystem and its tools: "Explore a powerful set of tools built around the OKLCH color model—accessible palettes, contrast checking, and more. Perfect for frontend developers and designers building consistent, modern UIs." #CSS evilmartians.com/chronicles/e...

Animating zooming using CSS: transform order is important… sometimes How to get the right transform animation.

CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.

Here's how it works, and how to avoid the pitfalls.

jakearchibald.com/2025/animati...

Front End Study Hall #030

Tuesday at 1pm Eastern: Front End Study Hall 030: an #IndieWeb jawn where whoever joins the hall study and work with #HTML and #CSS to unwrap troubles and elucidate web pages. Come be a part of it. Tell a friend. Click around for prior notes.
events.indieweb.org/2025/06/fron...

The future of hexagon shapes A new way to easily create hexagon shapes using corner-shape

#css

css-tip.com/hexagon/

An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine 10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.

An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine

#css #frontend

Oh hey, everyone! My name is John Henry Müller. I design things.

I just launched my fancy new website! 🎉
johnhenrymuller.com

I hope you like it!

#webdesign #ux #ui #css #nojs #fancynewwebsite

The unknown behavior of flex-wrap flex-wrap doesn't only control the wrapping of items but also affects the alignment

The unknown behavior of #CSS flex-wrap: "It transforms your flex container from a single-line to a multi-line container even if at the end you have only one flex line. This means we can use align-content to align the content." css-tip.com/flex-wrap/

YouTube video by Optimistic Web Easy CSS Tricks for Stunning Visuals - CSS Mask-Composite

CSS mask-composite is a simple trick for layering effects and creating awesome designs. It's definitely worth checking out! #css #cssmask #optimisticweb youtu.be/lbgZ1VOnskQ

YouTube video by Schalk Neethling Composing A CSS Photo Grid - Two Ways - Frontend Engineering Explained #webdevelopment

Composing A #CSS Photo Grid - Two Ways - Frontend Engineering Explained #webdevelopment

www.youtube.com/watch?v=zaxe...

You don't necessarily need to say "image of" in your alt text for users to know it's an image. Screen readers will announce that it's an image. But it can help readers to specify if it's a hand-drawn image, Polaroid, infographic, screenshot, chart, map, diagram, or so on.

My beautifully old copy of Star Wars: The Essential Guide to Vehicles and Vessels

Yeah i read scripture

CSS view(): The Function That Revolutionizes Responsive Design 🚀 Responsive design has always required media queries, calc(), and dynamic units like vw and vh. But now there's a new function that promises to simplify everything: view(). This intelligent function…

CSS and JavaScript's evolution has been super impressive (and probably daunting for newbies). The new view() function in CSS is going to be as impactful as media queries.
#webDev #webDevelopment #css
javascript.plainenglish.io/css-view-the...

YouTube video by Schalk Neethling Popover and CSS Anchor Positioning Today - Std \w Polyfill - Frontend Engineering Explained #webdev

Popover and CSS Anchor Positioning Today - Std \w Polyfill - Frontend Engineering Explained #css - featuring the amazing CSS anchor positioning polyfill by @oddbird.dev and @jamessw.com
www.youtube.com/watch?v=Mi_g...

Cascading Layouts A workshop on resilient CSS layouts

Excited about next week's CSS Layouts Workshop with everyone!

Via email someone asked: Does this workshop about building a website from scratch?

The answer is no. We'll focus on CSS skills like grid & container queries that can be applied in any context! #css

www.oddbird.net/workshops/ca...

CSS Hover Effects: 40 Engaging Animations To Try Discover 40+ CSS hover effects, from holographic cards to liquid buttons, all complete with live CodePen demos and code!

Enjoyed reading CSS Hover Effects: 40 Engaging Animations To Try, from the Prismic blog.
Check it out 👉 prismic.io/blog/css-hov...
.
.
.
#CSS #html #animation #webdesign #WebDev #creative #LearnToCode #UserExperience

YouTube video by Syntax Our CSS Tooling Stack Explained - Syntax.fm Dev Log

#css

www.youtube.com/watch?v=B5I5...

10 Ways to Improve Accessibility on Websites and Social Media - Lireo Designs My 10 tips for making your website and social media more accessible, whether you're a blogger, photographer, writer, designer, or developer.

For people just getting introduced to accessibility concepts, the number of resources can be overwhelming for people who don't know where to start. These 10 tips from Lireo Designs can be a good way to introduce your team to the basics.

www.lireo.com/10-ways-to-i...

Haaa this look right for me but I want learn how to consume the documentation and all the resources in order to be autonomous in my journey in eleventy world but this is a good start thank you !!! So much

I hope everything good 👍