@RT Álvaro Montoro
This search box component detects if the browser supports Speech Recognition API and adds a dictation option. Users can choose to type or talk.
Demo via @CodePen:
https://codepen.io/alvaromontoro/full/poPOoNW
https://twitter.com/alvaro_montoro/status/1423289443092467712
RT Florian 👨🌾
Have a light font color and a light image background ?
Simply apply a linear-gradient with a low opacity to make your text pop 💥
Demo available here 👉
🎵 Sun Clouds - Mokhov
#css #webdev
https://codepen.io/icesofty/pen/qBmMQvz
RT AdirCode
Sometimes I teach UI/UX Design and when we get to the lesson about UI animations, the students always complain that they can’t see the difference between the timing functions (ease-in, ease-in-out etc.)
So I built this @CodePen to compare them (#CSS only):
https://codepen.io/Adir-SL/full/GRmJERZ
RT Josh W. Comeau
🔥😮 CSS variables can be used *within CSS keyframe animations*!
Here, 3 boxes use the same “bounce” animation, but bounce by different amounts by each defining their own “--bounce-height” value 😄
Code:
https://codepen.io/joshwcomeau/pen/JjNaWRd?editors=1100
RT Chris Coyier
The August #CodePenChallenge Theme is "The Typography of Summer.
Week 1 is "Pool Rules" Signs, so I made up a simple one from a hotel pool sign I saw a few weeks ago.
https://codepen.io/challenges/2021/august/
https://codepen.io/chriscoyier/pen/xxdJedZ
RT Tirso
A mi me descuidan unas horas sin internet y hago un diseño bonito de una calculadora basandome en #glassmorphism con modo oscuro incluido y microinteracciones jajaja ♥
#htmlcss #uxui #darkmode #microinteractions #codepen #javascript
https://codepen.io/tirsolecointere/full/zYwWbWv
https://twitter.com/tirsolecointere/status/1422594146125111298
RT Rik Roots
I really like my efforts for this week's CodePen challenge. What's not to love about defacing a Hockney classic with some swimming pool signage? #CreativeCoding #codeart #javascript etc
https://codepen.io/kaliedarik/pen/LYyBpbw
RT Ryan Mulligan
A fun layout challenge: Align the start position of a horizontal scrolling gallery to a parent container's max-width while allowing its overflow to span the entire viewport. There is a way, my friends 😮
Check it out on @CodePen:
https://codepen.io/hexagoncircle/pen/gOWjwme
https://twitter.com/hexagoncircle/status/1422559196088737797
RT Stephanie Eckles
🟣CSS 101 - Element Visibility
display: none - removed visually and content is inaccessible
visibility: hidden - space is visible, content is hidden visually and is inaccessible
opacity: 0 - space is visible and content is accessible
https://codepen.io/5t3ph/pen/BaRPjqM
RT Yoav Kadosh
How can you align columns (or rows) of varying sizes to both sides (justify)?
One way is to apply a different scroll speed to each column (or row).
I made a pen to illustrate it:
https://codepen.io/ykadosh/pen/MWmGbVG?editors=0110
RT Louis Hoebregts
It took me 6 years to discover @threejs could render your scene in #SVG 🤯
Here is an animated SVG using @greensock
3D model -> Points cloud -> SVG circles -> Animation
Check it live on @CodePen 👇
https://codepen.io/Mamboleoo/pen/JjNvQGP
The August #CodePenChallenge starts now!
This month is all about the typography of summer, and we're kicking things off with Pool Rules signs 🏊♀️
Thanks @algolia for sponsoring!
https://codepen.io/challenges/2021/august/1
RT CSS {IRL}
✨Made a little something to celebrate 10K followers on this platform! Dissolving text with CSS Houdini (best viewed in Chromium browsers)
Thank you for all the support 💖
https://codepen.io/michellebarker/pen/poPVZrq
https://twitter.com/CSSInRealLife/status/1421226788185837572
RT Bramus!
Clever. With this you can basically adjust any green/red/blue emoji by doing 120 degree jumps back or forwards.
🔗 Demo on @CodePen:
(Note that OSes have different Emoji, and thus it may vary per platform)
Surma: Ever frustrated by the fact that ✅ only has a green counter part (❎) but not a red one?
CSS `filter: hue-rotate(-120deg)` can help!
RT Tanner Dolby
Rock Lee - shinobi of the Hidden Leaf Village 🥷
@CodePen:
https://codepen.io/tannerdolby/full/LYyQvjJ
RT Alena Nikolaeva 🌸
One of the tools that I use the most for accessibility debugging ❤️
Drag this thing to the bookmarks bar and it'll log out the element that you are currently on if the focus outline is not visible 💁🏼♀️
#a11y 🛠
👉
https://codepen.io/svinkle/pen/WgYRxq
RT Adam Kuhn
had a rare idle moment to dip into this week's fibonacci @CodePen challenge so I built this animated responsive 3d Foldin' Ratio w/ some box-reflect + backdrop filtering for extra funsies
thnx for lookin
https://codepen.io/cobra_winfrey/full/zYwWPZG
https://twitter.com/cobra_winfrey/status/1420781951603167236
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
