Lmst

The tiny details make the difference - check out those roundings in the cards demo!

Even cooler: the shape depends on the size of the sibling it wraps around, no magic numbers. If we need the shape to grow (for ex if we want it to have more content), there's no need to change any clip-path or mask.

#CSS #SVG #filter #svgFilter #cssSubgrid #cssLayout #cssGrid

Screenshot highlighting the card corner roundings around their round and pill-shaped siblings.

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

Screenshot of animated 3D carousel, where the items are placed on the inside of a cylinder approximation.

Screenshot of light blue to dark blue top to bottom gradient with a pixelated grain.

Screenshot showing cards smoothly wrapping around circular/ pill shaped elements.

#Development #Previews
When will CSS Grid Lanes arrive? · “It’s going to arrive sooner than you think.” https://ilo.im/16a21t

_____
#ModernCSS #CssGrid #Layout #Masonry #Polyfill #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS

RE: https://mastodon.social/@anatudor/115934384628757666

This is the thing that brought me to this question, live demo on @codepen: https://codepen.io/thebabydino/pen/XJKpYmr

#CSS #cssLayout #cssGrid #code #grid #web #dev #webDev #webDevelopment #coding #frontend

Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg

Just scroll-driven animation magic 🪄✨ - no other tricks.

#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout

This is what I see browsers actually doing: what I want in my simple, no wrap use case.

Slightly different things in the hypothetical case.

Chrome, Firefox, Epiphany below.

Also, please don't make fun of my browser themes. I'm a visual person, so I use themes that visually differentiate one browser from another.

#CSS #cssGrid #cssLayout

Live demo on @codepen https://codepen.io/thebabydino/pen/WbxpKPQ

#CSS #SVG #filter #cssLayout #cssGrid #cssSubgrid #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend

Demo screenshot. Shows cards with smooth roundings around buttons.

#Development #Techniques
Accessible faux-nested interactive controls · How to solve a tricky accessibility problem https://ilo.im/169v7j

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #ContainerQueries

#Development #Previews
New Safari developer tools · Safari’s Grid Inspector adds support for CSS ‘grid-lanes’ https://ilo.im/169url

_____
#ModernCSS #CssGrid #CssFlexbox #Masonry #Safari #Browser #DevTools #WebDev #Frontend #CSS

New Safari developer tools provide insight into CSS Grid Lanes

https://webkit.org/blog/17746/new-safari-developer-tools-provide-insight-into-css-grid-lanes/

#HackerNews #SafariDeveloperTools #CSSGrid #Lanes #WebDevelopment #WebKit #FrontEndDevelopment

How to use wa-grid with Vue

Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

Web Awesome wants a basic grid to look like this:

<div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

CodePen Embed Fallback

The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

CodePen Embed Fallback

Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

CodePen Embed Fallback

Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

CodePen Embed Fallback

The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

#CSSGrid #displayGrid #VueJs #WebAwesome

So this got picked 🌟

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #svgFilter #frontend #coding #web #dev #webDev #webDevelopment #code

Screenshot of notification saying "CodePen picked your Pen Concave rounding shape depending on sibling content reflow!"

Wake up, wake up, wake up!

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published a massive post about an improved technique for flexible irregular shapes.

❇️ https://ko-fi.com/post/New-year-new-technique-S6S21RHL27

❇️ https://www.patreon.com/posts/new-year-new-147448951

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #containerQueryUnits #code #container #svgFilter #coding #frontend #web #dev #webDev #webDevelopment

A square image with cutouts depending on the dimensions of corner elements, dimensions that in turn depend on how the text in those corner elements reflows at different viewports.

Stepped shape with rounded corners on the right, step height depending on the height of the elements on the left, whose height is given by their content and how it wraps at different viewports.

Irregular shaped image with both convex & concave roundings. Shape depends on the dimensions and aspect ratio of other elements, how they scale/ wrap as the viewport changes.

Three cards wrap around buttons of different sizes in the bottom right corner. All corners of the card shapes, whether convex or concave, are rounded.

#Development #Techniques
Keeping CSS Grid simple · What to do when CSS Grid feels complex https://ilo.im/169j11

_____
#Layout #CssGrid #Browser #WebDev #Frontend #CSS

Super simple 🦌 profile cards, content aligned with subgrid - all essential layout in just 6 #CSS declarations!

Check it out on @codepen https://codepen.io/thebabydino/pen/gbMPXde

#cssLayout #cssGrid #cssSubgrid #code #web #dev #webDev #webDevelopment #coding #frontend

Demo screenshot with DevTools grid overlays on top.

Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇

Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR

#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend

#Development #Fun
VoxCSS · A CSS voxel engine that renders HTML cuboids https://ilo.im/1695zn

_____
#CssGrid #3D #Voxels #Layoutit #Frameworks #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Fun
Happy New Year! · Who said 2026 is only black and white? https://ilo.im/169j4x

_____
#Animation #CssGrid #CssCalc #CustomProperties #Design #WebDesign #WebDev #Frontend #HTML #CSS

Fit an integer number of columns of a certain minimum width within parent, overflow the rest - live on @codepen https://codepen.io/thebabydino/pen/EaPKmRq

Details on technique in this public Ko-fi post https://ko-fi.com/Post/Fit-an-integer-number-of-equal-columns-overflow-t-I2I81M09YY - if this helps you in any way, please remember praise doesn't keep me afloat financially... but you can! And consider supporting my work by becoming a monthly supporter or with a one time tip.

#CSS #grid #cssGrid #code #coding #web #dev #webDev #webDevelopment #frontend #cssLayout #layout

Screenshot of various cases of linked demo. Shows the grid parent outlined in red while the grid items are outlined in teal. There is always an integer number of items that fit within the parent's content-box width. The rest, faded out, can be seen overflowing on the right side of the parent.

#Development #Announcements
Introducing CSS ‘grid-lanes’ · The future of masonry layouts on the web https://ilo.im/169b9q

_____
#ModernCSS #CssGrid #Layout #Masonry #W3C #Safari #Browser #WebDev #Frontend #CSS

#CSSGrid

Client Info