@The Texture #CodePenChallenge continues!
This week, we're taking inspiration from flora & fauna 🌸🦌
https://codepen.io/challenges/2023/April/3
Thanks @koredotai for sponsoring! https://t.co/xhfN9HcKRS
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use @counter-style to customize your <ol> list with a simple code
✅ No extra markup
✅ No pseudo-element
✅ No need for counter()
✅ Keep the default browser algorithm
Demo: http://codepen.io/t_afif/pen/GRYZeqr via @CodePen
#CSS https://t.co/hiq7mmGaYO
https://twitter.com/ChallengesCss/status/1647925597077643264
RT Matthias Hurrle
Yet Another Textured Glass Block https://codepen.io/atzedent/pen/eYPZqbg via @CodePen #codepenchallenge https://t.co/tIOJ9HPMaF
RT Wakana Y.K.
Today's work🏅
Stained glass
Demo: https://codepen.io/wakana-k/pen/YzJqBpM
Stained Glass textures is AI illustration.
@CodePen #codepen #threejs #Stainedglass https://t.co/5xO0ThGWgB
RT Jesse Couch
Now that we can start playing with :has(), I've gone back to the lightbox well on @CodePen to create a version that has previous and next capabilities. #NoJavascript #Slideshow #HTML #CSS
https://codepen.io/designcouch/pen/abRNObK
RT Amit Sheen
Was challenged to create this rotating text effect in pure #CSS...
Challenge accepted. 😎
Live demo on @CodePen: https://codepen.io/amit_sheen/pen/mdzVNrz https://t.co/dXHyHnNvZY
RT Konstantin Denerz
Check out my new @CodePen ! It uses CSS to visualize the intersection between a sphere and cubes ✨, featuring cool #CSS features like mask 🎭, cos() function, and @property of Houdini 🧙♂️.
🔗 https://codepen.io/konstantindenerz/pen/xxyZJpO
Inspiration: https://twitter.com/GuillaumeMitch/status/1646463654781501440
#css #animation #houdini https://t.co/skIbEb4pwQ
<div class="rsshub-quote">
Mitch.glow: I woke up this morning wandering if it was possible to animate boolean with @splinetool. I guess the answer is YES! RT, Like, Show your love 🌈 https://t.co/gzFH1vO2Wo
</div> https://twitter.com/kdenerz/status/1646651577510375433
A `:stuck` pseduo-class in CSS sure would be great for `position: sticky;` elements. Until we do (if we do!) we'll have to rely on `IntersectionObserver `. Ryan Mulligan has a nice clear demo.
https://codepen.io/hexagoncircle/pen/qBMeWqo
RT Matthias Hurrle
Hammered Steel
The fragment shader creates the illusion of a hammered steel plate inside a dodecahedron using raymarching and voronoise.
https://codepen.io/atzedent/pen/oNaboro via @CodePen #webgl #shader https://t.co/G2EboyocTP
RT Paul Roger
SOTD Challenge #2 : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/full/eYPpLVe
Inspired by : https://2authenticators.co/
@CodePen #codepen #gsap #js #css https://t.co/YRdsMJnSVT
RT Jon Kantner
Cooked up another toggle switch… and I mean cooked up! 🍳
https://codepen.io/jkantner/pen/rNqxNXW @CodePen #CSS https://t.co/7Qp4deszpu
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
Power scroll animations with the scroll-driven animations API 🚀
.car{
animation:drive;
animation-range:cover;
animation-timeline:brian;
}
Let Dom Toretto show you the animation ranges in "Tokyo Scroll"
p.s Brian is the orange car 😅
@CodePen link below!👇 https://t.co/lu6wI2J5dz
RT Sarah-Elizabeth Laws
The button pin badge!
Inspired by the badges I'd decorate my bag with as a teen for this week #codepenchallenge.
They might make for a fun alternative navigation or CTA maybe..
What do you think a fun use case could be?
https://codepen.io/akalaws/pen/QWZbeWy via @CodePen
RT nils binder 🏳️🌈
🥳🥰 Now that trigonometric functions are supported in CSS, I've updated my 2020 CodePen demo on creating diagonal layouts with CSS to showcase the use of the tan() function. Check it out here:
https://codepen.io/enbee81/pen/MWPwMMJ?editors=0100
https://twitter.com/supremebeing09/status/1645776387775639555
RT Paul Roger
Challenge : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/pen/QWZbqZz
Inspired by : https://www.torebentsen.com/ (@ToreBentsen)
@CodePen #codepen #gsap #js #css https://t.co/ePGOUKX2JI
RT Frank Eno 👾 XSGames
Pure CSS Typewriter effect
https://codepen.io/frankeno/pen/QWmmxQb
↖︎
🤖
👇👕👇
👖
RT Juxtopposed
using this real-time UI colorpicking tool, now you can find random trendy color palettes on the design itself.
just press the Spacebar and get started :)
try it out now on @CodePen:
https://codepen.io/Juxtopposed/full/VwGovbY
or check live site: https://realtimecolors.com
#codepen #webdesign https://t.co/AqWmStqLaS
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
