Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Website: http://www.codrops.com

Manoela's Articles (401)

Responsive Full Width Tabs

In Blueprints March 21, 2014 102 Comments

100% width tabbed content with some example media queries for smaller screens. ... read more

Inspiration for Item Transitions

In Playground March 18, 2014 88 Comments

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 i... read more

Tilted Content Slideshow

In Tutorials March 13, 2014 123 Comments

A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. ... read more

Simple Stack Effects

In Playground March 5, 2014 27 Comments

A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As... read more

Creating a Border Animation Effect with SVG and CSS

In Tutorials February 26, 2014 43 Comments

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS tra... read more

Fullscreen Overlay Effects

In Playground February 6, 2014 146 Comments

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen ... read more

Scattered Polaroids Gallery

In Playground January 28, 2014 88 Comments

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Pol... read more

“Look Inside” Book Preview with BookBlock

In Playground January 14, 2014 68 Comments

A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and t... read more

Shape Hover Effect with SVG

In Tutorials January 7, 2014 78 Comments

In this tutorial we'll recreate the hover effect as seen on The Christmas Experiments website. We'll be using SVG for the shape and Snap.svg for animating it on hove... read more

SVG Drawing Animation

In Playground December 30, 2013 80 Comments

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.... read more

Merry Christmas with a Bursting Gift Box

In Playground December 24, 2013 31 Comments

The Codrops team wishes everybody a Merry Christmas and a happy new year! A big "Thank You" from us in form of a little demo with a bursting animated gift box and so... read more

Progress Button Styles

In Playground December 12, 2013 51 Comments

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one sid... read more

Elastic Stack: Elastic Dragging Interaction

In Playground November 12, 2013 29 Comments

ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when drag... read more

Animated SVG Icons with Snap.svg

In Playground November 5, 2013 95 Comments

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons ... read more

Split Layout

In Blueprints October 25, 2013 108 Comments

A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effect... read more

Animations for Thumbnail Grids

In Playground October 23, 2013 34 Comments

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 eff... read more

Animated Checkboxes and Radio Buttons with SVG

In Playground October 15, 2013 57 Comments

By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide t... read more

A Collection of Separator Styles

In Playground October 3, 2013 38 Comments

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-element... read more

Animated Border Menus

In Tutorials September 30, 2013 107 Comments

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.... read more

Creative Loading Effects

In Playground September 18, 2013 59 Comments

Some ideas and inspiration for loading effects on a website.... read more

Sliding Horizontal Layout

In Playground September 5, 2013 51 Comments

A slider-like layout where the neighboring sections are positioned horizontally next to each other. ... read more

Transitions for Off-Canvas Navigations

In Playground August 28, 2013 171 Comments

Some inspiration for transition effects for off-canvas navigations.... read more

Page 5 of 16
<
1
2
3
4
5
6
7
8
9
10
...
16
>

Would you like to write for Codrops?

We are always searching for creative and bold minds that have extraordinary ideas and are happy to try out new things related to web design and web development. Become part of an amazing group of contributors and authors and start writing for us.

Get in touch with us and tell us what makes you crazy and innovative enough to join the Codrops team.