@RT Michelle Barker
Little demo using the `:has()` pseudo-class for a product grid, currently only in Safari. Too bad Safari doesn’t support animated grid tracks, otherwise this would be 100% pure CSS – I’m polyfilling with @greensock for now
https://codepen.io/michellebarker/pen/vYpdEgQ
RT Ana Tudor 🐯🖤🌻
#tinyCSStip Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?
Well, `@supports selector()` to the rescue!
@CodePen test:
https://codepen.io/thebabydino/pen/WNdEvzq
RT Jon Kantner
Thought I should try SVG animations for checkboxes including an indeterminate state.
https://codepen.io/jkantner/pen/BaJmyjo
RT Brian Haferkamp
New Video! 🥳
Create a Hero Section with Animated Text
This is not that difficult and adds 🪄 to your #website. Video is packed with tips for your #webdevelopment journey :-)
Code on @CodePen:
#webdesign #webdev #css
https://youtu.be/iX75XunOfDw
https://codepen.io/brianhaferkamp/pen/vYppgba
https://twitter.com/BrianHaferkamp/status/1510970750219526147
The April #CodePenChallenge starts now!
This month is all about Little Details 💎
We're kicking it off with list styles
Thanks @memberful for sponsoring!
https://codepen.io/challenges/2022/april/1
RT Amit Sheen
3D Floating Headers.
(Made for the Huge Headers #CodePenChallenge)
Full code @CodePen:
https://codepen.io/amit_sheen/pen/BaJmWWj
RT S. Shahriar thinks you are awesome 😊 so he
If we can have n-gon shapes, we can have n-gon pyramids too! We only need to calculate the slant height and angle 😉
So, I coded a 3D Pyramid with SCSS
Try it on @CodePen:
(drag to rotate, double-click to animate the rotation)
S. Shahriar thinks you are awesome 😊 so he: 20 lines of PUG, ~80 lines of SCSS, and you gift yourself a good-looking CSS 3D pentagon. Sweet, right? 😄
Psst! n= 42 makes a cylinder/disc 😆
Full code on @CodePen:
Yep, it was fun!
https://codepen.io/ShadowShahriar/pen/vYepQNa
https://twitter.com/ShadowShahriar/status/1509920900941971461
RT Adam Argyle
Had a play with Open Props yet?
Here's a starter with the props, the normalize and the buttons ready for your next demo 🙂
dark theme shown, but has an automatic light/dark theme built in!
https://codepen.io/argyleink/pen/OJzxeZe
RT Aaron Iker
High Five ✋
@CodePen
Created with @greensock
https://cdpn.io/gOoGejN
RT Takane Ichinose 市瀬峻峰
Bit Maze - Platformer Maze using @phaser_
Guide Appley to find the sprout in this weird dungeon.
This weird dungeon have so many traps, be careful of them!
#JavaScript #webgame #madewithphaser #pixelart #gamedev
https://codepen.io/takaneichinose/pen/jOYPjgz
RT Jhey 🔨🐻✨
Re Or how about sine wave inputs? 🌊
Again, CSS accent-color at play ✨
👉
http://codepen.io/jh3y/pen/RwxZMYX
RT una.css 👩🏻💻🇺🇦
Did you catch that the dialog element became stable in all modern browser engines this month? 🎉
Here's a quick walkthrough video & demo to play with:
Webkit blog:
MDN docs:
https://codepen.io/una/pen/dyJRwvG
https://webkit.org/blog/12209/introducing-the-dialog-element/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
RT 小山最中
ドロネー図の三角形をcurveVertex()で描いてみる。
#019 Handwritten Delaunay Diagram
#creativecoding #generative #p5js
https://codepen.io/koyamamonaka/pen/LYeLmEP
RT T. Afif @ CSS Challenges
🎨 CSS Art
I am adding a demon slayer to the list. Take a deep breath and say hello to 𝗧𝗮𝗻𝗷𝗶𝗿𝗼 𝗞𝗮𝗺𝗮𝗱𝗼 ⚔️
Demo:
✅ A CSS-only illustration (No images and No SVG)
Find more at
#CSS #cssart #DemonSlayer
http://codepen.io/t_afif/full/ExoXoRa/
http://css-only.art/
https://twitter.com/ChallengesCss/status/1508804932522156037
RT Amit Sheen
CSS Dots Wave 😵💫
(Using a combination of 2 delay values on one animation)
Full Code @CodePen:
https://codepen.io/amit_sheen/pen/vYpZBwP
RT Ryan LaBar
Motion Tip Monday: Creating a dynamic HTML text on a circle component. Developed using @greensock's SplitText plugin, a little regex, and some math. #FrontEnd #javascript #creativecoding #webdev #Webdesign
Check out the @CodePen -
https://codepen.io/ryan_labar/pen/GRymrwr?editors=0010
It's the final week of the "Go Big" #CodePenChallenge 💪
Let's make some Huge Headers!
Thanks @sourcegraph for sponsoring!
https://codepen.io/challenges/2022/march/4
RT chrisbautista
Animated BottomBar Experiment (CSS Transitions only)
https://codepen.io/chrisbautista/pen/NWXjqLN
https://twitter.com/chrisbautista/status/1508227951652847616
RT Jon Kantner
Light/Dark Toggle With Morphing Icon
https://codepen.io/jkantner/pen/eYygqJm
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
