Search
Colorful Typographic Experiments
21.2.2019
There have been some interesting, boundary-pushing typography-related experiments lately. I was trying to think of a joke like "somethings in the descenders" but I just can't find something that will stand on its own leg without being easy to counter.
Codrin Pavel created a fascinating multi-color...
A Funny Thing Happened on the Way to the JavaScript
12.2.2019
Around this time last year, I wrote an article about the JavaScript learning landscape. Within that article, you’ll find my grand plans to learn JavaScript — complete with a link to a CodePen Collection I started for tracking my progress, and it even got dozens of comments cheering me on.
Like most...
Revisiting the abbr element
7.2.2019
An irresistible HTML element deep dive from Ire Aderinokun, this time on the <abbr title=""> element for abbreviations. You can kinda just use it (JUI) and it works fine, but if you're hoping to make a tooltip for them (which works on touchscreens as well), then it's much more complicated....
Come to An Event Apart in 2019
7.2.2019
The 2019 season for An Event Apart (the premiere web and interaction design conference) is about to kick off!
Seattle - March 4–6, 2019
Boston - May 6–8, 2019
Washington DC - July 29–31, 2019
Chicago - August 26–28, 2019
Denver - October 28–30, 2019
San Francisco - December 9–11...
Slide an Image to Reveal Text with CSS Animations
29.1.2019
I want to take a closer look at the CSS animation property and walk through an effect that I used on my own portfolio website: making text appear from behind a moving object. Here’s an isolated example if you’d like to see the final product.
Here’s what we're going to work with:
See the...
New CodePen Feature: Prefill Embeds
21.1.2019
I've very excited to have this feature released for CodePen. It's very progressive enhancement friendly in the sense that you can take any <pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. It also...
Converting Color Spaces in JavaScript
10.1.2019
A challenge I faced in building an image "emojifier" was that I needed to change the color spaces of values obtained using getImageData() from RGB to HSL. I used arrays of emojis arranged by brightness and saturation, and they were HSL-based for the best matches of average pixel colors with...
Styling a Web Component
8.1.2019
This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this:
See...
The Most Hearted of 2018
4.1.2019
We've released the Most Hearted Pens, Posts, and Collections on CodePen for 2018! Just absolutely incredible work on here — it's well worth exploring.
Remember CodePen has a three-tiered hearting system, so while the number next to the heart reflects the number of users who hearted the item...
Awesome Demos from 2018
1.1.2019
This is an outstanding list of creative and artistic browser demos from this past year from Mary Lou at Codrops.
Direct Link to Article — Permalink… Read article
The post Awesome Demos from 2018 appeared first on CSS-Tricks
Styling a Select Like It’s 2019
31.12.2018
It's rather heartwarming to know you can style a <select> in a rather cross-browser friendly way that doesn't hurt accessibility. Kudos for documenting this Scott!
See the Pen Styled <select&rt; by Chris Coyier (@chriscoyier) on CodePen.
Direct Link to Article —...
Gradient Borders in CSS
28.12.2018
Let's say you need a gradient border around an element. My mind goes like this:
There is no simple obvious CSS API for this.
I'll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around...
An Initial Implementation of clip-path: path();
24.12.2018
One thing that has long surprised (and saddened) me is that the clip-path property, as awesome as it is, only takes a few values. The circle() and ellipse() functions are nice, but hiding overflows and rounding with border-radius generally helps there already. Perhaps the most useful value...
Reversing an Easing Curve
17.12.2018
Let’s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword.
See the Pen Carousel with reversed...
Creating an Animated Login Form for TouchID
11.12.2018
I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out a bunch of different things, and about a year later, I finally managed to make this demo.
I learned a couple...
The Software We Pay For
5.12.2018
We did a Web Developer Economics series a few years ago, where we looked at the various costs of being a web developer:
Web Developer Economics: One-Off Software Costs
Web Developer Economics: Hardware Costs
Web Developer Economics: Monthly Service Costs
Web Developer Economics: The Wrapup
I'm...
Script & Style Show: Episode 23: Blogging, CodePenning, and Podcasting with Chris Coyier
1.10.2018
In this episode: David kicks off by recounting a heroic (and tiring) sprint across the O’Hare airport to make his flight home from Toronto. CSS-Tricks scribe Chris Coyier joins Todd and David to discuss CSS-Tricks, CodePen, podcasting, and numerous walks down memory lane. This episode...
Stuff you can do with CSS pointer events
27.7.2018
Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within).
Here's how I reasoned it out to myself:
You know how if...
Scrolling Gradient
13.7.2018
If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.
But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike...
Building a Complex UI Animation in React, Simply
12.7.2018
Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It's an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate.
This is...