Sliding Header Layout
In Tutorials by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
In Tutorials by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
In Tutorials by Manoela Ilic
A tutorial on how to achieve the grid loading effect seen on the “Design Samsung” site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
In Playground by Manoela Ilic
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.
In Blueprints by Manoela Ilic
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
In Playground by Manoela Ilic
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.
In Playground by Manoela Ilic
Some inspiration for loading effects of grid items using CSS animations.
In Blueprints by Manoela Ilic
A responsive grid of anchors with icons, text and some example hover transitions.
In Blueprints by Manoela Ilic
A simple view mode switch that has two example layouts, a grid and a list.
In Playground by Manoela Ilic
A dynamic grid layout that let’s you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.
In Blueprints by Manoela Ilic
A responsive product grid layout with some UI details for inspiration.
In Blueprints by Manoela Ilic
A responsive grid layout for multiple items in a row that fill all the available width.
In Tutorials by Manoela Ilic
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
In Tutorials by Manoela Ilic
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
In Tutorials by Larry Botha
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports.
In Articles by Manoela Ilic
The animated responsive grid, the direction-aware hover effect and the swatchbook have all been updated and added to GitHub.
In Playground by Manoela Ilic
An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.
In Playground by Manoela Ilic
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
In Playground by Manoela Ilic
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.