Advertise here

CSS3 & CSS

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 »

Responsive Side Toggle Menu

June 07, 2013     13276     CSS3 & CSS Menu Mobile Responsive
Responsive Side Toggle Menu

Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page. 

CSS3 transitions are used to power the animation, ensuring a smooth visual experience even on low powered mobile devices. And speaking of mobile devices, the menus are adaptive in that it automatically switches to a basic drop down menu using a toggle button at the top of the page when the user's device width is 480px or less.

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 »

FlipClock.js – jQuery Plugin to Add Counter, Timer, Clock with Flip Effect

May 27, 2013     13745     Date & Time Effects CSS3 & CSS
FlipClock.js – jQuery Plugin to Add Counter, Timer, Clock with Flip Effect

FlipClock.js is a jQuery plugin with CSS3 animations to add counter, timer and clock with smooth flip effect.

Features

  • Use as a clock
  • Use as a timer
  • Use as a countdown
  • Themeable using pure CSS
  • Clean & Dry Syntax
  • Abstract everything into reusable objects
  • Full-Featured Developer API to create custom “Clock Faces”

Read More »

least.js – Responsive HTML5 and CSS3 Gallery with LazyLoad

May 20, 2013     10837     CSS3 & CSS HTML5 Gallery Responsive
least.js – Responsive HTML5 and CSS3 Gallery with LazyLoad

least.js is a random & responsive HTML 5, CSS3 gallery with lazyLoad. Installation and usage is simple, and the end result is quite beautiful.

Read More »

Flip – Flipboard Like Effect for jQuery & jQuery Mobile

May 14, 2013     19304     Mobile CSS3 & CSS Effects
Flip – Flipboard Like Effect for jQuery & jQuery Mobile

Flip is jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform.

Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely.

Read More »

MixItUp – CSS3 and jQuery Filter & Sort Plugin

May 03, 2013     5672     CSS3 & CSS Responsive
MixItUp – CSS3 and jQuery Filter & Sort Plugin

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content.

It plays nice with your existing HTML and CSS, making it a great choice for fluidresponsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content!

Read More »

Fullscreen Layout with Page Transitions

April 23, 2013     5808     Responsive CSS3 & CSS
Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

Read More »

Responsive Nav – Responsive Navigation Plugin with Touch Support

April 09, 2013     2736     CSS3 & CSS Responsive Mobile
Responsive Nav – Responsive Navigation Plugin with Touch Support

Responsive Nav is a tiny JavaScript plugin which helps you to create a toggled navigation for small screens.

It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

Read More »

Panzoom – jQuery Plugin for Panning & Zooming Elements with CSS3

March 20, 2013     4363     Zoom CSS3 & CSS
Panzoom – jQuery Plugin for Panning & Zooming Elements with CSS3

Panzoom is a progressive plugin to create panning and zooming functionality for an element.

Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can beanything: an image, a video, an iframe, a canvas, text, whatever.

Read More »

oriDomi – Fold Up DOM Elements Like Paper

March 18, 2013     6699     CSS3 & CSS Effects
oriDomi – Fold Up DOM Elements Like Paper

oriDomi is a JavaScript library for folding up any HTML element just like a paper. Oridomi has jQuery support and only works in modern browsers that support CSS 3D transforms.

oriDomi has touch support and works on iOS.

There are multiple effects provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

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 »

Fancy Input – CSS3 Text Typing Effects for Input Fields

March 08, 2013     6116     Form Elements Effects CSS3 & CSS
Fancy Input – CSS3 Text Typing Effects for Input Fields

Fancy Input is a jQuery plugin that makes typing & deleting in input / Textarea fields exciting with CSS3 effects.

  • Supports input (type text) and textarea form elements
  • Add effects to each letter being typed / deleted
  • All effects are highly customizable via CSS
  • Default effects are CSS3 hardware accelerated
  • Tries to simulates real input / textarea as much as possible

Read More »

jquery.transformlist – CSS3 Transform Styles and Animations for jQuery

March 07, 2013     2078     CSS3 & CSS Animation
jquery.transformlist – CSS3 Transform Styles and Animations for jQuery

jquery.transformlist is a jQuery plugin to add support for styling and correctly animating CSS3 transforms that make use of multiple transform functions.

jquery.transformlist aims to assist you in creating a transform list of several transform functions that are composited for a specific task, and then provides you with means to use jQuery.animate() between different sets of arguments for those transform functions.

Read More »

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