1. A Black Hole 🤪
2. A Sequence Animation
3. A Tour and Travels Website

Also, I wrote a post on how you can make your own blog page using JUST CSS (classless CSS framework):

Style your next blog with vanilla HTML. No CSS. 😵

Vaibhav Khulbe ・ Jun 12 ・ 6 min read

#beginners #html #css #tutorial

As part of the "100 Days Project Scotland" I've been doing a hundred day challenge to create some new art from only HTML and CSS each day. I'm over a third of the way through and I've learned so much and made some fun things!

The 100 Days Project is about celebrating art and creativity, and I really want to show that developers create art too!

The whole collection is here: Suzanne makes 100 things in CSS

My favourite one so far is actually my washing machine - is that weird 😂

There are many things that can be done just with HTML and CSS only. I built a series of games based on the idea of finite state machines. My favorite ones are:

• Multiplayer Snakes and Ladders
• Tic-Tac-Toe (with "AI")
• CSS Simon

I also wrote an article on DEV on how to draw Homer with HTML and CSS. But the list of Simpson's characters I've drawn in CSS is longer: Bart, Lisa, Sideshow Bob... and many more!

And then there are random things just for fun (everything really), like a set of clocks or a Duracell battery:

I made a CSS micro-framework

I was studying semantic HTML and architectures with pure css or scss trying to find a good approach or weakness when writing stylesheets for big projects. If i cant or dont want to use CSS in JS, or if my main style must be global (or is a legacy project)

• Whats the best way to serve the style and its partials to the application?
• Talking about Global Identity: Should i style with attributes (classes) or import partials on components
• How to serve a theme to a componentized application? Vars? Classes? Css Props? Imports?
• Add themes with SASS vars or using CSS vars? This will harm performance?
• Prefix or not to prefix? How deeply should i prefix?
• An application base style must be applied with classes, no-classes, should i use style wrappers?

Etc etc...

I was testing that kind of stuff and styling html native elements a then BANG, ok it looks like a micro-framework. No JS, no classes, just [S]CSS, a wrapper div and the HTML :P

Its not something huge or super incredible, but i think it can be useful (and brought me a lot of learning).

felippe-regazio.github.io/plume-css/

Last year I took part in #Codevember and used their prompts to try to make CSS art every day. I sadly didn't finish the challenge but my favorite creation was this Koi Fish. I was actually able to talk about it in a few interviews so that really helped during my job hunting

I think it's pretty darn cool that the comment collapse functionality on DEV is just summary/detail elements.

Using summary/details as a menu

Marcus Herrmann ・ Feb 28 '19 ・ 4 min read

#a11y #vue #summarydetails #menu

Kudos to @link2twenty for suggesting that approach way back!

We may circle back and give this more intuitive functionality and/or bells and whistles via JS at some point in the future but this plain HTML way has served us extremely well!

Funny that I started a With Only CSS series just a few weeks ago 😄. dev.to/kallmanation/building-a-too...

But I think I'm most proud of a linkable tab system I made. Replaced a large, tech-debt filled piece of JavaScript and added features 👌 (I guess I should add that to my series 😅)

Charmander 🔥

This super cool pixel dragon! Took ages, but I had so much fun doing it.

codepen.io/JustSharkieCodes/pen/oN...

Amusement Park. HTML & CSS only. No images.
debojyotighosh.com/xp/amusement-park/

Best viewed on desktop.

Here is some of my work:

1. Pure CSS select box with direction aware hover effect
2. Pure CSS toggle buttons
3. Smudge the cat subscribe button
4. More on my CodePen profile

Thank you :)

I recently created a pure CSS/HTML functional calendar which can correctly display months from Jan 1800 to Dec 2999 with no JavaScript, all through the use of CSS variables and some clever comparison logic functions I created, also in CSS.

Feel free to check it out at: codepen.io/eliseodannunzio/details...

I set pointer-events to none and JavaScript devs went crazy because their event listeners wouldn't work anymore.

I have a couple CSS illustrations:

1. NES controller
2. Death-Star illustration

I also created a Markdown -> HTML converter however it mainly uses JS.

All the following pens are like 3-4 years old. These may/may not be cool but the title says "coolest things you've made"! 😁

1. A Rainbow Loader
2. Reflection effect
3. A hole (parallax?)
4. A Dribbble clone that I'm proud of