@RT Adam Kuhn
slapped together this responsive 3d CSS rendition of the iconic bathouse from Spirited Away over at @CodePen with some JS-free cursor reactivity, as a treat
thanks for lookin'
https://codepen.io/cobra_winfrey/full/GRMdwwG
https://twitter.com/cobra_winfrey/status/1478393265112104969
RT Johan Karlsson
Genuary 4 - "The next next Fidenza" on @CodePen:
Click to generate a new random image!
#genuary #genuary2022 #generative #creativecoding
https://codepen.io/DonKarlssonSan/full/qBPYYro
https://twitter.com/DonKarlssonSan/status/1478309044154773534
RT George Francis
Huh, a rather strange @CodePen has come into my possession... 🪄
At first, it appears static. 🖼
But, each time it is forked, it creates a new, unchangeable version of itself — somehow uniquely tied to the person who created it! 🎨
... Wait.
https://codepen.io/georgedoescode/pen/WNZJYeJ
https://twitter.com/georgedoescode/status/1478376253719818242
RT Liam Egan
Genuary 3 - Space
The birth of a star.
#genuary #genuary22
https://codepen.io/shubniggurath/live/qBPYajK
RT CSS Challenges
💡 CSS Tip!
Create a matrix of cubes using only one
<div>
. Yes it's possible!
You can easily control everything using CSS variables.
Demo:
#CSS
https://codepen.io/t_afif/pen/PoJeqwN
</div> https://twitter.com/ChallengesCss/status/1477969300770144257
RT S. Shahriar
Some of us probably do origami as our hobby or have done it in kindergarten.
We can do something similar with CSS 3D too! 🤩
But instead of folding papers, we transform and place DIVs. Take my mask for an example 😁
@CodePen:
https://codepen.io/ShadowShahriar/pen/PoNMMBW
https://twitter.com/ShadowShahriar/status/1477654091350171649
RT Jesper Landberg
Made a @CodePen . Infinite scrollable/draggable (WebGL)grid.
https://codepen.io/ReGGae/full/ebcb99c8512294a8e5bf5cbaa5f58d9a
https://twitter.com/Jesper_Landberg/status/1477329296238727173
RT • nanou •
New CSS Trend 2022 ➡️ Claymorphism Illusion!
Link:
✏️ Use:
- pastel colors
- double light inner/dark outer shadow
https://codepen.io/antoniasymeonidou/pen/RwLMqxy?editors=0100
RT Álvaro Montoro
Creating responsive ribbons with one HTML element and CSS.
Demo on @CodePen:
Video of the process:
In the demo/video:
- Paddings/Margins
- Gradients (linear and radial)
- Custom properties
- Colors (RGB and HSL)
- Border-radius
https://codepen.io/alvaromontoro/full/PoJRVaK
https://www.youtube.com/watch?v=PaKBUoIQDa0
https://twitter.com/alvaro_montoro/status/1477740679912636420
RT Johan Karlsson
Genuary 1 on @CodePen:
Draw 10,000 of something.
10,000 sticks using verlet integration "physics simulation".
#Genuary2022 #genuary #generative #verletintegration
https://codepen.io/DonKarlssonSan/pen/vYeRrjy
https://twitter.com/DonKarlssonSan/status/1477581808812412928
The first #CodePenChallenge of 2022 starts now!
January's theme is Generative Art 🎨
Each week we'll explore a different aspect of how generative art is created. For week one, we begin with randomization 🎲
https://codepen.io/challenges/2022/january/1
"2022 New Year Fireworks!" by Jacob Foster
https://codepen.io/Alca/pen/qBPoRVX
RT Lea Rosema
Re Final demo is on @CodePen
Added physics 🌨️
Every snowflake is individual❄️
https://codepen.io/terabaud/pen/NWaXvoy
RT CSS Challenges
No one noticed it but 2022 was always there! 🤪
We had to look at 2021 from a different angle.
Demo:
#CSS #NewYear2022
https://codepen.io/t_afif/pen/qBPoNzo
https://twitter.com/ChallengesCss/status/1477014608061812749
RT Álvaro Montoro
Last CSS demo of the year: 2021 to 2022.
Happy new year!
https://codepen.io/alvaromontoro/full/QWqmybN
https://twitter.com/alvaro_montoro/status/1476973353776955400
RT Paulina Hetman
My 'Wow' of the week goes to the Flip Plugin 🤩. It's soooo smart! Here's me animating a grid and the item details
https://codepen.io/pehaa/pen/YzreJZG
RT Ryan Mulligan
One last #CodePenChallenge before the year ends!
I finally had a minute to mess around with @greensock's Flip plugin and my goodness – It is super fun and easy to use 😍
Check it out on @CodePen:
https://codepen.io/hexagoncircle/full/RwLQLop
https://twitter.com/hexagoncircle/status/1476616784329379854
RT Brandon McConnell
The :has() pseudo-class opens the door to new possibilities in CSS selector architecture without any use of JavaScript.
In preparation for this, I've written up the spec on some ✨magic✨ PostCSS custom combinators. Take a look here (ONLY Safari TP):
https://cdpn.io/OJxzGQW
https://twitter.com/branmcconnell/status/1476236655828901888
RT Jhey 🔨🐻✨
Made a little demo for an upcoming @css article ✨
Explores how you can use CSS custom properties to set up "mini" animation timelines 🧐
Play around with the step values and see if you can make the race outcome different 🏎
👉
http://codepen.io/jh3y/pen/LYzeoJW
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
