@RT Ana Tudor 🐯
Re @argyleink @CodePen For more compact patterns, see also
and
https://css-tricks.com/background-patterns-simplified-by-conic-gradients/
https://www.youtube.com/c/anatudor/search?query=pattern
RT Adam Kuhn
here's something for this week's generative @CodePen challenge, some gooey animated randomized SVG flow fields with the most Lisa Frank palette I could conjure. click to regenerate but be warned this *might* just melt your graphics card
https://codepen.io/cobra_winfrey/pen/abLKGom
https://twitter.com/cobra_winfrey/status/1479153442262327297
RT Jane 💜
CSS Only #StarWars Binoculars Animation using augmented-ui
Live demo on @CodePen!:
https://codepen.io/propjockey/pen/NWazORr?editors=1100
RT Álvaro Montoro
A CSS drawing to match the day: the Three Wise Men.
Demo on @CodePen:
Video of the process:
https://codepen.io/alvaromontoro/full/rNGKgqr
https://www.youtube.com/watch?v=abvmapNUZzs
https://twitter.com/alvaro_montoro/status/1479098883204468737
RT Ben Matthews
#genuary Day 5: Square Destruction
@CodePen
https://codepen.io/tsuhre/pen/vYergXg?editors=0010
RT GreenSock
🎲 We noticed the @CodePen challenge prompt this week is 'random'
Did you know that GSAP has a built in random utility?
Check it out!
codepen
docs
http://codepen.io/GreenSock/pen/yLzjGMJ
http://greensock.com/docs/v3/GSAP/UtilityMethods/random
RT Bence
Here's a little terrain generator in pure SVG. Just add the seed attribute with a random integer to feTurbulence tag, and you'll get a new one! 🧙
Example👉
<feturbulence ...<br="" seed="87643">
Relief Map 🏔️ (528 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/RwLyEBO
</feturbulence> https://twitter.com/finnhvman/status/1478396085907435533
RT S. Shahriar
Had a super fun time playing with @ChallengesCss's CSS-only Back-To-Top button ✨✨
I decorated the demo a little bit and added 'scroll-behavior: smooth' for a smooth scroll transition 🤩
@CodePen:
https://codepen.io/ShadowShahriar/full/jOGxvZq
https://twitter.com/ShadowShahriar/status/1478355194379259905
RT Ale ❄️✨
I discovered CSS art back in September... these are some of my favorite creations since then. Can't wait to learn & do so much more with it this year! 🎨💕
CodePen:
https://codepen.io/pokecoder
RT Jhey 🔨🐻✨
Need a carousel for your website? ✨
Use CSS! 😅
A responsive 3D carousel using Houdini, 3D transforms, and custom properties 💪
👉
http://codepen.io/jh3y/pen/VwMxoax
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 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
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
