Collective #649
Publikováno: 18.2.2021
Penpot * SmolCSS * Remotion * Building a Tabs component * Managing focus in the shadow DOM
The post Collective #649 appeared first on Codrops.
Inspirational Website of the Week: Wild Souls
A beautiful font pairing and saturated colors make this design really inviting. The result of a fantastic collaboration between Big Horror and No Matter.
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.
Page Transitions: Creative Examples, Resources and some Tips
Dive into the world of transitions and get inspired by wonderful examples and creative ideas.
Penpot
Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
Managing focus in the shadow DOM
Nolan Lawson describes what JavaScript libraries for focus management would need to do to support shadow DOM.
SmolCSS
Minimal snippets for modern CSS layouts and components, created by Stephanie Eckles of ModernCSS.dev.
Remotion
Create MP4 motion graphics in React. Leverage CSS, SVG, WebGL and more technologies to render videos programmatically with this tool.
Understanding Z-Index in CSS
A visual guide on how z-index and stacking contexts work in CSS.
The CSS File Size and Count Report for Premier League sites
An interesting file size report of CSS used on Premier League sites. Silvestar Bistrovi?.
github1s
One second to read GitHub code with VS Code. Just add 1s after github and press Enter in the browser address bar for any repository you want to read.
Building a Tabs component
A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.
Fitting Canvas Snow In a Tweet
Jon Kantner shows how to code up a really nice snow effect with minimal code.
Programmatically Generate Images with CSS Painting API
Viduni Wickramarachchi’s tutorial about the CSS Paining API and how to use it to generate a geometric image programmatically.
The web didn’t change; you did
A very interesting article by Remy Sharp where he explains why “the problem with developing front end projects isn’t that it’s harder or more complicated, it’s that you made it harder and more complicated”.
Only CSS: Placer Gold Rush
A beautiful CSS demo made by Yusuke Nakaya.
Faster JavaScript calls
Victor Gomes explains how the simple idea helped improve performance of JavaScript calls.
CSS Border Font
A supercool CSS based font made by Davor Suljic using borders.
Managing CSS Z-Index In Large Projects
Steven Frieson shares an easy-to-implement mini-framework based on existing conventions for better managing z-index in larger projects.
CSS Switch-Case Conditions
Yair Even Or explains how to emulate switch-case conditions in CSS.
How to Greatly Enhance fetch() with the Decorator Pattern
Dmitri Pavlutin writes about how to use the decorator pattern to enhance the possibilities and flexibly of the fetch() API.
Is CSS float deprecated?
Robin Rendle explains why we can pack away float and only use it for making text flow around images.
Dialy: Open source UI Kit for Figma
Dialy UI Kit is a free, open source User Interface Kit for Figma, designed and released by Aayush Gupta.
Front-of-the-front-end and back-of-the-front-end web development
Brad Frost writes about the much-needed distinction between the types of web development that need to occur in order to build successful web things.
Accessing hardware devices on the web
François Beaufort explains how to pick the appropriate API to communicate with a hardware device of your choice.
Ideas for CSS Button Hover Animations
Some inspiration for button hover animations using CSS only.
The post Collective #649 appeared first on Codrops.