Discoveries #17 - CSS
- Easing Functions Cheat Sheet
- A New Way To Reduce Font Loading Impact: CSS Font Descriptors
- Container Queries in Web Components
- Multi Color Text With CSS
- Conditional Border Radius In CSS
- Icons in Pure CSS
- Defensive CSS
- How to Create a CSS-Only Loader Using One Element
- Getting Your head Straight: A New CSS Performance Diagnostics Snippet
Easing Functions Cheat Sheetby Andrey Sitnik & Ivan Solovev
Ever wanted to implement an easing function in CSS and dont know how? Andrey and Ivan provide a really useful web project via Github, with the code of 30 easing function, including samples and the math functions behind. Download or fork and run locally or simply use this gitpod Link.
A New Way To Reduce Font Loading Impact: CSS Font Descriptorsby Barry Pollard
Barry gives an insight into the modern use of web fonts, hints on how to use
font-display and an outlook on how everything could be better in the future.
Container Queries in Web Componentsby Max Böck
Container Queries are one of the most anticipated new features in CSS and Max gives an insight into the possibilities, including a demo.
Multi Color Text With CSSby Shireen Taj
UI developer Shireen has made a wonderful sample on CodePen on how to show text in multile colors using linear gradient backgrounds.
Conditional Border Radius In CSSby Ahmad Shaheed
CSS expert Ahmad shows us a smart way to provide different border radius regarding the size of an object in the viewport, he has learned from the facebook developers.
Icons in Pure CSSby Anthony Fu
Anthony has found a clever way on combining the icon framework iconify with CSS, to save the use of icon fonts and deliver pure SVG instead.
Github user ‘Matyanson’ has written a CSS package for using parallax effects easily on every website.
Defensive CSSby Ahmad Shaheed
In order to prevent pittfalls, you have to use CSS wisely. Ahmad show us some techniques on how to write defensive and thus protected code.
How to Create a CSS-Only Loader Using One Elementby Temani Afif
Loaders are everywhere and many of them are based on images or SVG. But this does not have to be, as Temani finds. CSS is perfectly sufficient for this.
Getting Your head Straight: A New CSS Performance Diagnostics Snippetby Vitaly Friedman
Chrome Debugger has tons of possibilities to ensure to find performance bottlenecks or other discrepancies. Vitaly brings us closer a little snippet that Harry Roberts wrote, which exposes potential performance issues in your page’s
<head> tag: ct.css.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...