Apple M1 Release Graphic in Pure CSS

Project URL: https://codepen.io/carlyraejepsenstan/pen/eYzQRKr
Glitch: https://apple-m1-css.glitch.me

Not hosted on glitch, sorry :sweat_smile: But I made this cool codepen look like the Apple m1 release graphic!
Edit! Now it’s on glitch. enjoy!

3 Likes

You can’t post in #the-gallery if it’s not hosted on Glitch. It does look quite nice though.

Haha, it’s on glitch now and thanks!

For reference, here’s the graphic that this is based on:

from https://www.apple.com/mac/m1/

3 Likes

FYI this does not render correctly cause I don’t think apple sign exists on other computers.
Short story: I once made an nitrotype account with an apple sign in the username and afterwards realized I couldn’t log in because of it.


If you can, you should consider animating it

1 Like

So everything except MacOS?

Thanks javaarchive, I’ll try animating it.
Edit: Now both links are animated - it’s pretty simple, let me know what you think.
That sucks about the apple icon. If anyone has any ideas of what I can do (transparent apple logo svg? But then I don’t have the gradient…) please comment with them!

For people who just see a square, here’s how it should look:

1 Like

It only shows on Apple devices, so MacOS & iOS.

4 Likes