Latest News

We’re so used to either a backend language or a JavaScript framework powering our data-backed components. I love me a Rails partial with a bunch of locals: {} or a <Component ...props /> but you don’t have to give up on components even if working in static HTML. With Nunjucks, which has includes and templates and macros, we have a robust toolset for building component-based sites that are easy, fast, and secure to host.

Direct Link to Article — Permalink…

The post Building A Static Site With Components Using Nunjucks appeared first on CSS-Tricks.

I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.

Here’s the final version:

See the Pen MrLopq by Mihai (@MihaiIonescu) on CodePen.

This effect …

The post Animate a Container on Mouse Over Using Perspective and Transform appeared first on CSS-Tricks.

(This is a sponsored post.)

We know that no API can write your code for you (unfortunately), but ours comes close. With in-depth documentation, customizable features, amazing support, and a dashboard that makes your code easy to debug, you won’t find an eSignature product with an easier path to implementation. Or that’s more liked by your team.

We wanted an API built by a team that valued user experience as much as we do. At the end of the …

The post ​HelloSign API: Everything IT requires and Developers love. appeared first on CSS-Tricks.

We’ve blogged about responsive tables a number of times over the years. There’s a variety of techniques, and which you choose should be based on the data in the table and the UX you’re going for. But many of them rely upon resetting a table element’s natural display value to something else, for example display: block. Steve Faulkner warns us:

When CSS display: block or display: grid or display: flex is set on the table element, bad things happen. …

The post Short note on what CSS display properties do to table semantics appeared first on CSS-Tricks.

Have you ever lost your voice? How did you handle that? Perhaps you carried a notebook and pen to scribble notes. Or jotted quick texts on your phone.

Have you ever traveled somewhere that you didn’t speak or understand the language everyone around you was speaking? How did you order food, or buy a train ticket? Perhaps you used a translation phrasebook, or Google translate. Perhaps you relied mostly on physical gestures.

All of these solutions are examples of communication methods — tools and strategies — that you may have used before to solve everyday communicative challenges. The preceding examples are temporary solutions to temporary challenges. Your laryngitis cleared up. You returned home, where accomplishing daily tasks in your native tongue is almost effortless. Now imagine that these situational obstacles were somehow permanent.

The post A Browser-Based, Open Source Tool for Alternative Communication appeared first on CSS-Tricks.