Mastodawn

Got LSS with the latest Katseye song. Here's some HTML elements dancing to the tune :D

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

Now you see it, now you don’t. Learn in this step-by-step tutorial how to make an isometric cube move, appear, and disappear using only CSS

Pyxofy

Pyxofy May 31

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

Now you see it, now you don’t. Learn in this step-by-step tutorial how to make an isometric cube move, appear, and disappear using only CSS

Pyxofy

Michael Houmann May 6

#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

Ana Tudor 🐯Apr 15

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

Donovan H Apr 9

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 Web Is...

syuzhet Apr 8

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

Ana Tudor 🐯Apr 7

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

1 div neon loaders

...

Ana Tudor 🐯Mar 31

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

Contrasting heading text, no duplication

...

Show thread

Ana Tudor 🐯Mar 29

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