Search
How-to guide for creating edge-to-edge color bars that work with a grid
1.7.2020
Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want...
JavaScript in SVGs
30.6.2020
SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They’re part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides. Whats one example of that...
Line-Animated Hamburger Menu
26.6.2020
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
CodePen Embed...
Rough Notation
22.6.2020
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are 6 design options, all configurable). Super clever.
Here’s a little demo:
CodePen Embed Fallback
Aside from it just being cool,...
Creating an Accessible Range Slider with CSS
7.5.2020
The accessibility trick is using <input type="range"> and wrestling it into shape with CSS rather than giving up and re-building it with divs or whatever and later forget about accessibility.
The most clever example uses an angled linear-gradient background making the input look like...
Click Once, Select All; Click Again, Select Normally
29.4.2020
A bonafide CSS trick from Will Boyd!
Force all the content of an element to be selected when clicked with user-select: all;
If you click a second time, let the user select just parts of the text as normal.
Second click? Well, it’s a trick. You’re really using a time-delayed...
Cloudinary Studio
2.4.2020
I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an <iframe> that comes with a special player.
I was curious because, as much as...
Creating a Pencil Effect in SVG
28.3.2020
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different...
How to Animate Text with SVG and CSS
26.3.2020
The other day I was helping my pal Jez work Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?
Like this:
CodePen Embed...
Did You Know the Ordered List Element Has Start and Reversed Attributes?
24.3.2020
I sure didn't! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute:
<ol reversed<liApple</li<liBanana</li<liPear</li</ol
CodePen Embed Fallback
And the start attribute can be added to begin the list at a number other...
Flexible Repeating SVG Masks
22.3.2020
Tyler Gaw reminds us that mask-image can repeat, resize, and move just like background-image does, which is fun to combine and play with. I could see it being a fun option for an <hr, like Sara is doing.
CodePen Embed Fallback
Direct Link to Article — Permalink… Read article...
A Few Background Patterns Sites
18.3.2020
If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out.
CodePen Embed Fallback
My usual...
How to Make Repeating Border Images
16.3.2020
I just saw this cool little site from Max Bittker: broider. You design an image on a 9-slice grid (except the middle part) and it will produce an image for you to use with border-image along with the CSS to copy and paste.
Check out my little design:
CodePen Embed Fallback
The areas of the image...
Vue.js: The Documentary
3.3.2020
Hey how cool! A documentary about Vue! Good timing as it looks like VueConf is happening right now. (Reminder we have a site for conferences to tell you stuff like that).
Sarah appears in it (about 21:13) and talks about CSS-Tricks for a second, so we're officially super famous now and I have...
Recreating the CodePen Gutenberg Embed Block for Sanity.io
25.2.2020
Learn how to create a custom CodePen block with a preview for Sanity Studio, inspired by Chris Coyier’s implementation for Wordpress’ Gutenberg editor.
The post Recreating the CodePen Gutenberg Embed Block for Sanity.io appeared first on CSS-Tricks
Custom Styling Form Inputs With Modern CSS Features
7.2.2020
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look.
Here’s...
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
3.2.2020
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!
This is what...
Embedded Content in Markdown
31.12.2019
Markdown supports HTML, so if you need to, say, embed a YouTube video, you can just copy and paste the embed code from them, drop it into a Markdown document, and you should be good to go. With YouTube specifically, there are other options. But in general, you don't need to do anything special...
lite-youtube-embed
13.12.2019
A standard copy-and-paste YouTube embed lands on your page as an <iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with...
Dark Mode Favicons
4.12.2019
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports...