Advertise here

Tutorials

How to Make a Digital Clock with jQuery and CSS3

June 15, 2013     8052     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     6779     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     17472     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     4878     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     10713     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     8068     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     36929     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     10952     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     6866     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 »

Simple YouTube Menu Effect

April 25, 2013     8282     Menu
Simple YouTube Menu Effect

A tutorial on how to create the effect of YouTube's little left side menu.

When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

Read More »

Thumbnail Grid with Expanding Preview Like Google Images

March 19, 2013     53112     Gallery Grid & Layout
Thumbnail Grid with Expanding Preview Like Google Images

A nice tutorial from Codrops on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

Read More »

Create an Animated Bar Graph with CSS and jQuery

March 12, 2013     8200     CSS3 & CSS Chart & Graph
Create an Animated Bar Graph with CSS and jQuery

Nice tutorial from Smashing Magazine about "Creating an Animated bar Graph with CSS And jQuery". 

What this tutorial is making?

  • A progress bar that indicates how long until the end of all humanity in the event of a zombie plague;
  • A graph indicating the decline in safe outdoor activities during a zombie plague;
  • A frighteningly similar graph indicating the decline in manners during a zombie plague;
  • The increase of people who were unaware of the zombie plague because they were sharing with all of their now-deceased friends on Facebook what they did on FarmVille

Read More »

How to Create a jQuery Confirm Dialog Replacement

March 01, 2013     28942     CSS3 & CSS Modal & Overlay
How to Create a jQuery Confirm Dialog Replacement

In this tutorial you are going to build a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.

Read More »

Thumbnails Preview Slider with jQuery

February 28, 2013     3971     Slider Gallery
Thumbnails Preview Slider with jQuery

In this tutorial you are going to create and use a thumbnails preview slider with jQuery. Thumbnail preview slider will hwlp you to create cool photo/image galleries.

Read More »

How to Create Windows-8-like 3D Animations with CSS3 and jQuery

February 25, 2013     9563     CSS3 & CSS
How to Create Windows-8-like 3D Animations with CSS3 and jQuery

Tutorial about "How to Create Windows-8-like 3D Animations with CSS3 and jQuery"

The demo works in the latest versions of all browsers, including IE10.

Read More »

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