@RT jhey 🔨🐻✨
CSS Tip! ✨
Add some visual interest to your fading entry animations by adjusting brightness, contrast, etc. 🔥
keyframes enter {
0% {
opacity: 0;
filter: brightness(2);
}
}
@CodePen link below! 👇 https://t.co/zR465CfzXo
RT Bence
SVG filters are quite powerful. This image is 2.1 MB in JPG format, while in SVG it's only 480 bytes 🤯
Sand Grooves 🏖️ (480 bytes) #PetitePatterns on @CodePen #CodePenChallenge
https://codepen.io/finnhvman/pen/mdzbOEj https://t.co/bLGZyGHEco
RT Jordan Dey
Five lines of code for a colorful gradient effect 🌈🌈🌈
I made a @CodePen to show what we can do with #SCSS loops🌀
Take a look : https://codepen.io/DeyJordan/pen/BaOXNaE
#webdevelopment #frontend #CSS #codinglife #codepen #codingtips #webdesign #programming #CSS3 #HTML #html5 https://t.co/EQz9fVhcOL
<div class="rsshub-quote">
Jordan Dey: Why use loops with just #JavaScript, when you can use them with #SCSS too? Loops can save you a lot of time 🔄
Check out this demo using a #CSS helper for spacing
#webdevelopment #webdeveloper #webdev #codingtips #programming #frontend #webdesign #HTML #sass #CSS3 #html5 https://t.co/wW4CMq4t8D
</div>
https://twitter.com/DeyJordan/status/1642955857364221952
RT jhey 🔨🐻✨
Future CSS Tip! 🚀
Transition the display property 🤯
No animationend event listening required 😎
Toggle display:none & set your styles! ✨
.el{
--show:1;
opacity:var(--show);
transition:display 0.5s,opacity 0.5s;
}
[hidden]{
--show:0;
display:none;
}
@CodePen link below! 👇 https://t.co/DTC7vfSxQV
RT LukyVj - A$AP Luky
👋It's that time of the day!
Glad to share this Old School Calculator 🧮
Link at the end ⬇️
✅ #css color-mix
✅ :has()
✅ Grid layout
✅ lots of CSS variables, to switch theme
✅ Audio on click 🔊
✅ CSS @supports
Inspired by @SebastienNvzt's design ✨
#frontend #webdesign https://t.co/cj6BKxuFtX
RT Chris Gannon
Butterfly 🦋 @CodePen https://codepen.io/chrisgannon/pen/dyqEeYV @greensock #animation https://t.co/wv35OeDsMS
RT Ksenia Kondrashova
Draw GLSL flowers with your cursor! 🌺
One full-screen plane, two render targets, and a bit of shader magic
Live demo & source code: https://codepen.io/ksenia-k/full/poOMpzx
Made with @threejs
Hosted on @CodePen
Special thanks to @bookofshaders
#webgl #glsl #threejs #shader #drawingtool https://t.co/hQ480LjV4e
The April #CodePenChallenge starts now 💎
This month is all about Texture.
We're kicking things off with earthy textures 🌎🪨🏝
https://codepen.io/challenges/2023/april/1
Thanks @koredotai for sponsoring! https://t.co/bQjeACPy6m
RT Jon Kantner
If the Windows XP shutdown icon buttons were animated
https://codepen.io/jkantner/pen/oNPRMQY @CodePen #CSS #SVG https://t.co/9YOiA14cnW
RT Konstantin Denerz
Create a CSS-based holographic card ✨ using this simple trick from my @CodePen.
✅ Mask-Image 🎭
✅ Linear-Gradient 🌈
🔗 https://codepen.io/konstantindenerz/pen/XWPpvpg
Inspiration: https://twitter.com/drawsgood/status/1630570176037961733
#css #animation #csstrick #holocard https://t.co/PY95qOibLJ
<div class="rsshub-quote">
Drawsgood: Throwback Tuesday to this holographic card made in @rive_app
Check it out in the community here: https://rive.app/community/3515-7963-holo-card/ https://t.co/TbYlSjouVs
</div> https://twitter.com/kdenerz/status/1641179695298523136
RT Jesse Couch
Fun little bit of work on @CodePen for today's #codepenchallenge.
https://codepen.io/designcouch/pen/Jjaqrgg
RT Chris Gannon
Page Rotator @CodePen https://codepen.io/chrisgannon/pen/WNgWBRp @greensock (watch out for a special Easter edition coming soon!) #interactive #javascript #animation https://t.co/DKyiVRtJYr
RT jhey 🔨🐻✨
CSS Tip! 🤙
You could use CSS :has() to power a context-aware custom cursor experience 👆
:root:has(.player:hover) {--active: 1;}
.cursor {scale: var(--active);}
:root:has(.player:hover > [aria-label="Pause"])
.cursor-pause-icon {
display: block;
}
@CodePen link below! 👇 https://t.co/ntfuo0iiWq
RT Bence
Some color and pattern variants of squiggly neon🎨
Squiggly Neon 〰️ (326 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/RwYOLzK https://t.co/lAiqu8SZna
RT Karina Chow
I'm knee-deep in project planning, so going to revisit some projects in the past that might be interesting!
The first is a responsive animated triptych about sewing I made using NO JavaScript!
SVGs + CSS Animations
Spritemap
All CSS
See the CodePen:
https://codepen.io/karomancer/pen/yLNdeXE https://t.co/IDwPprp1W7
RT Juxtopposed
just made this design for the @CodePen play button challenge. been wanting to make this animation for a while now.
check it out on CodePen for a little surprise (it's not rickroll, I promise): https://codepen.io/Juxtopposed/pen/vYzPrbg
#CodePen #CodePenChallenge https://t.co/oPvF6KFlVJ
RT Matthias Hurrle
Reflections of Lullabies
To play a lullaby, press the button. Don't forget to turn on the 🔉 sound.
https://codepen.io/atzedent/pen/QWVPyLL via @CodePen
#codepenchallenge #webgl #shader #animation https://t.co/9C1uUWgROb
RT Adam Argyle
ya'll ready for this?
✅ in a cards "layer"
✅ when the user "prefers light" mode
✅ "scope" and trap the .card style
✅ "nest" within the scope to stay DRY
try in Canary with web experiments enabled
https://codepen.io/argyleink/pen/GRBMXyR https://t.co/v72OVTQag8
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use the new color-mix() to create different shades from one color.
Mix with ⚫️black for a darker color and ⚪️white for a lighter color
Demo: http://codepen.io/t_afif/pen/ExeMOPV via @CodePen
#CSS https://t.co/m5VP4QBP11
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Use the new color-mix() function to create a color switch.
✅ No color duplication
✅ Define your colors using one variable
✅ Easy switch between colors
✅ Suitable for dark/light mode
Demo: http://codepen.io/t_afif/pen/XWPGWPp via @CodePen
#CSS https://t.co/4l9uyVXPds
</div> https://twitter.com/ChallengesCss/status/1640674024438083584
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
