CSS3 & jQuery folder tabs

In this article, I will use a technique in order to create some good looking CSS3 tabs.While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3 and jQuery.

Read More

3D Gallery with CSS3 and jQuery

Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Read More

Bear CSS : jQuery build a solid stylesheet foundation based on your markup

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Bear CSS was created using a combination of HTML5/CSS, jQuery and PHP, with some help from the following plugins:

• PHP Simple HTML DOM Parser


• Uploadify

Read More

Use CSS4 parent selector right now with cssParentSelector.js

Have you ever wanted to select parent of an element in css without using any additional id or class? Well, now you can, just add this litle script to your code and you will be able to use parent selector like the one described in CSS4 reference.

Read More

jQuery CSS3 animated dropdown menu

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited. The reason I’m saying that is because in this article you’ll learn how to create an animated CSS3 dropdown menu based on our previous example.

Read More

Rotate3Di - Flip HTML content in 3D with jQuery

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations.

Read More

Use Reveal.js to Create CSS 3D Slideshow

If you're making an online presentation to impress your audience, you have to consider to use reveal.js. reveal.js is a CSS 3D Slideshow, it allows you to create a slick and good looking HTML presentation and in the same time utilise the latest web technologies for cool 3D slide transition. Reveal.js is a standalone javascript plugin and doesn't rely on any external libraries.

One thing though, this javascript requires CSS 3D transforms support. That's mean, IE won't able to see all these fancy animation. It works really well in Safari, Chrome and Firefox. Good news is, if CSS 3D support is not detected, it will degrade gracefully and back to the 2D transitions.

Read More

Javascript media Veiwer : Shadowbox.js

Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.Shadowbox was inspired by Lightbox and LightWindow.

Read More

Build A Greyscale jQuery Image Gallery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking image gallery in CSS and jQuery.

The gallery has a main image and multiple alternative images which on the hover event will change the main image.

The CSS will be used to setup the look of the gallery and jQuery is used to change the main image with the alternative images.

Read More

Creating A Sticky Sidebar Using jQuery

Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

Read More

CSS3-Powered Presentation Framework : Impress.js

A new presentation framework is released recently -named Impress.js- which enables us to build very beautiful outputs.

Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

Read More

Thumbnail Proximity Effect with jQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

This is based on a request we once got from a reader who asked if the effect on http://porscheeveryday.com/ could be achieved with jQuery. This is our attempt to recreate the basics of that effect.

Read More

Easy CSS3 & jQuery tooltips

There’s no need to explain what a tooltip is and you already know that using tooltips can help you increase usability. Therefore, in this article we’ll concentrate just on the practical side.So, today you’ll learn how to create awesome CSS3 & jQuery tooltips.

The major advantages of these tooltips are:

• the simplicity to use (as you’ll see below)


• they are animated using CSS3

Read More

Simple and effective jQuery dropdown login box

In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery.The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log in immediately.

Read More

jQuery Custom preloader effect

In this experiment I would like to show you how to create a custom preloader animation effect with jQuery.

Read More

Roundabout is a jQuery plugin

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.

Read More

Experimental CSS3 jQuery Animations for Image Transitions

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

Read More

Path App Fly-out Menu using CSS3 & jQuery

I am a huge sucker for great ui design so I fell in love. The thing that really stole my focus was the awesome fly-out menu that is in the bottom left corner. This button is the main means of navigation in this app. It had not only some good features but also had smooth animations as well. Me being a noob to application development, googled if it was made in phone gap due to it heavy customization and no it wasn’t. It ‘apparenly’ has too advanced animations.

Read More

Item Blur Effect with CSS3 and jQuery

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

Read More

spin.js - animted jQuery CSS3 loading spinner

spin.js is an animated CSS3 loading spinner. You can adjust every single parameter: number of lines, length and width of lines, radius, trail, speed of spinning, and whether there’s a shadow or not.

Read More