@If y'all have a minute to our quick Member Survey, it's helpful to us a number of ways: https://codepen.wufoo.com/forms/codepen-member-survey/
🙌
RT T. Afif @ CSS Challenges
Here is my idea for the inverted border-radius layout 👇
Demo: https://codepen.io/t_afif/full/LYgaexY via @CodePen
Using mask to have transparency. A minimal HTML with no pseudo-element and some CSS variables to control everything (the gap, the radius, etc)
#CSS https://t.co/DdN7KNmkdM
<div class="rsshub-quote">
Kevin Powell: I've just put out a new video! Creating an inverted border-radius with CSS https://youtu.be/khjVPkO35F0
</div>
https://twitter.com/ChallengesCss/status/1661822077584789507
RT jhey 🔨🐻✨
Future CSS Tip! 📜
You can use scroll-driven animation to create cool scroll effects that change with viewport size 🤓
No JavaScript! 🤯
img {
animation: clip both;
animation-timeline: --article;
animation-range: exit;
}
@CodePen link below! 👇 https://t.co/5dae89MH3v
RT Carl 💥 Creative Coding Club
Just having a little isometric fun with #GSAP #SVG
It's often the small things that bring the most joy.
#creativeCoding
@CodePen demo right here
https://codepen.io/snorkltv/pen/gOBEOWb?editors=0010 https://t.co/sIhbbmrbRD
RT Matthias Hurrle
Re A fragment shader which features an octahedron flying through a procedurally generated crevice.
https://codepen.io/atzedent/pen/PoyLwoW via @CodePen #webgl #shader #animation3d
RT Elisabéth (Tee)
I watched some of my favorite Pokémon episodes this week including the episode inspiring this gem of an animation. Reading code I wrote as a #CSS newbie from #100daysofcode years ago feels as heartwarming as glancing at my old baby photos 🩷
CodePen: https://codepen.io/acupoftee/full/xxwKRxN https://t.co/liBTUTZkEN
https://twitter.com/elisabethdiang/status/1661413431478714374
RT Nicolas Jesenberger
Arc Time Slider using SVG & JS ☀️🌙
@CodePen below ⬇️ https://t.co/qjQjnAgMAk
RT Mikael Ainalem
Smooth hamburger menu animation that work across all popular browsers. Built with SVG and SMIL with over 98% browser compliance according to http://caniuse.com. On @CodePen https://codepen.io/ainalem/full/bGmzRbE https://t.co/g9B5y3DKnR
https://twitter.com/mikaelainalem/status/1661083734546759696
RT T. Afif @ CSS Challenges
The whole collection can also be found on @CodePen
👉 http://codepen.io/collection/pgyboM 👈
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: I did it! 100 Unique CSS Patterns 🤩
👉 http://css-pattern.com 👈
One of the biggest collection of CSS patterns ever!
✅ One-click to copy/paste
✅ One value to control the size
✅ Optimized with CSS variables
Which one is your favorite? Tell me in the comments 👇
#CSS https://t.co/6RSRYWcVvr
</div> https://twitter.com/ChallengesCss/status/1661314978660470786
RT Una 🇺🇦
Did you know popovers are about to land in stable Chrome?!
I just wrote a post all about how to use them 😁
Popovers give you a lot for free:
- top layer promotion
- light-dismiss behavior
- focus management
- accessible keyboard bindings
Learn more ⬇️
https://developer.chrome.com/blog/introducing-popover-api/
RT Jordan Dey
Discover the captivating world of #CSS backdrop filters!✨
Immerse yourself in a playground where you can change and multiply #filters effects🔍
Explore and experiment on @CodePen: https://codepen.io/DeyJordan/pen/oNaavJg
#HTML #javascript #web #design #CodeLearning #creativity #100DaysOfCode https://t.co/yEm6Akhp0w
RT Mads Stoumann
Tetris Testimonial Quotes https://codepen.io/stoumann/pen/LYgMwxZ via @CodePen https://t.co/O2gU2impFV
RT Ksenia Kondrashova
Have you ever been watched by @threejs' Torus Knot? I've got this silly demo playing with mesh normals and ShaderMaterial
Live demo & source code: https://codepen.io/ksenia-k/pen/gOBqPWX
Hosted on @CodePen
#webgl #glsl #threejs #shader https://t.co/DjGL45Irbr
RT Maciek Fitzner
To take a little breather from learning the back-end during the week, I spent 12+ hours on a Saturday working on another #3d #css sphere - this time made with just conic-gradients. Live #demo on @CodePen https://codepen.io/MackFitz/pen/YzJdKgm https://t.co/WDSU9FDBkc
RT Mike-麥-Mai/index.html
In the mood for poems.
So I made a little minimal layout,
set in Goudy Bookletter 1911—
a font by @theleagueof
https://codepen.io/mikemai2awesome/pen/JjmeqYp
#css #typography @CodePen
https://twitter.com/mikemai2awesome/status/1660668938395475970
It's the final week of the May #CodePenChallenge!
This week, let's style some ❝testimonial quotes ❞
https://codepen.io/challenges/2023/may/4 https://t.co/BAKvKZbI0s
RT LukyVj - A$AP Luky
I'm accepting contributions on http://buttons.cool, send me your sickest buttons
@CodePen only
RT Craig Roblewsky
A little @CodePen demo from a never published tutorial. Features @greensock's Draggable plugin to drag along the curve and the mapRange() utility method to fill as you drag along the curve. Also a little inertia so you can throw the target too.
https://codepen.io/PointC/pen/rNqqgvK
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Do you want to add a gradient overlay above your background but you cannot edit the background property, add an extra element or use pseudo-element? Do it with border-image!
✅ Only one line of code is needed 🤩
Demo: http://codepen.io/t_afif/pen/gOBBeyz via @CodePen
#CSS https://t.co/3i6lRYHwvB
https://twitter.com/ChallengesCss/status/1659155415014285317
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
