Archive for the ‘CSS’ Category

Hamburger Menu Animation / Functionality Collection

CSS, JavaScript, User Experience (UX), User Interface (UI), Web Development | Posted by Keefr April 24th, 2017

Markup / HTMLThe hamburger menu isn’t going away anytime soon — neither on mobile nor desktop web designs and development.

Line25 published this collection of 20 examples of ways to implement and animate the showing/hiding toggle tied to the hamburger button. A lot are similar, but worth clicking through and trying out individually.

Source: Line25 – Demystifying the Hamburger Menu: 20 Hand-Picked Examples

Animated CSS Loaders

CSS | Posted by Keefr April 20th, 2017

What comes around goes around, right? A lot of these animated loaders done mainly with CSS harken back to the heyday of Flash — the initial experience taking a little longer than a person’s attention span. So to give the user a cue, a looping animation was created to indicate loading of the site/resources was in progress.

The list below shows 20 unique ways to show content is still in the process of being loaded.

Source: Line25 – Animated Loaders | 20 Unique Examples + Free Downloads

Illustration of CSS Viewport Units’ ‘vmin’

CSS | Posted by Keefr March 9th, 2017

Cascading Style Sheet (CSS)Ever since I first read about CSS’s viewport units, I was intrigued. It was a way have heights and widths resize responsively relative to the web browser’s viewport, and it didn’t need a lick of javascript. But of course browser support had to catch up — and it has.

Since browsers have caught up, I’ve used it on sites to set heights and widths. The CSS Tricks article linked below though shows using viewport units for padding to make a flexible header.

Source: CSS Tricks – Simple Little Use Case for `vmin`

Collection of CSS Hover Effects

CSS | Posted by Keefr February 28th, 2017

CSSMan, the modern web is uber powerful. I came across this collection yesterday of CSS-based hover effects.

A lot of these collections of effects/demos end up being over-the-top and probably something you’d never utilize, or maybe once in some edge case web project.

But the majority of examples in this aren’t crazy. With some modifications, I can see going back to this list for a lot of future web projects.

Source: – 20 Image Hover CSS Snippets: Designer Cheat List

Flow Chart in Pure CSS

CSS | Posted by Keefr February 21st, 2017

CSSCame across this nice little flow chart demo that’s built using semantic HTML and pure CSS.

The markup is simple unordered lists with anchor links inside.

The CSS is a little more complicated — getting into pseudo-elements (like last-child, first-child, and before), along with some hover and transition rules — very nice, compact and reusable.

Source: – Vertical Family Tree in Pure CSS