Code

Code

415 bookmarks
Newest
player.style - Video & audio player themes for every web player & framework
player.style - Video & audio player themes for every web player & framework
Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.
player.style - Video & audio player themes for every web player & framework
HTML for People
HTML for People
HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book.
HTML for People
Introducing TODS – a typographic and OpenType default stylesheet
Introducing TODS – a typographic and OpenType default stylesheet
Introducing a new open source web typography project. The idea is to have a default CSS file to set sensible typographic defaults for use on prose text, making particular use of the font features provided by OpenType.
Introducing TODS – a typographic and OpenType default stylesheet
Free Public APIs
Free Public APIs
A collection of Free Public APIs for Students and Developers. Tested every single day.
Free Public APIs
Clip Pathing Color Changes
Clip Pathing Color Changes
Let's look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It's an interesting look at this CSS feature and adds a lot of polish to a simple idea.
Clip Pathing Color Changes
Capsize
Capsize
Flipping how we define typography in CSS.
Capsize
The Ultimate CSS Shapes Collection
The Ultimate CSS Shapes Collection
The modern way to create CSS shapes using a minimal code and a single element. A collection of CSS-only shapes created by Temani Afif.
The Ultimate CSS Shapes Collection
2024 Cheat Sheet Collection
2024 Cheat Sheet Collection
In the fast-paced world of software development, time is of the essence, and having quick access to...
2024 Cheat Sheet Collection
Fine, I’ll Use a Super Basic CSS Processing Setup.
Fine, I’ll Use a Super Basic CSS Processing Setup.
If you need a mini build process just for your CSS, Lightning CSS is a pretty good modern choice. That, plus a file watcher and live reloader offers pretty good DX.
Fine, I’ll Use a Super Basic CSS Processing Setup.
How To Center a Div
How To Center a Div
Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use… But how do we pick the best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.
How To Center a Div
Animations on the web
Animations on the web
A course that teaches you how to craft animations that make people feel something.
Animations on the web
11ty Recipes
11ty Recipes
11ty.recipes helps you build an Eleventy site from scratch, showing you how to add individual features to craft the exact site you need.
11ty Recipes
Incredible scroll-based animations with CSS-only
Incredible scroll-based animations with CSS-only
Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions...
Incredible scroll-based animations with CSS-only
Free Tailwind CSS UI Components | CodeSnaps
Free Tailwind CSS UI Components | CodeSnaps
Access a library of React and Tailwind CSS components. Design and build better websites in minutes. No package installation required.
Free Tailwind CSS UI Components | CodeSnaps
An Interactive Guide to CSS Grid
An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.
An Interactive Guide to CSS Grid
Tutorial #1: Using Variable Fonts on the Web
Tutorial #1: Using Variable Fonts on the Web
DINAMO is a Swiss type design agency offering retail and bespoke typefaces, design software, research, and consultancy. Founded in Basel, we operate via a network of satellite members across the globe.
@keyframes ginto-animation { from { font-variation-settings: "wght" 0, "ital" 0, "NORD" 100; } to { font-variation-settings: "wght" 200, "ital" 100, "NORD" 200; } } .my-variable-text { font-family: "Ginto Variable"; transition: font-variation-settings 0.3s ease; animation-name: ginto-animation; animation-duration: 1.5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
Tutorial #1: Using Variable Fonts on the Web
Open Props: sub-atomic styles
Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
Open Props: sub-atomic styles
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine