#Development
Ship-shape generators · Create and edit different CSS shape() types https://ilo.im/166ix8

_____
#Generator #Shapes #CssShapes #Browser #WebDev #Frontend #CSS

ship-shape.win

Generate and edit CSS shape() values, for use in clip-path and other properties.

A little thing I made on @codepen.io: breathing with `shape()`
https://codepen.io/thebabydino/pen/vEEqMWo

`shape()` is supported in Chrome 135+ and Safari 18.4+.

Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.

#CSS #clipPath #cssClipPath #animation #cssShapes #code #coding #clipping #web #dev #webDevelopment #webDev #frontend

Oh, wow, an article urging us to "take a new look" at CSS shapes, because apparently, reviewing rectangles and circles is the hottest trend of 2018. 🙄🔄 Clearly, the web needed yet another dive into the thrilling world of shapes, because who doesn't love spending 12 minutes re-learning how to put text around a triangle? 🎉📐
https://www.smashingmagazine.com/2018/09/css-shapes/ #CSSShapes #WebDesign #Trends #DeveloperHumor #CreativeCoding #HackerNews #ngated
Take A New Look At CSS Shapes — Smashing Magazine

This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, Rachel Andrew will take a closer look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.

Smashing Magazine
Take A New Look At CSS Shapes — Smashing Magazine

This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, Rachel Andrew will take a closer look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.

Smashing Magazine

A little something combining #CSS shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!

https://codepen.io/thebabydino/full/zYJKRyq

Also an entry for this week's #CodePenChallenge.

#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry

CSS diagonal scroll

A little something combining CSS shapes, trigonometry, plus scroll-driven animations. --- If the work I've been putting out since early 2012 has help...

🟡 CSS Shapes
by T. Afif @ChallengesCss
The Ultimate Collection of CSS-only Shapes
Pure CSS shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!
#css #webdev #CSSshapes #ShapesOnlyCSS

https://css-shape.com/

The Ultimate CSS Shapes Collection

The modern way to create CSS shapes using a minimal code and a single element. A collection of CSS-only shapes created by Temani Afif.

#Development #Introductions
A guide to CSS shapes and offset-path · CSS offset-path will be significantly enhanced in Chrome, Firefox, and Safari https://ilo.im/13jcjd

_____
#Animation #Motion #Positioning #CssOffsetPath #CssShapes #WebDevelopment #WebDev #Frontend #HTML #CSS #SVG

A guide to CSS shapes and offset-path

Big improvements are coming to CSS Motion Path. Use offset-path and offset-distance to move elements along a path.

#Development #Techniques
Improving CSS Shapes with trigonometric functions · We now have a lot of ways to work with CSS Shapes https://ilo.im/1239qq · by @DanCWilson

_____
#Trigonometry #WebDevelopment #WebDev #Frontend #CSS #CssShapes #ClipPath

Improving CSS Shapes with Trigonometric Functions

CSS Trig Functions enable interesting options for CSS shapes, clip paths, and more.