Collective #643
Publikováno: 7.1.2021
ASCII Art Playground * The future of CSS * Figma Crash Course * The Devil's Albatross
The post Collective #643 appeared first on Codrops.

Inspirational Website of the Week: Sam Goddard Dev
A great portfolio with a strong design and fantastic typography. Our pick this week.

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.

Figma Crash Course
A fantastic free Figma course by Pablo Stanley.

The future of CSS: Higher Level Custom Properties to control multiple declarations
Bramus Van Damme on the exciting new idea of Higher Level Custom Properties.

The Art of Building Real-life Components
A walkthrough on building a component with HTML & CSS in details by Ahmad Shadeed.

How we built the GitHub globe
Learn how the globe was built for the new GitHub website.

ASCII Art Playground
A browser-based live-code environment with text-only output. Learn how to use it in this manual.

Translucent Pearls
A beautiful demo of translucent pearls by Arno Di Nunzio.

Magazine Layout for Viola Site
A great implementation of a multi-column layout.

Top Pens of 2020 on CodePen
The yearly collection of the most hearted Codepen demos is out!

Options for styling web components
Nolan Lawson shows the different ways a standalone web component can expose a styling API and covers strengths and weaknesses of each technique.

Discover the best websites of 2020!
Explore the best designs on Awwwards of 2020 and leave your vote.

The Devil’s Albatross
Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout. By Nils Binder.

Art Direction for Static Sites
Dave Rupert shows how to spice up your blog posts with minimal effort.

You want overflow: auto, not overflow: scroll
Some very useful insights regarding the visible scrollbar problem by Kilian Valkhof.

The State of CSS 2020: Trend Report
The State of CSS survey results boiled down to the three key CSS trends of the past year.

Back to basics: adding a playback speed control to an audio player
Christian Heilmann shows how to add a speed control in audo players using basic HTML5 and JavaScript.

Fire ball 2
Yoichi Kobayashi’s sketch that is an example of how to use SkinnedMesh, Skeleton, and Bone by creating a fireball tail.

Simulating Drop Shadows with the CSS Paint API
Steve Fulghum looks at how we can use the CSS Paint API to paint a complex shadow within a border image.

Fantasy UIs
If you didn’t know about it: super interesting interviews about fantasy user interfaces.

The Most Interesting Developer Tools for 2021
The 60 most interesting and useful developer tools from the past year, as seen by the CTR stats from Louis Lazaris’ weekly newsletter on tools.

CV Boostifier
An open source tool for creating cool CV online made for developers by developers.

Write code. Not too much. Mostly functions.
Some good advice based on an analogy by Brandon Smith.

CSS paper snowflakes
Some lovely CSS paper snowflakes made by Michelle Barker.

LinkAce
LinkAce is a free and open source bookmark archive for long-term storage and organization of your favorite links.

Peaks of Austria
Explore the peaks of Austria in 3D in your browser, both on the desktop and mobile.

A Look Back at 2020: Roundup of Codrops Resources
2020 is almost over. Join us for a look back on some of our articles, tutorials and experiments.

Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
The post Collective #643 appeared first on Codrops.