Latest News

Here’s an idea! Let’s make an an HTML <video> play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. A live demo will explain more clearly:

See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen.

A key objective here is to develop this responsively. The idea is to not only scale the video in size to fit the parent container (as video generally does), but scale the …

The post Responsive Knockout Text With Looping Video appeared first on CSS-Tricks.

(This is a sponsored post.)

These free training courses from Incapsula give you the technical knowledge and skills to accelerate your website and optimize content delivery. Website Performance Mastery Starts here in a fun, quiz-based online format, these free training courses give you the technical knowledge and skills to accelerate your website and optimize content delivery.

Is your website ready for a DDoS attack? Find out here.

Direct Link to Article — Permalink…

The post ​Incapsula DDoS Resiliency Score appeared first on CSS-Tricks.

Heydon Pickering looks into how to give a React component a certain heading (like <h1>, <h2>, etc.) depending on its context and thereby ensure that the DOM is still perfectly accessible for screen readers. Why is using the right heading important though? Heydon writes in the intro:

One thing that keeps coming back to me, in research, testing, and everyday conversation with colleagues and friends, is just how important headings are. For screen reader users, headings describe the …

The post Managing Heading Levels In Design Systems appeared first on CSS-Tricks.

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.

There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…

We agreed it should be a …

The post Container-Adapting Tabs With “More” Button appeared first on CSS-Tricks.