Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for 10 Cool CodePen Demos (July 2023)
Alvaro Montoro
Alvaro MontoroSubscriber

Posted on • Originally published atalvaromontoro.Medium

     

10 Cool CodePen Demos (July 2023)

A Pure CSS 3D Maze!

Ben Evans is a fantastic CSS Artist and also creates games in CSS. This time, it is a 3D Maze built with HTML and CSS. No JavaScript or other languages. Enjoy it! Note: This demo works on Chrome (and Firefox?)


Sunday CSS #7: 3D Pencil

This 3D rotating pencil was created byJulia Miocene in HTML and CSS. She used the latest CSS trigonometric functions to calculate the angles and positions and the shape points for the different layers—a simple and cool demo.


Animated Hirayama Fireworks

This animated vintage poster is excellent in itself. Still,Mads Stoumann went beyond that and shared ablog post about the whole process with detailed explanations of the techniques used. The demo may be resource-consuming on some computers.


Online Guitar Tuner v3

This month, different demos byJosetxu made the shortlist of this article (his CSS homage to the late cartoonist Ibañez is great, too). But this one, in particular, had to be on the list. It is practical, clean, and beautiful.


Ancient Grass

Sophia (fractal kitty)’s generative art has been featured in previous articles, and this one (created for a CodePen challenge) deserves to be here, too. The sun over the horsetails feels peaceful and warm as it slowly appears and moves.


🍁 Falling autumn leaves shader 🍁

It is not autumn yet, but this interactive ThreeJS demo byCeramicSoda brings the season early this year. Move the mouse over the tree to see the branches moving and the leaves falling.


3D Nintendo Switch

Ricardo Oliva Alonso creates great demos with 3D CSS (and lately with Blender, too). This rendition of the Nintendo console is an excellent example of that: some HTML, some CSS, and a little JS to allow the camera to move, and he got a cute and sweet-looking demo.


👁 Eyes SVG animation 👁

CeramicSoda repeats in the list with an SVG animation of eyes looking around. The turbulence filter makes this drawing amazing and creates a cute but creepy feeling. Note: the image doesn’t load on Safari.


Rhombus rotation on hover

Temani Afif creating impressive animations using just the image tag (without any other tag or container) is not new. He shared demos weekly about it. But this one was my favorite,e with the hover animation and the outline surrounding the canvas.


Face Hop

One fun animated demo to finish this month’s list. With the help of That 3D Text Library and GSAP,Steve Gardner creates some bouncing emojis that change the background while hopping.


Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person(He/Him)
  • Location
    Austin, TX
  • Work
    UI Manager / CSS Aficionado
  • Joined

More fromAlvaro Montoro

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp