Discussion
Loading...

#Tag

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Roni Rolle Laukkarinen boosted
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 months ago

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

Your browser does not support the video tag.
This video cannot be previewed
Open original
Recording of the desired layout for a post on a recipe blog at various viewports. The image illustrating the post is a full-bleed element, the warning is a breakout element and the header is a breakout element with a full-bleed background.
  • Copy link
  • Flag this post
  • Block
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 months ago

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

Your browser does not support the video tag.
This video cannot be previewed
Open original
Recording of the desired layout for a post on a recipe blog at various viewports. The image illustrating the post is a full-bleed element, the warning is a breakout element and the header is a breakout element with a full-bleed background.
  • Copy link
  • Flag this post
  • Block
Roni Rolle Laukkarinen boosted
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 7 months ago

2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.

#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

Your browser does not support the video tag.
This video cannot be previewed
Open original
Demo illustrating the feColorMatrix used to swap two individual RGB channels. Offers multiple comparison and test image options. Viewport adaptive.
  • Copy link
  • Flag this post
  • Block
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 7 months ago

2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.

#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

Your browser does not support the video tag.
This video cannot be previewed
Open original
Demo illustrating the feColorMatrix used to swap two individual RGB channels. Offers multiple comparison and test image options. Viewport adaptive.
  • Copy link
  • Flag this post
  • Block
Roni Rolle Laukkarinen boosted
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 7 months ago

If a grid has n columns, it has n - 1 gaps in between them. Enjoy this interactive @codepen demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

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

Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
  • Copy link
  • Flag this post
  • Block
Ana Tudor 🐯
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 7 months ago

If a grid has n columns, it has n - 1 gaps in between them. Enjoy this interactive @codepen demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

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

Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
Screenshot of linked demo. Shows items distributed on 5 columns, with 4 gaps highlighted between them.
  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.7 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct