CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting. For more on image galleries, check out this post on free jQuery sliders.

Continue reading CSS3 Image Gallery with Dynamic Caption Text

Responsive Full Width Tabs

A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

Continue reading Responsive Full Width Tabs

Responsive Tab Content Slider

This Blueprint is a simple jQuery content slider. It has a sliding area for content and a tab-like navigation at the bottom. The slider is fluid, meaning that it will adjust to the parent’s container width and height. A couple of media queries show how to minimalise the look by just leaving icons for the navigation when the screen is very small. The content area will become scrollable if there isn’t enough space available. Every list item is a slide and and it has a corresponding link element in the navigation.

Continue reading Responsive Tab Content Slider

Multi-Level Accordion Menu

A simple CSS accordion menu with support for sub level items.

Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with jQuery as well, in case you prefer a subtle animation compared to the instant default effect. Your call!

Continue reading Multi-Level Accordion Menu

ScrollTrigger – Scroll Based Animations with Ease

Triggers classes on html elements based on the scroll position. It makes use of requestAnimationFrame so it doesn’t jack the users scroll, that way the user / browser keeps their original scroll behaviour.

Continue reading ScrollTrigger – Scroll Based Animations with Ease