@RT comicss
An animated version of today's cartoon! It is also coded in HTML and CSS, with some CSS animations.
Live demo and source code: https://codepen.io/alvaromontoro/pen/GRXGPBP
Cartoon on comiCSS (static image): https://comicss.art/?id=80
#css #html #video #codepen #animation #comic #webcomic #comicss https://t.co/AbXnCvFE9A
RT Konstantin Denerz
Check out my new CSS art made with conic gradients ✨.
🔗 https://codepen.io/konstantindenerz/pen/abaaWEE
via @CodePen
#css #conicgradient #art https://t.co/rhPouLfrSl
RT kotAndy 🐾
Working on text animations for my project, I was excited to experiment with a few different effects on @CodePen for the first time! Thanks to @greensock and @codrops playgrounds for inspiration and opportunity to realize it all ❤️
https://codepen.io/kotAndy/full/YzOjrxg https://t.co/weOr0gcBG9
RT George Park
Been a while since I challenged myself to make something interesting so whipped together a responsive animated radar scanner using CSS gradients, check it out on @CodePen! https://codepen.io/GeorgePark/full/wvEExqg https://t.co/7vlxLaFNVV
The "Buttons" #CodePenChallenge continues 💪
This week, let's expand on the theme with Expanding Buttons!
https://codepen.io/challenges/2023/march/3 https://t.co/BhxswX1I2o
RT jhey 🔨🐻✨
Future UI Tip! 🔮
Create popups with HTML & CSS alone
– No z-index fighting 🙌
- Keyboard controls and autofocus
- Light dismiss
- Styleable backdrop
This is all you need! 👇
<button popovertarget=pop>Toggle</button>
<div popover id=pop>Popover!</div>
@CodePen link below! 🔥 https://t.co/3RToH3ccvT
<div class="rsshub-quote">
Intent To Ship: Blink: Intent to Ship: The Popover API https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM%3DNeDibTKMw-JK97b4UE1Z6TdaODxUArcM8YsLDGwAV29mOYw%40mail.gmail.com
</div>
https://twitter.com/jh3yy/status/1636848636356116481
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add rotating circles around your image with a nice hover effect
✅ Only one element (the <img> tag)
✅ No pseudo-element
✅ Optimized with CSS variables
✅ Powered by trigonometric functions and @property 🤩
Demo: http://codepen.io/t_afif/full/oNPyPQd via @CodePen
#CSS https://t.co/DNLhMQz3L2
https://twitter.com/ChallengesCss/status/1636676216093646849
RT Konstantin Denerz
My new pure CSS 3D switch @CodePen in glass-/ neumorphic style is available.
✅ Chromium browsers (Houdini 🧙♂️)
✅ CSS Variables
✅ at-property-rule 🧙♂️
✅ CSS Animations
✅ backdrop-filter
❌ no JS
🔗 https://codepen.io/konstantindenerz/pen/KKxeWKj
Inspiration: https://dribbble.com/shots/19453000-3D-Glass-Switch
#css #animation https://t.co/O3OJOH8f2y
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨
[href=blog]{anchor-name:--bl;}
:root:has([href=blog]:hover){--a: --bl;}
.cursor{left:anchor(var(--a) left);}
You can transition anchors! 😎
@CodePen link below! 👇 https://t.co/PvF9cRE0SZ
RT David Kjelkerud
Made a simple drawing app in 30 min using GPT-4. It's so good with code!
https://codepen.io/davidkjelkerud/pen/mdGxZqX https://t.co/txAMyCmQKe
https://twitter.com/davidkjelkerud/status/1636003986678644736
RT T. Afif @ CSS Challenges
A jumping radio button? Why not! #CodePenChallenge
🌟CSS-only powered by the :has() selector and some magic cubic-bezier()
Demo: http://codepen.io/t_afif/full/abaYxQj via @CodePen
#CSS https://t.co/B8mYrQtwCC
https://twitter.com/ChallengesCss/status/1635756368681398272
RT LukyVj - A$AP Luky
👋😎
My take on that excellent dropdown @ui8 recently shared 🔥
Here's a @CodePen with 3 versions just because 🤓
Using:
- CSS vars
- Houdini #css ( property at-rule & vars transition )
- :has ( parent selector 👪 )
- :focus-within for the #a11y version
#frontend #webdesign https://twitter.com/ui8/status/1633368459319885825 https://t.co/cKZ7s5KFYA
<div class="rsshub-quote">
UI8: Fun with dropdowns in @figma ✨ https://t.co/MMkOdZSjrP
</div> https://twitter.com/LukyVJ/status/1635693759714164736
RT Konstantin Denerz
Check out my new @CodePen that demonstrates light effects ✨ with cool CSS features like:
- conic- & linear-gradients
- @property
- CSS variables
- filter
- clip-path (custom shapes)
- mask (border-gradient)
🔗 https://codepen.io/konstantindenerz/pen/yLxpjYz
#css #animation #fluxcapacitor #bttf https://t.co/Zh7rEYy9Gk
RT Chris Gannon
🍕Pizza Loader🍕 @CodePen https://codepen.io/chrisgannon/pen/abaEbaG @greensock #svg #animation #pizza https://t.co/SfLv9aVg1p
RT Amit Sheen
The triangle caterpillar (🔺🪱)
#CSS only.
Live demo at @CodePen: https://codepen.io/amit_sheen/pen/NWLXXdp https://t.co/PhK7KdraV7
RT Zajno
We recently stumbled upon @CodePen because we love to flex our skills and realized we haven't been showing off our development. Well, we're about to fix that!
1/2 https://t.co/92HhASvkN9
RT LukyVj - A$AP Luky
👋 Hey hey
Here is my @CodePen of the day!
Inspired by @madebyharsh on @Framer 🔥
Using:
- Houdini CSS 🪄
- CSS variables
- CSS :has (parent selector 👪 )
- Lots of pseudo-elements
- Lots of transitions 🎡
Best rendered in Chrome ✅
🔗https://codepen.io/LukyVj/pen/RwYjLwZ
#css #webdesign https://twitter.com/madebyharsh/status/1633459657133158400 https://t.co/3I7J6b94jM
<div class="rsshub-quote">
Harsh Katariya: Glowing tabs 🔥
Made with @framer
_____________________
https://glowingtabs.framer.website/glowing-tabs
_____________________
@JoshGuoSpace @learnframer @framerlyco @framerclub @BlessCreatics @benjaminnathan @aleksliving @liampmccabe @itsnotnabeel https://t.co/8mDoAd7fvP
</div> https://twitter.com/LukyVJ/status/1635268145882763265
The March #CodePenChallenge continues!
For week 2 of the Buttons challenge, let's turn up the radio 📻
https://codepen.io/challenges/2023/march/2 https://t.co/OiWiFRVOlb
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy hover effect to your image
✅ One element (no pseudo-element)
✅ Optimized with CSS variables
✅ Powered by trigonometric functions and @property 🤩
Demo: http://codepen.io/t_afif/full/NWLXqPz via @CodePen
#CSS https://t.co/tD3XbF5gvd
https://twitter.com/ChallengesCss/status/1634152470325633026
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
