j9t, to CSS
@j9t@mas.to avatar
jake4480, to CSS
@jake4480@c.im avatar

Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. 🤯

https://www.youtube.com/watch?v=CG__N4SS1Fc

#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens

alvaromontoro, to CSS
@alvaromontoro@front-end.social avatar
robleto, to CSS

Day 24 of #divtober is “feast”

A feast for thousands prepared with just a few fishes and loaves of bread.

After so many complex Divtober pieces, I was delighted that this came together in ~100 lines of code.

🏷️ #css, #cssart, #singlediv

📷 Found on @codepen
https://codepen.io/robleto/pres/zYeOwyW

robleto, to CSS

Day 22 of #divtober is “alive”

This little guy, Frankie, was just fun to make. Inspired by a .svg, it puts a twist on that scary monster and makes it youthful and just cute.

🏷️ #css, #cssart, #singlediv, #frankenstein, #monster

📷 Found on @codepen
https://codepen.io/robleto/pres/oNJKERR

robleto, to CSS

Day 19 of #divtober is “sticky”

Before it all went digital with Trello or Jira, my daily morning Scrum looked like this, a whole lot of moving sticky notes across columns on a white-board.

🏷️ #css, #cssart, #singlediv

📷 Found on @codepen https://codepen.io/robleto/pres/jOXjRyg

robleto, to CSS

Day 13 of #divtober is “collect”

Sure, it doesn’t have the best interest rate (or any interest rate); otherwise, a piggy bank is the perfect place to collect all your coins.

🏷️ #css, #cssart, #singlediv, #aminated

📷 Found on @codepen https://codepen.io/robleto/pres/gOZqbeg

video/mp4

robleto, to CSS

Day 11 of #divtober is “bones”

The time-saving hack with this one was to copy/paste the bones into a pseudo-class and reduce scale, then the logo on the hat was done and it matched exactly.

🏷️#css, #cssart, #singlediv, #pirates

📷 Found on @codepen https://codepen.io/robleto/pres/PoXXjgN

robleto, to CSS

Day 9 of #divtober is “space”

My mind immediately went to Star Wars. I like how overlapping conic gradients were able to resemble traveling through light speed.

🏷️#css, #cssart, #singlediv, #animated, #starwars

📷 Found on @codepen https://codepen.io/robleto/full/abPQMKR

video/mp4

robleto, to CSS

Day 8 of #divtober is “mixed”

This one makes me smile. Those Spider-men are all mixed up. I wish I had more time with it. I enjoyed figuring out how to recreate a complex illustration.

🏷️#css, #cssart, #singlediv, #spiderman, #meme

📷 Found on @codepen https://codepen.io/robleto/pres/bGOmVeq

robleto, to CSS

Day 7 of is “treat”

Mmmmm, S’mores!
I love how the Kawaii art style, a favorite of my daughters, works so well for creating CSS art.

🏷️, , ,

📷 Found on @codepen https://codepen.io/robleto/pen/XWoPqoN

JaneOri, to CSS
@JaneOri@front-end.social avatar

#divtober flashing laser sparks triangle grid looping animation (single div) on CodePen
#CSS #CSSArt #animation
https://codepen.io/propjockey/pen/qBLMXwp?editors=1100

robleto, to CSS

Day 2 of #divtober is "impossible."

I had M.C. Escher posters on my wall as a kid. I love the impossibility of his art.

🏷️ #css #cssart #singlediv

💻 Found on @codepen
https://codepen.io/robleto/pres/BavPGGx

robleto, to CSS

Day 1 of 2023 #divtober is "fall"

I felt so rusty starting out; the CSS just read like a bunch of noise, but it started coming back to me by keeping with it. Here's essential fall.
#css, #cssart, #fall, #autum, #pumpkinspicelatte

Code on @codepen
https://codepen.io/robleto/pres/BavPqPL

css, to CSS
@css@front-end.social avatar

It's tomorrow! Another #divtober will begin. Can I make it this year as well? 😬

🎨 One div = One art, each day of October

Check out my last year entries

👉 https://css-only.art/divtober-2022/

Will you join the game? 👇

#CSS #CSSArt

Showing my 30 one-div CSS art of last year in October

ivorjetski, to random

It's a CSS Maze!! 🌽
Unless in Safari... In which case it's some random shapes 🙃
https://codepen.io/ivorjetski/pen/poQpveN

🚳 No images
📵 No JavaScript
👨‍💻 Just CSS + a sprinkling of HTML

First one to screenshot the end wins... Go!! 🎉

@codepen
@codepen
#nocode #purecss #cssonly #cssart #ccsgame

video/mp4

alvaromontoro, to CSS
@alvaromontoro@front-end.social avatar

A CSS drawing of a Motorola RAZR V3 (the best flip phone ever created 😉)

Coded in HTML and CSS, it is responsive and slightly animated (the screen will go to sleep after 10 seconds and wake up after pressing any button.)

Demo on : https://codepen.io/alvaromontoro/pen/JjaMMXw

alvaromontoro, to CSS
@alvaromontoro@front-end.social avatar

A CSS drawing of a Nintendo Switch. It is:

  • responsive: resize the window to see it change;
  • semantic: the buttons are buttons;
  • customizable: CSS variables to change the JoyCon colors;
  • realistic: or at least that was the goal...

Demo on CodePen: https://codepen.io/alvaromontoro/pen/LYBqdaR

Video of the process: https://youtu.be/7IrOlF25_F0

#css #cssart #html

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines