Advertise here

Tutorials

Google Nexus Website Menu

July 30, 2013     27592     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     10435     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     9296     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     19358     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     21952     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 »

Simple Vertical Menu with jQuery and CSS3

June 23, 2013     16114     CSS3 & CSS Menu
Simple Vertical Menu with jQuery and CSS3

tutorial about how to create a simple, but very stylish vertical menu using some CSS3jQuery, a custom text font and the most impressive icon font. Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!

Read More »

How to Make a Digital Clock with jQuery and CSS3

June 15, 2013     8580     HTML5 CSS3 & CSS Date & Time
How to Make a Digital Clock with jQuery and CSS3

Nice tutorial about How to Make a Digital Clock with jQuery and CSS3. Soon functionality for setting alarms and playing them back with HTML5 audio ll be add.

Read More »

Horizontal Portfolio Layout with CSS3 Animations and jQuery

June 10, 2013     6873     CSS3 & CSS Effects
Horizontal Portfolio Layout with CSS3 Animations and jQuery

In this tutorial you're going to create a horizontal portfolio layout with cool hover effects. CSS3 animations and transitions used for hover effect of the portfolio items, and some jQuery to replicate the image pan effect on hover.

Also there is falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.

Read More »

On-Scroll Animated Header

June 06, 2013     17656     Scroll Responsive
On-Scroll Animated Header

fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.

Read More »

Smooth Diagonal Fade Gallery with CSS3 Transitions

June 01, 2013     4970     Gallery CSS3 & CSS Effects
Smooth Diagonal Fade Gallery with CSS3 Transitions

In this tutorial you are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. 

CSS3 capable browsers will show a smoothly animated diagonal fade effect, while older browsers will fall back to a simpler but still perfectly usable non-animated version of the gallery.

Read More »

Tooltip Menu

May 23, 2013     11009     Menu Tooltip
Tooltip Menu

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available.

Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

Read More »

Responsive Product Grid Layout

May 18, 2013     8235     Responsive Grid & Layout
Responsive Product Grid Layout

Responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included.

Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.

Read More »

Horizontal Slide Out Menu

May 17, 2013     37617     Menu Mobile Responsive
Horizontal Slide Out Menu

A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.

Read More »

Ajax File Upload Form with jQuery

May 13, 2013     11245     Ajax Drag & Drop
Ajax File Upload Form with jQuery

Nice tutorial about creating an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually.

Read More »

Responsive Retina-Ready Menu

May 09, 2013     6955     Menu Mobile Responsive
Responsive Retina-Ready Menu

responsivetouch-friendly and Retina-ready menu with three layouts for different browser sizes.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize

Read More »

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