Collective #655
Publikováno: 1.4.2021
SVG Generators * Best practices for cookie notices * Overlay Fact Sheet * Skribbl
The post Collective #655 appeared first on Codrops.
Inspirational Website of the Week: BLUE HAMHAM
The website of the four music-eating Space Hamster brothers is an absolute winner in every aspect: joyful animations and superb interactions.
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Building a Magical 3D button with HTML and CSS
Learn how to build an animated 3D button with HTML and CSS that sparks joy.
SVG Generators
A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators.
Font size is useless; let’s fix it
A great article on the concept of font size, why it’s a problem and how to fix it.
Developing For Imperfect: Future Proofing CSS Styles
Learn how we can plan future-proof styles in a world with an infinite degree of device and user ability variance.
Container Queries are actually coming
Read how we’re finally getting container queries and how they will transform UI design, just like media queries did.
Soccer ball icon speedrun
A great explanatory walk-through explaining one of Marc Edwards’ amazing speedruns.
Dark mode in 5 minutes, with inverted lightness variables
Lea Verou shows how to use inverted lightness variables in CSS to create a super-slick Dark Mode option.
Nailing That Cool Dissolve Transition
Yehonatan Daniv explains how to code a simple, yet stunning dissolve transition for images.
Best practices for cookie notices
Learn how to optimize cookie notices for performance and usability in this article by Katie Hempenius.
esoteric.codes
A great site that collects languages, platforms, and systems that break from the norms of computing.
Overlay Fact Sheet
An important open letter about accessibility overlays which concludes that “No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk”.
Skribbl
Free, hand-drawn illustrations brought to you by a growing community of aspiring creatives.
Not Your Typical Horizontal Rules
Sara Soueidan shows a technique for a horizontal rule that is styleable & customizable using CSS, and accessible.
Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
A very useful trick by Michelle Barker on how to set styles to a pseudo-element with JavaScript.
Quick CSS typography tip
A really great tip by Mark Boulton on naming opentype features in CSS.
Who has the fastest F1 website in 2021?
The last part in a series looking at the loading performance of F1 websites.
How to trigger a CSS animation on scroll
A step-by-step tutorial for how to create a CSS animation and trigger it on scroll using the Intersection Observer API. By Nick Ciliak.
Under-Engineered Select Menus
Adrian Roselli show how to use CSS to style the <select> element.
Inspirational Websites Roundup #24
A fresh collection of hand-picked websites with interesting and outstanding designs to get you updated on the current trends.
UI Interactions & Animations Roundup #15
A fresh set of hand-picked animation shots that show the current trends in motion and interaction design.
The post Collective #655 appeared first on Codrops.