@RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy reveal animation to your images using a few lines of code
✅ Only the <img> tag
✅ Less than 10 declarations
✅ Optimized with CSS variables
Demo:
Explanation and more examples 👉
#CSS
http://codepen.io/t_afif/full/wvjPpmd
http://css-tricks.com/fancy-image-decorations-outlines-and-complex-animations/
https://twitter.com/ChallengesCss/status/1590715338450432000
RT Johan Karlsson
Organic Chaos - Animated on @CodePen:
Click to reset! - New random parameters and cleared screen
#creativecoding #generative
https://codepen.io/DonKarlssonSan/full/QWxKwaJ
https://twitter.com/DonKarlssonSan/status/1590433883568615424
RT Chrome Developers
SVG masks made easy!
🖍️ Fill with gradients
🔦 Adapt to light and dark themes
🎞️ Animatable
Catch @argyleink making some in the latest #GUISnippet →
Try on Codepen →
See an animated example →
http://goo.gle/3hvM4PT
http://goo.gle/3EiTyhV
http://goo.gle/3NRrHIK
RT Aaron Iker
Glow Button Hover ✨
Demo @CodePen
Concept by @nikitakoshi
Using @greensock
https://cdpn.io/XWYpyNM
RT Chris Coyier
Resizeable @CodePen Embed?
Add to your pages CSS:
.cp_embed_wrapper {
overflow: hidden;
resize: both;
}
Or just `horizontal`. Maybe a little `margin-inline: auto;` to center if you like that. More tricks in vid.
<kit-layout /> by Willson Smith
Looks like a Web Componen-ization of Ryan Mulligans
https://codepen.io/WillsonSmith/pen/JjZEoRV
https://ryanmulligan.dev/blog/layout-breakouts/
RT Yoav Kadosh
Experimenting with CSS 🧪
I made this 3d mechanical keyboard using a combination of CSS techniques, including transformations, gradients, box/text shadows, filters, and more!
@CodePen :
https://codepen.io/ykadosh/pen/bGKgxbe
RT Adam Argyle
design tip: (subtle!)
with your wells or inset shadows,
add 2 more shadows to emulate realistic light:
1. a strong thin shadow on top
2. a slight highlight on the bottom
inspect it on Codepen
https://codepen.io/argyleink/pen/yLEVdEX
RT jhey 🔨🐻✨
Not the easiest thing to make with HTML and CSS though 🤔
But. It's doable! ⚡️
Responsive too.
Trick is layering some pseudo-elements and using set border-radius based on "ch" 🤓
span:after {
content: "";
position: absolute;
inset: 0.25ch;
}
@CodePen link below! 👇
Zander Whitehurst: 🔤 Animating stretchy text in @figma,
supafast
RT Jon Kantner
Rolled out another preloader, and this one has a leak. 🙃
https://codepen.io/jkantner/pen/JjZRaLG
RT PodRocket
We have been hearing about island architecture a lot lately. Rach Smith (@rachsmithtweets) comes on to talk about islands, why they are in your website, and how they are architected.
Apple:
Spotify:
Google:
https://apple.co/3FICGSU
https://spoti.fi/3sX0sTt
https://bit.ly/3sZqplq
Re and thanks to @CurleyWebDev for this week's banner. We used Curley's "'80s Inspired Pure CSS graphics" Pen to make it ⭐️
https://codepen.io/curley/pen/zYrpVXb
The November #CodePenChallenge starts now!
This month theme is Design Decades
Each week, we'll take inspiration from decades of computer-focused design
We begin in the 1980s!
Thanks @ionos_com for sponsoring!
https://codepen.io/challenges/2022/november/1
RT David Aerne
I am not getting tired of animating color swatches on @CodePen
https://codepen.io/meodai/full/wvXWyrw
RT Ana Tudor 🐯🖤🌻
Best thing about @CodePen assets: the ability to edit .svg files!
RT Toshiya Marukubo
It’s been a while✌️
Gallery Example / Code👇
https://codepen.io/toshiya-marukubo/full/gOKMvPZ
https://twitter.com/toshiyamarukubo/status/1588545171591163906
RT Chris Coyier
The CSS property :focus-visible has great support. It means that focus styles don't apply on elements when clicked on with a fine pointer (mouse), but still do from other inputs (like tabbing), which is ideal.
Let's have a play, and make sure we have focus styles no matter what.
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
