Home » NewsBlog » CSS

Responsive Knockout Text With Looping Video

2018-05-04T03:06:05+00:00 May 4th, 2018|Categories: News, Tutorials|Tags: |

Here’s an idea! Let’s make an an HTML 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 [...]

​Incapsula DDoS Resiliency Score

2018-05-04T03:05:59+00:00 May 4th, 2018|Categories: News, Tutorials|Tags: |

(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 [...]

Managing Heading Levels In Design Systems

2018-05-04T03:05:57+00:00 May 4th, 2018|Categories: News, Tutorials|Tags: |

Heydon Pickering looks into how to give a React component a certain heading (like , , 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, [...]

Container-Adapting Tabs With “More” Button

2018-05-03T03:04:59+00:00 May 3rd, 2018|Categories: News, Tutorials|Tags: |

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 [...]

Wakamai Fondue

2018-05-02T03:05:35+00:00 May 2nd, 2018|Categories: News, Tutorials|Tags: |

Roel Nieskens released a tool that lets you upload a font file and see what’s inside, from how many characters it contains to the number of languages it supports. Here’s what you see once you upload a font, in this case Covik Sans Mono Black: Why is this data useful? Well, I used this tool [...]

Animating Progress

2018-05-01T03:06:36+00:00 May 1st, 2018|Categories: News, Tutorials|Tags: |

Jonathan Snook on the complexity of animating the element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values: This example has custom styles, but you get the point.Jonathan's post shows off a method for animating a change in progress value using CSS and a [...]

Finger-friendly numerical inputs with `inputmode`

2018-05-01T03:06:27+00:00 May 1st, 2018|Categories: News, Tutorials|Tags: |

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a . This big button numeric keyboard is [...]

Practical Jokes in the Browser

2018-04-29T03:05:21+00:00 April 29th, 2018|Categories: News, Tutorials|Tags: |

I know April Fool’s Day is at the beginning of this month, but hey, now you’ve got a year to prepare. Not to mention a gool ol’ practical joke can be done anytime. Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow a [...]