transform

Progress Button Styles

By Mary Lou on

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

Animated Border Menus

By Mary Lou on

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

Multi-Level Push Menu

By Mary Lou on

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. ...

3D Image Gallery Room

By Mary Lou on

An experimental image gallery with a realistic touch: the images are displayed in a 3D room with walls. ...

3D Book Showcase

By Mary Lou on

An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. ...

Filter Functionality with CSS3

By Mary Lou on

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial ...

Slopy Elements with CSS3

By Mary Lou on

It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected ...

Animated Buttons with CSS3

By Mary Lou on

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different sty ...

Creative CSS3 Animation Menus

By Mary Lou on

Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of ...

Flexible Slide-to-top Accordion

By Mary Lou on

In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. ...