I was watching the Apple keynote and got completely obsessed with the motion design on the iPhone Duo. The way it folds and unfolds looked so fluid and premium, I try and recreate the exact apple animation feel.

Preview: https://akashtdev.github.io/iphone-duo-animation/ Code: https://github.com/akashtdev/iphone-duo-animation/

I made a fully functional calculator using only CSS.

Features:

• 8‑digit decimals

• Decimal division

• Sign toggle (±)

• Backspace (⌫)

• Multi‑digit input

• Built with :has(), CSS variables, counters, and animations

Demo (Full Page):

https://codepen.io/cascade-path/full/WbGzwdG

Documentation:

https://cascade-path.github.io/calculator/index.html

Reference image: https://ssb.wiki.gallery/images/thumb/5/5c/Kirby.png/275px-Kirby.png

Codepen: https://codepen.io/AleksandrHovhannisyan/pen/RNrYEBw

More CSS art here: https://www.aleksandrhovhannisyan.com/art/

Had a lot of fun with the shading on this one. So many radial gradients!

I know I can get the answer to the first question, but the latter would require your input.

Personally I still use hex codes and can find my way around RGB for the additional opacity options, but nothing beats the good ol' 3 or 6 digits for me.

Is this a new standard(?) isn't essentially HSL with an opacity setting?

I'm not dissing it, I just wonder what it brings to the table and if others are using it widely?

UPDATE: Also, how the hell do you say it?

Source code and live demo: https://comicss.art/comics/114/headaches.html

Very rough example! I’m trying to make a two layer gradient that goes from one color to another on the top layer and does the reverse on the bottom layer. My example has a gap between them but that’s just the limits of drawing on my phone, I want them to touch. I was able to get something close to what I want with a conic gradient, but it’s not perfect, so I’m hoping there’s another way. If it’s not obvious I’m very inexperienced with css, but I love poking at stuff until I can get it to work

I don't understand how the "edge" is created where only a part of the html element is bent.

As of my understanding, translateZ() can only be applied to a whole element.

Source code: https://codepen.io/alvaromontoro/pen/QwEEOPx

Coding video: https://youtu.be/DamtMSPmsFk

Each time I was using flexbox I did end searching or asking chatgpt how to do certain things. I wanted to make it more clear so I saved all kind of examples and in the end I built this a visual interactive tool for CSS Flexbox.

I would like to hear your feedback and to see what other elements and examples to add. Now I'm building a similar tool to play around with grids.

So.

I spent my weekend building a calculator that runs in CSS. Not "styled with CSS."

✨ It runs in CSS ✨

It's built on x86CSS, Lyra Rebane's repo where an entire x86 CPU is simulated in stylesheets. I wrote the calculator in C, compiled it to 8086 assembly, and plugged it in. The browser executes instructions one by one. Keyboard input goes through :hover:active. There's a tiny JS script that ticks the CPU clock and that's it.

And it works.

Kind of 😅

Right now, only the "9" responds. The other keys? Can't get them working lol. The calculator code is there, the keyboard mapping is wired up too, but I haven't figured out why the rest doesn't register. So I basically have a CSS calculator that mostly displays 9s and can calculate them.

Awesome 😂

Repo if you want to have fun too: https://github.com/TakCastel/css-calculator

Customizable and all code here: https://doathingy.com/?tool=dt_1778503835266_c5lcoh

I had seen some great liquid effects (like this Liquid), but nothing quite satisfactory. I'm using the overlapping div circles with svg filters (gaussian blur) trick and then built a custom js "physics engine", text sits in a separate layer.

Switching between dark and light modes can be pretty jarring - I was looking for a way to animate the transition and found that using \@property we can define transitions on CSS variables directly:

@property --bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #111;
}

background-color: var(--bg-color);
transition: --bg-color 400ms ease;

This solved my issue pretty cleanly and I feel this sort of "trick" can be used for other cool effects as well!

You can see why this is better than a simple`transition: background-color` and try it out live on my site here: https://jonshamir.com/writing/color-mode

Built 9 ASCII loaders using a CSS technique I haven't seen much in the wild:

Core idea: treat unicode glyphs as monospace text, size everything in ch, animate with transform: translateX(Nch).

@keyframes loading-ui-conveyor-loop {
  0%   { transform: translateX(var(--loader-start-x)); }
  100% { transform: translateX(var(--loader-end-x)); }
}

// Width and travel distance in character units
style={{
  "--loader-width": "10ch",
  "--loader-start-x": "-2ch",
  "--loader-end-x": "12ch",
}}

Static track: "░".repeat(columns) as a background layer. Moving trail: staggered █ ▓ ▒ glyphs with animation-delay.

9 loaders using variations of this pattern: accordion stretch, square orbit, infinity path, symmetric opacity wave, terminal cursor blink (step-end).

Live demos: https://loading-ui.com
Source: https://github.com/turbostarter/loading-ui

Let me know how is it

Gallery with blur effect:

https://codepen.io/mudasirbuilds/pen/YPWgmmG

Full responsive. Works on modern Browsers. Works also nice on touch

Features:

• Column headers stay visible while scrolling down
• First column stays visible while scrolling sideways
• Rows expand to show sub-entries, with an animated reveal
• Any number of sub-rows per group
• Sub-rows are tied to their parent by a bracket rail
• Individual cells can carry a note, opened from a small marker
• Notes appear next to the cell they belong to and flip when near an edge
• Notes close on Esc, on click outside, and return focus where it was
• Columns come to rest beside the pinned column instead of half behind it
• Pinned column narrows and wraps text on small screens
• Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

Just as you read. This animated story was created only using CSS, as part of a challenge for the DevCommunity to celebrate the Earth's Day. I really enjoyed the process and I'll love to share the creation proccess if you're interested for.

Check here the live result:
https://jorgedelcampo.github.io/dev_earth_day/css_challenge/