Advertise here

Tutorials

Medium-Style Page Transition

October 30, 2013     5660     CSS3 & CSS Effects
Medium-Style Page Transition

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

Read More »

jQuery Tabs Tutorial

October 08, 2013     2641     Tabs
jQuery Tabs Tutorial

Tabs are easy to implement and can be built to work with your existing markup. This tutorial will walk through the process.

Read More »

Responsive Share Buttons CSS and jQuery

October 06, 2013     19203     Social Responsive
Responsive Share Buttons CSS and jQuery

A tutorial about Creating Responsive Share Buttons by using jQuery and CSS.

Advantage of creating own set of share buttons is that, it goes well with your layout, and you don't have to rely on bulky files that are loaded from anonymous servers, which could also slow down the page loading time significantly.

Read More »

Animated Border Menus

September 30, 2013     8085     CSS3 & CSS Menu
Animated Border Menus

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 »

jQuery Modal Tutorial

September 11, 2013     4475     Modal & Overlay
jQuery Modal Tutorial

A tutorial about creating basic modal by using jQuery and CSS.

Read More »

Custom Drop-Down List Styling

August 28, 2013     92996     Menu Form Elements
Custom Drop-Down List Styling

A tutorial on how to create some nice custom drop-down lists with CSS and jQuery.

There are five examples with different looking drop-down menus and lists for various purposes.

Read More »

Creating Android Dock using jQuery & CSS3

August 26, 2013     4881     CSS3 & CSS Menu
Creating Android Dock using jQuery & CSS3

A tutorial about Creating Android Dock using jQuery & CSS3

The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style.

Read More »

How to Create Accordion Menu with jQuery and CSS3

August 21, 2013     8467     CSS3 & CSS Menu
How to Create Accordion Menu with jQuery and CSS3

tutorial about creating an accordion menu by using jQuery and CSS3.

Read More »

Google Play's Multi-Level Navigation Menu

August 20, 2013     15080     Menu
Google Play's Multi-Level Navigation Menu

A tutorial about "Creating Google Play’s Multi-Level Navigation Menu".

This menu has smooth animation and let users peek at the root-level menu by simply hovering a back button. It's created with using HTML, CSS and jQuery.

Read More »

Multi-Level Push Menu

August 14, 2013     33065     CSS3 & CSS Menu
Multi-Level Push Menu

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

The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

Read More »

Google Nexus Website Menu

July 30, 2013     26966     Menu
Google Nexus Website Menu

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.

It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

Read More »

On Scroll Effect Layout

July 22, 2013     10312     Scroll Effects
On Scroll Effect Layout

An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section.

There is an example effect defined and also some media queries for dealing with smaller screens.

Read More »

On Scroll Header Effects

July 18, 2013     9118     Scroll Effects Animation
On Scroll Header Effects

Nice tutorial about some inspiration for headers that animate when scrolling the page. This tutorial show you what kind of effects could be used to spice up your website’s starting element and give it some life.

Read More »

View Mode Switch with Grid and List Layout

July 03, 2013     18833     Responsive Grid & Layout
View Mode Switch with Grid and List Layout

A simple view mode switch that has two example layouts, a grid and a list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

Read More »

Mobile Friendly and Responsive Expanding Search Bar

June 26, 2013     21039     Mobile Responsive
Mobile Friendly and Responsive Expanding Search Bar

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

Summarized, this is what we want the search component to do:

  • Initially, we only want to show a button with a search icon.
  • When clicking on the icon, we want a text input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • For a smoother experience on touch devices, we’ll also want to add support for touch events.

Read More »

AdvertisementAdvertise with us!
Angular, React and Javascript MV* Frameworks | MVish