RT Adam Argyle
CSS date/time picker concept:
grid + scroll-snap-points
demo
Codepen
https://cdpn.io/argyleink/debug/MWKxMyb
https://codepen.io/argyleink/pen/MWKxMyb
RT Sara Soueidan
This incredibly talented 7.5-year-old girl created a single-div CSS-only Panda and is sharing how she did it with the rest of the world 😍
My timeline's going to get even brighter from today on 💞
Diana: Day #79-82 #100DaysOfCode
WOW...I made a Panda in CSS using #singlediv 😃😎
I had to divide the video in 2 parts cause it was too long for twitter. I upload part 2 in another tweet
tnx 4👍
Pen Link👇
#CodeNewbie #codeNewbies #GirslWhoCode #KidsCanCode
https://codepen.io/superpowerkid/pen/YzGgGZp
RT Adam Argyle
Explode A Node!
an interactive CSS box model experience 🤓
source on @CodePen -
https://codepen.io/argyleink/full/BaLedvd
RT Derya Tanrıverdi
Polaroid Camera by HTML, SCSS, and JS!
Note: The version on Codepen doesn't have audio, as I still couldn't find a url for it! Click to take a photo!
#wwc #WomenWhoCode #css #cssart #html #javascript #Webdesign #SoftwareEngineer #FrontEnd
https://codepen.io/deryatanriverdi88/pen/ExgdOxq
RT Smashing Magazine
Re Everything z-index on @css
Everything z-index on @smashingmag
z-index-visualizer in VisBug
Z-Index Explorer in 3D DOM view in Edge
Microsoft Edge DevTools: Inspired by @FirefoxDevTools' Tilt feature, we just released the 3D DOM viewer in Edge Dev/Canary builds 😀
1) Enable Developer Tools experiments in about://flags
2) Ctrl+Shift+P > "Experiments" > "Enable DOM 3D view"
3) Ctrl+Shift+P > "DOM 3D View"
Let us know what you think!
Hey `caret-color` is probably not the most terribly useful CSS property around, but I just saw it in use on a site where their brand color was yellow and they used it on their forms and it was a nice touch.
https://css-tricks.com/almanac/properties/c/caret-color/
OOooo these emojis really POP with a light top-shadow and dark bottom-shadow.
(Via Pen by Dien Nguyen
https://codepen.io/dienhn/pen/xxErveM
RT Adrian Twarog 🦘
CSS Reset vs CSS Normalize.
Something I always confuse has been made so much easier with this visualisation...
.elijahmanor.com by { author: @elijahmanor }
RT CSS Weekly
CSS Weekly Issue #440
Learn why is CSS is easy to get started with and hard to master, how Houdini API's work, how to create effects with the CSS paint API, & more.
Featuring @una, @lynnandtonic, @mirisuzanne, @HugoGiraudel, @timseverien, @ShadowShahriar.
https://cssw.io/issue-440
RT Adam Argyle
CSS "individual transforms"
in 2021 we'll see these in a lot more styles! Firefox has it, Safari tech preview has it, and Chrome's nearly finished.
value:
- composable transforms
- single transform access
- write less
read more in the spec
https://drafts.csswg.org/css-transforms-2/#individual-transforms
::marker is fantastic and now available in all the modern browsers.
@simevidas notes a favorite use-case (list markers matching size of headers):
https://css-tricks.com/almanac/selectors/m/marker/
https://jsbin.com/mogotoxazo/edit?html,css,output
RT Adam Argyle
✅ *fixed* conic gradient background
✅ svg masked
<button>
✅ light & dark mode
✅ clean markup
✅ beautiful & dynamic result (imo)
`background: conic-gradient(...) fixed;` 🎉
effect is like each icon is a window to a shared color dimension.. 🤓
</button>
RT Adam Argyle
💡 FYI 💡
DevTools has Guides for when you need to check alignment 🤓
⚙️ Settings
▹ Preferences
▹ Elements
✅ Show rulers
They draw guides for the margin, padding and border boxes! Even for pseudo elements!! (VisBug doesn't do that)
Pretty rad.
RT Chrome Developers
🆕 Show 🆕
GUI Challenges!
Episode #1 - Thinking on ways to solve Stories
✅ #CSS
✅ #JS
✅ #HTML
Get inspired and challenged by
@argyleink to bring your UI/UX style to the table.
Watch
Read
Code
https://youtu.be/PzvdREGR0Xw
https://web.dev/building-a-stories-component/
https://web.dev/codelab-building-a-stories-component/
RT Adam Argyle
Fresh out the oven, a mini series on Houdini, from your favorite CSS podcast 😏
🎉 Houdini - Properties and Values API
- 1st of the mini series
- 4 more in the hopper
subscribe || listen 👉
https://pod.link/thecsspodcast/episode/ZTYyYmQzZWUtMmNkOC00YWE2LWFkNGYtNjQ5OTEyMjkxZTQ0
RT Michelle Barker
✨Experimenting with animated CSS glowing borders, made with Houdini (so Chromium browsers only)
RT Nicole 🤩 vote Vote VOTE VOTE VOTE VOTE!!! 🤩
This quote from @beep has got me thinking so much today... so well said. Full article here
https://ethanmarcotte.com/wrote/on-container-queries/
RT Adam Argyle 💀
#CSS
Media Scroller Layout with Grid 🤓
stumble along with me on YouTube 👉
find the code on @CodePen
https://youtu.be/2xrsK3JSBqw
https://codepen.io/argyleink/pen/jOrzEEM
Ever found yourself doing something like this?
.👻
.👻
.👻
.👻
.👻
I wrote just the article for you on @css! However you may be generating the HTML, here are some smarter ways 💡 to do it (and some cool 😎 demos using deep nesting!)
https://css-tricks.com/smarter-ways-to-generate-a-deep-nested-html-structure/
