Search

Nalezeno "layout": 13

Smooth Scrolling Image Effects


A small set of ideas on animating images and other elements while smooth scrolling a page. Smooth Scrolling Image Effects was written by Mary Lou and published on Codrops

Draggable Menu with Image Grid Previews


A draggable inline menu with a scattered thumbnail preview of an image grid. Draggable Menu with Image Grid Previews was written by Mary Lou and published on Codrops

Every Layout


Every Layout is a new work-in-progress website and book by Heydon Pickering and Andy Bell that explains how to make common layout patterns with CSS. They describe a lot of the issues when it comes to the design of these layouts, such as responsive problems and making sure we all write maintainable...

Draggable Image Strip


A draggable image strip layout with a content preview powered by Draggabilly and TweenMax. Draggable Image Strip was written by Mary Lou and published on Codrops

Animated Image Columns


An experimental web layout where several image columns get animated out when a menu item is clicked. Animated Image Columns was written by Mary Lou and published on Codrops

How to Create a Sticky Image Effect with Three.js


A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. How to Create a Sticky Image Effect with Three.js was written by Daniel Velasquez and published on Codrops

Quick! What’s the Difference Between Flexbox and Grid?


Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They...

Layer Motion Slideshow


A CSS Grid-based slideshow template with a layer motion effect on the main image and title. Layer Motion Slideshow was written by Mary Lou and published on Codrops

How Well Do You Know CSS Layout?


The difference between a CSS good experience and a long frustrating one is oftentimes a matter of a few small details. CSS is indeed nuanced. One of the most common areas where I see struggles is layout. Personally, I like to study patterns. I notice that I tend to use a small group of patterns...

Piecing Together Approaches for a CSS Masonry Layout


Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript...

Algorithmic Layouts


Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox...

Page Flip Layout


A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid. Page Flip Layout was written by Mary Lou and published on Codrops

Grid Layout with Motion Hover Effect and Content Preview


A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens. Grid Layout with Motion Hover Effect and Content Preview was written by Mary Lou and published on Codrops

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace