Lmst

#cssGrid

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/

It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!

#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries

Screenshot collage, showing the desired result in two stages. First, on the left we have the base case with the non-square images being padded with a blurred version of themselves up to a square along the axis of their shorter side. Second, on the right, we have an extra touch, the non-square images fade smoothly into their blurred copy on the sides.

This interactive guide to #CSSgrid is awesome. Allows even me (a real CSS n00b) to undertand it. Lovely! https://www.joshwcomeau.com/css/interactive-guide-to-grid/

#Development #Examples
Brand new layouts with CSS subgrid · “Subgrid unlocks exciting new layout possibilities.” https://ilo.im/168p12

_____
#CssGrid #CssSubgrid #Layouts #Grids #Browser #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Building a multi-stage timetable · How modern CSS powers a cutting-edge layout https://ilo.im/168i5y

_____
#ModernCSS #CssGrid #CssSubgrid #ScrollDrivenAnimations #Calendar #Browser #WebDev #Frontend #HTML #CSS

#Development #Generators
Layoutit Terra · A terrain generator powered by HTML/CSS https://ilo.im/167vde

_____
#3D #Landscapes #Terrains #Playgrounds #Games #WebDev #Frontend #HTML #CSS #CssGrid

Concave rounding header. Shape on the right depends on content on the left. Real transparency. Using #CSS subgrid and #SVG filters.

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

How would you do this? Try to think about it before checking my solution!

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

Screenshot. Shows a page with a header having on the right and image shaped in steps depending on the size of the content on the left. The steps are rounded at both the convex and concave corners.

#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic problem https://ilo.im/1682wb

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

Auch eine deutsche Version ist wie immer verfügbar: ich habe einen neuen Artikel verfasst! Er beschreibt, wie man ein CSS Grid erstellt, das ein klassisches mehrspaltiges Raster (z. B. 12 Spalten) mit Layout-Breakouts (Full Bleed) kombiniert.
CodePen-Demos des finalen Layouts und zwei Vorversionen sind im Tutorial verlinkt.
Ich freue mich sehr über Kritik!

#frontend #css #cssGrid #gridLayout #cssLayout #webDev

https://www.sebkln.de/tutorials/css-layout-breakout-mit-multi-column-grid/

I wrote a new article! It explains how to create a CSS Grid that combines a classic multi-column grid (e.g. 12 columns) with Layout Breakouts (Full Bleed positioning). Allows for flexible alignment of grid items.
CodePen demos for the final layout and two pre-versions are linked in the tutorial. Yes, there's a tl;dr. 😄
I am very interested in your feedback!

#frontend #css #cssGrid #gridLayout #cssLayout #webDev

https://www.sebkln.de/en/tutorials/css-layout-breakout-with-multi-column-grid/

Real transparency behind text/ around scrollable image. Shape with both convex and concave roundings changes as the text reflows. No JS, text isn't split into a span per line.

Can you figure out how to do this before checking out my solution? https://www.reddit.com/r/css/comments/1ojp1da/comment/nm589sd/

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

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

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

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

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

Screenshot. Shows 20 equally sized items arranged in half a circle (from 12 o'clock to 6 o'clock) on the left viewport side. The very first touches the left and top viewport edges. The very last touches the left and bottom viewport edges. There is a little gap in between them, exact same gap between all of them.

#Development #Techniques
Tabs with ‘details’, grid, and subgrid · A modern HTML/CSS approach using no hacks https://ilo.im/167ye4

_____
#HtmlDetails #CssGrid #CssSubgrid #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

#Development #Techniques
Section layouts · How modern CSS can make them more dynamic https://ilo.im/167vol

_____
#ModernCSS #CssGrid #ContainerQueries #CssClamp #Layouts #Typography #Browser #WebDev #Frontend #CSS

𝗙𝗿𝗲𝗲 𝘃𝗶𝗱𝗲𝗼 𝘀𝗲𝗿𝗶𝗲𝘀 𝘁𝗼 𝗹𝗲𝗮𝗿𝗻 𝗖𝗦𝗦 𝗚𝗿𝗶𝗱:

#Videos #Courses #CSSGrid

https://thewhale.cc/posts/free-video-series-to-learn-css-grid

Learn CSS Grid with 25 online videos (4 hours) recorded by Wes Bos to learn from fundamentals to real examples.

Wenn alle Online-Shops gleich aussehen, verlieren sie ihre Seele. Wie Design-Systeme mit Figma, Storybook, CSS-Grid und Design-Tokens helfen, Individualität in Shopify & Co. zurückzubringen.

https://polente.de/2025/10/20/wenn-shops-ihre-seele-verlieren/

Simple layout base https://codepen.io/thebabydino/pen/ZYQJWRd

A little start with the basics @codepen demo.

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