#CSSArt
RT Yusuke Nakaya
CSSだけで電車のジオラマを作りました🚋 久しぶりのCSS作品！
OnlyCSS: Low-poly Train
https://codepen.io/YusukeNakaya/pen/PoybbMY
@CodePen
#css #css3d #cssart #webdevelopment https://t.co/t2wcGEGUif
:sys_twitter: https://twitter.com/s14garnet/status/1651949705893675009
RT Ben Evans
Hello👋It's been a while... I did a thing!
A Pure CSS Table Tennis Game:
https://codepen.io/ivorjetski/full/mdzrLbW
An experiment to see how closely, only CSS, can mimic a finished app.
@CodePen
#cssonly #cssart #frontenddeveloper https://t.co/rsAmUewiei
:sys_twitter: https://twitter.com/ivorjetski/status/1649081381484363776
Jake the Dog in CSS. #adventuretimefanart #cssart
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 #codepen: https://codepen.io/alvaromontoro/pen/JjaMMXw
RT Álvaro Montoro
CSS drawing of Nintendo Switch.
Coded in HTML and CSS, it is interactive and responsive (resize the window and see it change.)
Demo on @CodePen:
Video of the coding process:
#html #css #cssart #nintendo #switch
https://codepen.io/alvaromontoro/full/LYJPxvr
https://youtube.com/watch?v=7IrOlF25_F0
:sys_twitter: https://twitter.com/alvaro_montoro/status/1625251700750577690
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
RT Ricardo Oliva Alonso
3D Walkman made with HTML, CSS and JavaScript - Designed by michaelyeah.
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #voxelart #music #sony #walkman
https://codepen.io/ricardoolivaalonso/pen/RwBZMGB
:sys_twitter: https://twitter.com/rolivaalonso/status/1614974500029751296
A Christmas present from me to all
those who enjoy CSS Art: Snowglobe
🖥️ Code on @CodePen@twitter.com at https://codepen.io/robleto/pres/eYjmWYJ
🏷 #css #cssart #singlediv
Is it possible to make a fancy portfolio site without JavaScript, I hear you ask?
RT Greg RoBOOleto 👻
Day 28 of #divtober is "monster"
This 📖 book was one of my favorites as a kid. I ❤️ how interactive and meta it is (with a twist ending, no less). So fun!😁
🏷️#css #allcss #cssart #allonediv #sesamestreet #grover #monster #book
Code on @CodePen:
https://codepen.io/robleto/pres/NWzPbwB
:sys_twitter: https://twitter.com/robleto/status/1585969164401115136
RT Greg RoBOOleto 👻
Day 25 of #divtober is "luminous"
Are you watching Andor? Wow! That heist episode was epic, and escaping during The Eye was so visually stunning I was compelled to try to recapture it.
🏷️#css #cssart #cssgradient #andor #theeye #StarWars
On @CodePen:
https://codepen.io/robleto/pres/dyKbpYy
https://twitter.com/i/web/status/1584896303435517952
:sys_twitter: https://twitter.com/robleto/status/1584896303435517952
RT Greg RoBOOleto 👻
Day 19 of #divtober is "Mythical"
Born in the year of the dragon, I've had an affinity long before they became the centerpiece of shows on HBO.
🏷️ #css, #cssart, #dragon
Code on @CodePen
https://codepen.io/robleto/pres/NWMmWRM
:sys_twitter: https://twitter.com/robleto/status/1582725754902773761
RT zeynep
Hey! I have coded another Kurzgesagt bird. It loves singing🎶 I enjoyed coding it 💜 @CodePen #css #cssart
https://codepen.io/zeynepozdem/pen/gOzypzM
:sys_twitter: https://twitter.com/zeyneppozdem/status/1582378915787440128
RT Greg RoBOOleto 👻
Re @CodePen Catching up on making these "making-of" videos. This one required little editing, which made me smile 😀, thinking I am getting more honed at coding these.
🏷️#divtober, #css, #scss, #cssart, #cssanimation
Also available on YouTube:
https://www.youtube.com/watch?v=jcclDHxD2qc
:sys_twitter: https://twitter.com/robleto/status/1581806004693782528
RT Greg RoBOOleto 👻
Day 16 of #divtober is stripes
I played with bending lines to make a more dynamic image, using translates and radial gradients.
🏷️ #css, #cssart, #divtober
Code on @CodePen:
https://codepen.io/robleto/pres/xxjBYQv
:sys_twitter: https://twitter.com/robleto/status/1582001788894314496
RT Greg Robleto
Grills on!
Day 11 of #divtober is "burger"
Learned you can't use a mixin for multiple radial gradients in the same background, so did a lot with variable calcs to make those burger patties.
🏷️ #css #cssart #scss
https://codepen.io/robleto/pres/JjvmLme/5b5568647e5317c6986b95ca71261d5e
:sys_twitter: https://twitter.com/robleto/status/1579831309253627905
RT Greg Robleto
Day 7 of #divtober is "wonder"
I was trying for the Library of Alexandria, one of the Seven Wonders, but I see now I made the lighthouse of Alexandria here, and I'm realizing they may not be the same place.🤷♂️
Code on @CodePen
#css #cssart #singlediv
https://codepen.io/robleto/pres/YzLjYvr
:sys_twitter: https://twitter.com/robleto/status/1578400633190850564
RT Greg Robleto
Day 5 of #divtober: "stamp"
This entry is personal for me. Next month, I am taking the family on the first international trip in 3 years. I am really excited for us all to get this passport stamp.
Code on @CodePen
🏷️ #css #cssart #singlediv #divtober
https://codepen.io/robleto/pres/BaxPyxq
:sys_twitter: https://twitter.com/robleto/status/1577692880994435072
RT Mustapha Aouas
Silence in CSS
@CodePen 👉
#cssart
https://codepen.io/TheAngularGuy/full/BaxYVbJ
:sys_twitter: https://twitter.com/TheAngularGuy/status/1575554466937708549
RT Yusuke Nakaya
【過去作品シリーズ】
夏の終わりに。胸に響く花火の音って、いいよね🎆 ドーーン、パラパラパラ。ドーーン、パラパラパラ。
Only CSS: Fireworks Rush
@CodePen
#cssart #css3d #animation
https://codepen.io/YusukeNakaya/pen/zYvWGwb
:sys_twitter: https://twitter.com/s14garnet/status/1569643568414994433
RT Ben Evans
Attempting video-realism with just CSS (& HTML)
No images - No JavaScript
via @CodePen
#cssart #purecss #cssonly #cssartist #codepen
https://codepen.io/ivorjetski/pen/yLjeqgb
:sys_twitter: https://twitter.com/ivorjetski/status/1567913534708662277
RT Ricardo Oliva Alonso
3D Player/Recorder - Designed by Guillaume Kurkdjian
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #voxelart #music #toto #frontenddev
https://codepen.io/ricardoolivaalonso/full/PoRvRmM
:sys_twitter: https://twitter.com/rolivaalonso/status/1563130386183467008
RT Yusuke Nakaya
息抜きに CSS で遊ぶ！どこかで見たことあるような、ノイジーな立方体の集合体。ちょっと重いよ。
Only CSS: Noisy Cube
@CodePen
#css #css3d #cssart
https://codepen.io/YusukeNakaya/pen/RwMmajM
:sys_twitter: https://twitter.com/s14garnet/status/1562778708858904577
RT Ricardo Oliva Alonso
3k thanks! 3k followers at CodePen ❤️
Live @CodePen :
#html #css #javascript #cssart #3D #isometric #voxelart #animation #gamer #frontenddev
https://codepen.io/ricardoolivaalonso/full/bGvdypM
:sys_twitter: https://twitter.com/rolivaalonso/status/1543707358232137730
RT Yusuke Nakaya
Hey, everyone.
Did you forget about me?😇
CSS Dandelion 🌻 たんぽぽ
Only CSS: Dandelion
@CodePen
#css #css3d #cssart #animation #webdevelopment
https://codepen.io/YusukeNakaya/pen/zYRMBgQ
:sys_twitter: https://twitter.com/s14garnet/status/1535226034785755136
RT Ricardo Oliva Alonso
Hice esta pequeña PICADE, para mi colección de CSS Art. Lo más interesante fue hacer una esfera (no es perfecta pero funciona 😅)
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #picade #arcade #SuperMarioBros
https://codepen.io/ricardoolivaalonso/full/oNEbrKL
:sys_twitter: https://twitter.com/rolivaalonso/status/1523529854473228288
RT T. Afif @ CSS Challenges
🎨 CSS Art
I am adding a demon slayer to the list. Take a deep breath and say hello to 𝗧𝗮𝗻𝗷𝗶𝗿𝗼 𝗞𝗮𝗺𝗮𝗱𝗼 ⚔️
Demo:
✅ A CSS-only illustration (No images and No SVG)
Find more at
#CSS #cssart #DemonSlayer
http://codepen.io/t_afif/full/ExoXoRa/
http://css-only.art/
:sys_twitter: https://twitter.com/ChallengesCss/status/1508804932522156037
RT @ivorjetski@twitter.com
It's a-me, A Pure CSS Mario!
No images, no JavaScript, just a lot of transform3d.
Unfortunately iOS Safari can’t quite manage it.
Let's-a go!
https://codepen.io/ivorjetski/full/abEBjKN via @CodePen@twitter.com
#purecss #cssart #3dcss #cssonly #nojavascript #FrontEndDeveloper #frontenddev #HTML #CSS
🐦🔗: https://twitter.com/ivorjetski/status/1506682283973087240
RT Ben Evans
It's a-me, A Pure CSS Mario!
No images, no JavaScript, just a lot of transform3d.
Unfortunately iOS Safari can’t quite manage it.
Let's-a go!
#purecss #cssart #3dcss #cssonly #nojavascript #FrontEndDeveloper #frontenddev #HTML #CSS
https://codepen.io/ivorjetski/full/abEBjKN
:sys_twitter: https://twitter.com/ivorjetski/status/1506682283973087240
RT Ricardo Oliva Alonso
3D Futuristic Room - Designed by Alex Harris
😉 btw It’s just for fun
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #voxelart #animation #room
https://codepen.io/ricardoolivaalonso/full/LYzwGyW
:sys_twitter: https://twitter.com/rolivaalonso/status/1485598257023787012
RT Ricardo Oliva Alonso
3D Spaceship with @greensock
Designed by Adam Witton
Live:
#html #css #javascript #cssart #3D #isometric #voxelart #animation #gsap #codepenchallenge
https://codepen.io/ricardoolivaalonso/full/poWbBdK
:sys_twitter: https://twitter.com/rolivaalonso/status/1469054226873548802
RT Ricardo Oliva Alonso
🚀3D CSpaceShip - Designed by Adam Witton
Live @CodePen :
#html #css #javascript #cssart #3D #isometric #voxelart #animation #illustration #space
https://codepen.io/ricardoolivaalonso/full/qBPBmeN
:sys_twitter: https://twitter.com/rolivaalonso/status/1465478182136655873
RT Ben Evans
Drawing in CSS - Sci-Fi Art: A Vacuum From Space
No images - just pure CSS!
via @CodePen
#CSS #CSSart #CSSonly #pureCSS #drawingincode #drawingInCSS #scifiart #OriginalContentArtist
#dystopian #blender
https://codepen.io/ivorjetski/pen/ZEyyzXm
:sys_twitter: https://twitter.com/ivorjetski/status/1443211644318932999
RT Ricardo Oliva Alonso
🍵Swag 2.0🍵
Designed by: lukeroberts
Original image:
Live @CodePen :
#html #css #javascript #illustration #animation #web #cssart #coffee #2d
https://lukeroberts.tv/walk-cycles.php?pn=2
https://codepen.io/ricardoolivaalonso/full/JjJKJRV
:sys_twitter: https://twitter.com/rolivaalonso/status/1433761705616547845
RT Ricardo Oliva Alonso
💙 Breaking Bad 💙
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #voxelart #animation #illustration #BreakingBad
https://codepen.io/ricardoolivaalonso/full/LYLEJBK
:sys_twitter: https://twitter.com/rolivaalonso/status/1430678138392965126
RT Kass 🦈
#CSSArt Single Div Pencil.
Working on making a time-lapse video on how this was made. Stay tuned.
View code here:
https://codepen.io/kassandrasanch/pen/dec6b6f2e05b171740694927f0f94226
:sys_twitter: https://twitter.com/KassandraSanch/status/1427114356932849669
RT Álvaro Montoro
This is a first: me speaking on a video 😬
If you want to watch how I code a CSS drawing while explaining the process (all peppered with many "ahm"s, "so"s, awkward silences, and an unexpected phone call 😨), don't miss the video:
#CSS #CSSArt #HTML
https://www.youtube.com/watch?v=uf_sG7yrO9Y
:sys_twitter: https://twitter.com/alvaro_montoro/status/1423884918380191750
RT Yusuke Nakaya
CSSだけでイライラ棒⚡️ 当たり判定は作ってないから、ぶつかっても何も起きないよ！ただ動くだけ。英語のネイティブだと、「イライラ棒」は何て言うんだろう？
Only CSS: Pointer Game
@CodePen
#css #css3d #cssart #animation #webdevelopment
https://codepen.io/YusukeNakaya/pen/VwbXVBM
:sys_twitter: https://twitter.com/s14garnet/status/1420721906760617987
RT Yusuke Nakaya
✨✨✨✨✨✨✨✨✨✨
CSSだけで作ったキラキラ
✨✨✨✨✨✨✨✨✨✨
Only CSS: Kira Kira Stars ✨
@CodePen
#CSSArt #css3d #css #animation #webdevelopers
https://codepen.io/YusukeNakaya/pen/poPerxb
:sys_twitter: https://twitter.com/s14garnet/status/1415648848429547521
RT Samritha Sudhagar
Css owl with sneaky eyes!👀
@CodePen :
#CSS3 #codepen #cssart
https://codepen.io/samritha/full/eYWNBJR
:sys_twitter: https://twitter.com/Samritha22/status/1414581459998760964
RT Yusuke Nakaya
Japanese castle "松本城" in the crystal!🏯
CSSだけで建築された、松本城っぽい何かです。おもちゃなので、本物と比較してはいけませんよ！🙈笑
Only CSS: Japanese Castle
@CodePen
#css #css3d #cssart #webdev
https://codepen.io/YusukeNakaya/pen/GRWZdOb
:sys_twitter: https://twitter.com/s14garnet/status/1394669769698119682
RT Derya Tanrıverdi
Polaroid Camera by HTML, SCSS, and JS!
Note: The version on Codepen doesn't have audio, as I still couldn't find a url for it! Click to take a photo!
#wwc #WomenWhoCode #css #cssart #html #javascript #Webdesign #SoftwareEngineer #FrontEnd
https://codepen.io/deryatanriverdi88/pen/ExgdOxq
