Found 29 bookmarks
Newest
Highlight Text When a User Scrolls Down to That Piece of Text
Highlight Text When a User Scrolls Down to That Piece of Text
I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see …
·frontendmasters.com·
Highlight Text When a User Scrolls Down to That Piece of Text
The Surprising Truth About Pixels and Accessibility
The Surprising Truth About Pixels and Accessibility
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
·joshwcomeau.com·
The Surprising Truth About Pixels and Accessibility
A New Way To Reduce Font Loading Impact: CSS Font Descriptors
A New Way To Reduce Font Loading Impact: CSS Font Descriptors
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.
·smashingmagazine.com·
A New Way To Reduce Font Loading Impact: CSS Font Descriptors
Custom Select Styles with Pure CSS
Custom Select Styles with Pure CSS
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance...
·moderncss.dev·
Custom Select Styles with Pure CSS
CSS Stats
CSS Stats
Potentially interesting stats on stylesheets
·cssstats.com·
CSS Stats
Sarah Higley on Twitter
Sarah Higley on Twitter
Make SVG icons respect Windows High Contrast Mode without media queries:1. Use `fill: currentColor` on the SVG2. Set the desired `color` style on the parent element3. profit?— Sarah Higley (@codingchaos) February 6, 2020
·twitter.com·
Sarah Higley on Twitter
iamsteve – design & code tutorials
iamsteve – design & code tutorials
A blog written by Steve McKinney, focused on designing with Illustrator and writing maintainable CSS.
·iamsteve.me·
iamsteve – design & code tutorials
Jen Simmons on Twitter
Jen Simmons on Twitter
Want to use margin-left to move something off the page to *infinity*?? Yeah, here ya go:`margin-left: calc(-1*(1/0));` looks like we are about to make this work, too: `margin-left: calc(-infinity);`— Jen Simmons (@jensimmons) January 22, 2020
·twitter.com·
Jen Simmons on Twitter
SVG Animation Creator - Animate and Export SVG
SVG Animation Creator - Animate and Export SVG
Online SVG animator to easily import, view, animate and export SVG format. Animate SVG with our user-friendly tool, no advanced coding skills required! With SVGator you can create an SVG animation just by simply adding elements and animators to the timeline, changing keyframe values and exporting clean SVG code.
·www.svgator.com·
SVG Animation Creator - Animate and Export SVG
Zdog
Zdog
Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
·zzz.dog·
Zdog
Inclusively Hidden
Inclusively Hidden
Scott O'Hara recently published "Inclusively Hidden," a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when
·css-tricks.com·
Inclusively Hidden
Where Do You Learn HTML & CSS in 2019?
Where Do You Learn HTML & CSS in 2019?
The topic of how accessible it is for newbies and seasoned developers alike to learn CSS has been gaining steam as the complexity of the tools around it
·css-tricks.com·
Where Do You Learn HTML & CSS in 2019?
Ceaser - CSS Easing Animation Tool - Matthew Lein
Ceaser - CSS Easing Animation Tool - Matthew Lein
Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.
·matthewlein.com·
Ceaser - CSS Easing Animation Tool - Matthew Lein
Easing Functions Cheat Sheet
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
·easings.net·
Easing Functions Cheat Sheet
Web Font Optimization at NerdWallet
Web Font Optimization at NerdWallet
We recently spent time optimizing our font loading strategy on the Frontend Infrastructure team at NerdWallet. This is what we did and how…
·medium.com·
Web Font Optimization at NerdWallet
Griddy
Griddy
Learn the CSS Grid Spec
·griddy.io·
Griddy
CSS Reference
CSS Reference
An extensive CSS reference with all the important CSS properties and info to learn CSS from the basics.
·tympanus.net·
CSS Reference