Collective #636
Publikováno: 26.11.2020
Web Development for Beginners * Playfulness In Code * Text Gradients in CSS * What are design tokens?
The post Collective #636 appeared first on Codrops.
Inspirational Website of the Week: Loftgarten
Design excellence in every way: layout, typography, colors and interactions are just spot-on!
The Divi Black Friday Sale
Black Friday is the only time each year that we offer 25% off new Divi memberships and Divi membership upgrades and along with each purchase, customers also get access to a free prize. We are giving away premium Divi modules, child themes and layouts in batches.
Playfulness In Code: Supercharge Your Learning By Having Fun
The master of dev fun, Jhey Tompkins, shows how having fun can supercharge your learning in this great article.
Swimming on Scroll with GSAP
Alex Trost dissects the amazing “Weird Fishes” demo by Michelle Barker.
What are design tokens?
Learn why design tokens are a powerful way of sharing design properties and how they work.
Color Theming with CSS Custom Properties and Tailwind
Michelle Barker explains how custom properties can be used for theming, and how they can be integrated with Tailwind to maximize the reusability of our code.
Tomorrowland: Digital Event
Dogstudio’s great case study of how they built a new kind of immersive experience for Belgium’s EDM sweetheart.
Web Development for Beginners – A Curriculum
Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics.
Text Gradients in CSS
A great tip on how to create text gradients in CSS using the background-clip property.
The case for Weak Dependencies in JS
Lea Verou has some interesting thoughts in “weak dependecies” in JavaScript.
Liquid masking – scroll
A great demo by Cassie Evans that shows a cool liquid masking scroll effect.
Thinking Like a Front-end Developer
Learn how to think as a front-end developer and account for edge cases you might have missed.
MIDWAM
A really cool immersive web experience.
Disable mouse acceleration to provide a better FPS gaming experience
Learn about how web apps can now disable mouse acceleration when capturing pointer events.
Draggable elastic
A great starting template for a cool slider by Jesper Landberg.
CSS clip-path Editor
A very useful clip-path editor made by Mads Stoumann.
The most accurate way to schedule a function in a web browser
A detailed analysis of 3 JavaScript timeout strategies (setTimeout, requestAnimationFrame & Web Worker) and how they perform in thousands of web contexts. By Benoit Ruiz.
Shifting an image with canvas
Christian Heilmann shows how to use HTML canvas to shift the pixels of an image.
Flash Animations Live Forever at the Internet Archive
Great news for everyone concerned about the Flash end of life planned for end of 2020: The Internet Archive is now emulating Flash animations, games and toys in our software collection.
Building a Web App Powered by Google Forms and Sheets
Learn how to use Google Forms and Sheets to build a client-side application.
A centered CSS navigation with fit-content
Stefan Judis shows a CSS pattern that uses ‘fit-content’ to center a flexible-width navigation.
Modern HTML Starter Template
Igor Agapov created this starter template for HTML projects that comes with some useful contents.
Inspirational Websites Roundup #20
Our favorite website designs that we’ve collected over the past couple of weeks for your inspiration.
Image Stack Intro Animation
Two simple intro animations where an image stack moves to become a grid using GSAP and Locomotive Scroll.
Replicating the Icosahedron from Rogier de Boevé’s Website
Learn how to replicate the beautiful icosahedron animation from Rogier de Boevé’s website using Three.js and GLSL.
The post Collective #636 appeared first on Codrops.