CSS Animation – Create Stunning Isometric Effects using Scaling and Translation Techniques
https://pyxo.me/a75211 #pyxofy #cssanimation #codenewbie

CSS Animation – Create Stunning Isometric Effects using Scaling and Translation Techniques
https://pyxo.me/a75211 #pyxofy #cssanimation #codenewbie

#100DaysOfCode day 22:
Haven't updated thin for a few days. Not much coding, looked a little on a tutorial about #CSSAnimation, but I decided to take care of myself instead of thinking about #code and #math.

#HTML #CSS #JavaScript #WebDev

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

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

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

Nice to see this ancient teaser page I put together for a conference is still pretty much working in browsers

https://thewebis.hop.ie/teaser/

#cssanimation #macplus

The hues darken waveringly, like vision when eyelids inch together before sleep. Then, searing bright flashes. Their gaze connected with mine. Their mirthful eyelids framed entreating green irises. They held eye contact, innervating my body, skin to bone. #poem #love #passion #cssanimation

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

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

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).

Live on @codepen https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100

#CSS #3D #filter #cssFilter #animation #cssAnimation #code #coding #frontend #web #dev #webDev #webDevelopment #CodePen

CSS Animation – Isometric Cubes with Move and Text Glow Animation Effects
https://pyxo.me/35ad11
#pyxofy #cssanimation #codenewbie

CSS Animation – Isometric Cubes with Move and Text Glow Animation Effects
https://pyxo.me/35ad11 #pyxofy #cssanimation #codenewbie

CSS Animation - 3D Transforms with scale3d() Function
https://pyxo.me/6b7dcc #pyxofy #cssanimation #codenewbie

CSS Animation – 3D Transforms with scale3d() Function
https://pyxo.me/6b7dcc #pyxofy #cssanimation #codenewbie

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!

Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo

#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

Anyone good with CSS animation interested in helping improve the Join the Fediverse website?

https://github.com/jointhefediverse-net/jointhefediverse.net/issues/95

#fediverse #CSS #CSSAnimation #WebAnimation #webdev #opensource #HelpWanted

CSS Animation – rotate3d() and 3D Cube Transforms
https://pyxo.me/dd17b0 #pyxofy #cssanimation #codenewbie

CSS Animation – rotate3d() and 3D Cube Transforms
https://pyxo.me/dd17b0 #pyxofy #cssanimation #codenewbie

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars