A directory of resources inthe field of technical communication.

Lou, Mary

9 found.

About this Site | Advanced Search | Localization | Site Maps
 

 

1.
#38958

Blueprint: Google Grid Gallery

This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view. In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Graphic Design

2.
#38959

Blueprint: 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.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Responsive

3.
#38954

Fullscreen Form Interface

Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields. Once all the fields have been filled or moved through, we show a summary in the final step. Here the input data can still be reviewed and corrected. In this final step the form can also be submitted.

Lou, Mary. Codrops (2014). Design>Web Design>Forms

4.
#38955

Ideas for Subtle Hover Effects

It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise. The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Note that these will only work in modern browsers.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Hypertext

5.
#38956

Inspiration for Article Intro Effects

Today we want to share some inspiration for article intro effects with you. You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue. We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. There are many potentially cool effects and today we want to share just a couple of ideas with you.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>CSS

6.
#38970

Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design

7.
#38968

Page Preloading Effect

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design

8.
#38957

Recreating the "Design Samsung" Grid Loading Effect

If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish grid loading effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed. The color of the sliding element represents the image, i.e. it is colored in the dominant color of the picture. This is a great grid loading effect and after we got a request on how to achieve this, we’d like to show you how to recreate this effect using a Masonry grid with CSS animations. We’ll also make use of the ColorFinder script by pieroxy that will get the most prominent color of an image for us.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>CSS

9.
#38969

Tilted Content Slideshow

The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design

Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon