I’m fortunate to have worked with a lot of amazing designers over the years. Some were curious about designing in the browser with basic #HTML and #CSS, but weren’t sure where to begin, or felt discouraged by a lot of developer-centric content.
This is the advice I gave that seemed to resonate most: https://cloudfour.com/thinks/designing-in-the-browser-five-tips-for-beginners/
How does the z-order stack behave with Shadow DOM? Is it all above or below the normal DOM components or are they intermixed somehow? For instance, if you launch a full screen modal from the shadow dom, does it behave “properly” in terms of z-index? #css
Have you ever wanted to have gap-rules in your #CSS Grid layouts, similar to column-rules? The Gap Decorations specification has its first public working draft! https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/
(“First public working draft” means it’s still being worked on and things in it might change, but the work has been made public and is now part of the historical record. This is a good time for the community [including YOU!] to read it and give feedback. Do **NOT** expect implementations right away.)
#Development #Introductions
The customizable select (part two) · Potions, anchoring, and radial shenanigans in CSS https://ilo.im/163bxd
_____
#SelectElement #Form #AnchorPositioning #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend #HTML #CSS
JSX-Syntax with Webcomponents.
https://positive-intentions.com/blog/dim-functional-webcomponents
I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.
And here is the code to generate any polygon shape with rounded corners!
https://css-tip.com/rounded-polygon/
Update the variables then get your code (There is another variation using CSS variables as well).
This weeks CodePen challenge got me learning about glowing fungi, jellyfish, and fireflies.
Amazingly CSS can animate along a SVG path and I am so happy to have learnt about that. 
I thought for sure I would need JS for the fireflies.
Yet more HTML brainteasers for you to argue over!
How do you feel about newlines in attribute values?
For example:
`<img alt="A kitten.
A puppy.">`
Or:
`<div class="cat
dog
horse">`
Is there ever a time when a newline *must not* be replaced by a space?
Focus front-end à MiXiT 2025 !
Responsive CSS version 2025
Signaux & réactivité démystifiés
Requête HTTP, côté dev
JavaScript : plus léger, plus propre
Jetpack Compose en mission chrono
Astro, le framework qui va vous envoyer dans l’espace
Du code, des workshops, des talks funs et utiles !
Pour le programme complet : https://mixitconf.org/2025?agenda=true
#Development #Introductions
The CSS shape() function · It brings responsive shapes to modern CSS https://ilo.im/163c8b
_____
#ModernCSS #Shapes #CssCalc #CssUnits #Design #VisualDesign #WebDesign #WebDev #Frontend #CSS
While I'm not a huge fan of the verbosity of the syntax* here, this is very cool, and the basic demo is surprisingly impressive: https://webkit.org/blog/16794/the-css-shape-function/
* Though to be fair: a) I don't remember all of #SVG's commands, and b) this does feel rather expressive and #CSS-y (looking at you, `radial-gradient(circle at center in hsl longer hue, red, blue)`!)
Does anyone have a resource where I can learn the basics of CSS grid because this is MDN and I can't even
CSS Tip!
Shapes with rounded corners are a nightmare in CSS but it's now easy with the new shape() function!
Let's start with a classic: The Hexagon
https://css-tip.com/rounded-hexagon/
Yes, you can animate the radius and rotate the shape. Modern CSS is cool!
Do you want another polygon shape? I am cooking a generic code to create all of them.
All the stuff you needed to know as a front-end developer in 2015 (HTML5, all the CSS modules, ARIA, vanilla JavaScript, and how to apply it all in a responsive, performant, accessible, progessively-enhanced manner). All that still applies. And now there's awesome stuff like this as well: https://webkit.org/blog/16794/the-css-shape-function/
Mind blown.
(And if your job is visual design rather than coding, you still need to know that stuff too.)
Prismic.io has published a collection of lists for many types of css/javascript/svg driven animations to enhance your web apps' user experience. Each example includes real-world use cases and clear code examples in the appropriate languages.
The collection includes:
1. Text Animations
2. Hover Effects
3. Button Animations
4. Background Effects, and
5. Image Effects
"CSS Animation Collection: 150+ Examples & Code"
I'm currently reading John Green's book and I'm really enjoying it... so I took a stab at recreating the cover with a CSS twist.
I love looking at people's website source code, especially when I stumble across cool things like this:
view-source:https://www.write-on.org/
We're giving away a free ticket to the CSS Layout Workshop. To be entered in the drawing, comment below with…
- A question you have about CSS layout
- Or a fun demo, trick, or snippet of CSS
The winner will be announced on Friday, April 18!
I had to write 3 tiny new CSS classes this morning. The font size wasn't being reflected on render. Then I remembered !important....
I think I'm a front end developer now.
