@RT Amit Sheen
* SINGLE DIV STEPS *
While playing with 'fake' perspective in CSS, I built these steps with one div (plus a couple of pseudo elements) and some creative use of background-image.
Live demo on @CodePen: https://codepen.io/amit_sheen/full/KKrLvXJ
* Hover over the image to see the 3D effect.
RT Ana Tudor 🐯🖤🌻
#tinyCSStip Want to get a progressive grayscale()/ saturate() filter effect, from 0% to normal?
Blend with a gradient from *anything with saturation 0%* to transparent using the color blend mode!
https://codepen.io/thebabydino/pen/rNQbEEg
May also have a grayscale split https://twitter.com/anatudor/status/1351781587889889283
<div class="rsshub-quote">
Ana Tudor 🐯🖤🌻: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes.
background: url(cat) 50%/ cover,
linear-gradient(-45deg, transparent 50%, grey 0);
background-blend-mode: luminosity
Many variations possible.
</div>
https://twitter.com/anatudor/status/1688955652519997444
Pepperoni Pizza in SVG with no assets, just patterns and filters! Clever.
https://www.youtube.com/shorts/DANXG6sIlqM
RT Mads Stoumann
Some <figure>s in a 1960's magazine layout: https://codepen.io/stoumann/pen/mdQgppx via @CodePen
The August #CodePenChallenge starts now!
This month is all about photos 📸
Let's kick it off with a deep dive into figures
https://codepen.io/challenges/2023/august/1
RT T. Afif @ CSS Challenges
It's Celebration Time! 🎊🎉
𝟭𝟬.𝟬𝟬𝟬 𝗳𝗼𝗹𝗹𝗼𝘄𝗲𝗿𝘀: Thank you! 🥳
Demo: http://codepen.io/t_afif/full/rNQbagj via @CodePen
🎁 A surprise animation at the end of the demo is waiting for you. Click and enjoy!
(Best viewed on Chrome desktop)
#CSS
https://twitter.com/ChallengesCss/status/1688483032246697985
RT Yoav Kadosh
Pure CSS Solar Eclipse ☀️
Made with 18 layers of linear, radial & conic gradients. A "rotate" animation is applied to certain layers to move the rays.
@CodePen link - https://codepen.io/ykadosh/pen/GRwLKvV
RT T. Afif @ CSS Challenges
🎨 CSS Pattern!
Demo: http://codepen.io/t_afif/full/oNQVJzw via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1688133223476277248
"Gooey countdown svg" by Fabio Ottaviani
https://codepen.io/supah/pen/abVGjVq
RT T. Afif @ CSS Challenges
CSS Mask + Trigonometric functions + CSS variables + @property = A magic result! 🤩
✅ A fancy animation using only the <img> tag!
Demo: http://codepen.io/t_afif/full/XWyGWyJ via @CodePen
idea by @argyleink
#CSS
https://twitter.com/ChallengesCss/status/1687407874748633088
Why web components?
One reason: it's super fast and easy to use pre-built components that offer great functionality and are easy to style. Like Swiper!
https://codepen.io/chriscoyier/pen/QWJoWzY
RT Matthias Hurrle
Beneath the Frozen Veil
Deep under the unforgiving ice shield of the Antarctic mountain ridges, where few dared to venture, x-ray scanners unveiled enigmatic structures that seemed to have been hidden for eons. More on @CodePen 👇
"A Pure CSS 3D Maze!" by Ben Evans
https://codepen.io/ivorjetski/pen/poQpveN
RT Mads Stoumann
You could be a winner! 🤣 Lottery Number Generator https://codepen.io/stoumann/pen/xxQMMqQ via @CodePen
RT Chris Heilmann [email protected]
👉🏼 „Chris' Corner: Clever CSS Ideas & Explanations - CodePen Blog”
🔗https://blog.codepen.io/2023/07/31/chris-corner-clever-css-ideas-explanations/
💬 Frosted Glass, Nested Rounded Corners, CSS Masking and circular text with CSS
RT T. Afif @ CSS Challenges
💡 CSS Tip!
A simple design for your checkbox with a nice animation on click.
✅ No extra element (only the <input> tag)
✅ No pseudo-elements
✅ One value to control the size
✅ Less than 15 CSS declarations
Demo: http://codepen.io/t_afif/full/jOQdQOx via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1687037904466362368
RT Jon Kantner
A #CSS and #SVG text logo animation where everything is outlined, shaded, and then reversed
https://codepen.io/jkantner/pen/qBQgoKq @CodePen
RT Mads Stoumann
Vacation Time — greetings from Notting Hill! https://codepen.io/stoumann/pen/LYXqWem via @CodePen
RT T. Afif @ CSS Challenges
What about a wavy underline instead! 〰️
Powered by CSS mask, gradients, CSS variables and @property
Demo: http://codepen.io/t_afif/full/eYQxdbG via @CodePen
/cc @KevinJPowell
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: I had to try it 👇 and it was, indeed, a fun experimentation!
✅ Minimal HTML
✅ CSS-only
✅ No magic numbers
✅ Works with any number of elements
Demo: http://codepen.io/t_afif/full/bGQOaEb via @CodePen
#CSS
</div> https://twitter.com/ChallengesCss/status/1686699470946205696
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
