Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

View DemoDownload

Elastic Image Slideshow with Thumbnail Preview

A simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques.

View DemoDownload

Fullscreen Image Blur Effect with HTML5

Using canvas, we want to blur images on the transition to another one, creating a smooth effect.

The main idea is to add some images in our structure that will serve as background images. We will add the canvas element which will contain a blurred version of the image. When we navigate, we’ll add the blurred canvas behind the current image and fade the current image out. With the blurred canvas image now visible, we can either show the new image immediately (unblurred) or show it blurred and then “sharpen” it.

View DemoDownload

Circle Navigation Effect with CSS3

 

The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

View DemoDownload

ShineTime – A New jQuery & CSS3 Gallery With Animated Shine Effects

use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve. I always think it’s useful to see a demo of what we’re making before we look at it, so click here to check out the live

View DemoDownload

Circular Content Carousel with jQuery

The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

View DemoDownload

Advanced jQuery Full screen background image slideshow

It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I've used images with a width of 1500px, just to cover most of the currently used screen resolutions.


Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, comments are left on the source code to explain what it does.

View DemoDownload

jQuery News Ticker

 

Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery

View DemoDownload

Sliding Letters with jQuery

We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.

View DemoDownload

Sliding Background Image Menu with jQuery

Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

The idea of this navigation is based on the Beautiful Background Image Navigation with jQuery, a tutorial that had a similar effect. Since it was very popular and a lot of our readers asked for some very useful additions, we decided to revamp it and make it easier to customize.

View DemoDownload

Chop Slider :: CSS3 animation

This awesome slider with a chopping effect was last updated on June 20, 2011. The ChopSlider uses full power of CSS3 animation, has own CSS3 support detection and even old or Internet Explorer support it, a little bit different but still awesome. It will be free under the MIT license, once released. The creator still runing some tests.

View DemoDownload

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

View DemoDownload

Wonderful photo effects Photoshop tutorials

Collapsing Site Navigation with jQuery

A collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

View Demo Download

Embed fonts into CSS using Google Web Fonts API

 

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts are a great way to get started using new typefaces on the web without paying for a service like Typekit.

Google Web Fonts is the best way to add amazing new free fonts to your site. Google web fonts are web safe fonts, which can be added to any site by adding a few simple lines of code to your html.

Enthused by the new font technology and with the intention to improve our web design fonts,  we tested out the Google web fonts. And it was much easier than I thought and was compatible with most web browsers.

Try Google web fonts, as there are some really amazing web fonts out there and amaze your readers. You can add as many free web fonts as you like. Which is your favorite Google web font?

View Demo

Sliding Panel Photo Wall Gallery with jQuery

 

The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

View Demo
Download

css3 JQuery Animated Tabs

Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome.

View Demo Download

Nice Multiple jQuery Mega Drop Down Menu

The Mega Drop Down Menu plugin takes standard HTML nested lists and turns them into horizontal mega menus. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation.
A mega menu has several advantages over standard drop down menus, including:

• All options visible at the same time
• No scrolling and tricky mouse manoeuvres to see sub-menus fly out
• Using standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists.

View Demo Download

jQuery MegaMenu

So whats new in jQuery MegaMenu 2

• A completely revamped JS and CSS code-base.
• Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
• Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
• Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
• HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
• Automatic alignment of the menu content according to the width of the parent menu container.
• Variable width of the menu contents.
• Non obtrusive and easier to understand CSS.

View Demo Download

Top 10 Mozilla Firefox Add-ons For Web Designers & Developers

Web Developer
The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

---

View Source In Dreamweaver


View Source In Dreamweaver is a new companion for web developers to open up any web page HTML source with Adobe Dreamweaver via a single and quick mouse click.

---

Open With Photoshop
Open With Photoshop is a new companion for web and graphic designers to open up any web image with Adobe Photoshop via a single and quick mouse click.

After installation of Open With Photoshop you can right click on any image inside a web page and choose Open With Photoshop option from context menu to send the very image to the Adobe Photoshop. If the Photoshop is not in open state the add-on will start up the Photoshop and will place the image inside the Photoshop when Photoshop is ready. If Photoshop is already open, Open With Photoshop will simply add the image in a new Photoshop window immediately.

Open With Photoshop usage is that simple and it is great time saver for web and graphic designers

---

Total Validator
This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

---

Open With current page in another browser
Need to test your web pages out in Internet Explorer, Chrome, Safari, Opera (or anything else for that matter)?

Open With adds options to various parts of your browser for opening the current page in another browser.

---

FireShot
FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

---

Firebug
Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

---

Font Finder 0.5c
 

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

---

Measure It
 
Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It’s great for figuring out dimensions of things on a web page.

---

Spell Checker
This add-ons is basically to check the Spelling mistakes all over the web page. It uses Firefox's inbuilt dictionary to check the spellings. There are many sites available which checks the spelling mistake on the website but for that you must have your site live. but what to do when site is under construction and you are testing it.To copy whole page text and past into some utility that checks the spelling mistakes is tedious work to do. This add-on will help you in this case.

PIROBOX EXTENDED V.1.0 - jQuery plugin

This is an advanced version of pirobox, implemented a few things more than the previous version. One of the most important things is the ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Other things are: automatic image resizing and drag and drop.

Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 7+.

I really hope that Pirobox can be fun and usefull for you. Enjoy the code with jQuery

View Demo Download

create a form validation with jQuery plugin

Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML. You simply specify the container you wish to append the form to. By passing a few parameters into one of the formation function calls you can add different validation such as number, e-mail, url, phone number, or zip code. Each element that you create can be fully customized. You can set the class, id, or any other attribute that is native to that element.

Enjoy!

View Demo

Pull Out Content Panel with jQuery

In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through many items in the panel.

Depending on how many items can fit to the user’s screen, we will adapt the item container in order make the maximum number of items fit, centering it horizontally.

View DemoDownload

Typing Game with jquery

This is a simple typing game experimental using jquery. The main criteria here is to understand how to read Keyboard Character Codes and displaying its equivalent Character on to screen. You may notice so many bugs in live demo, because this program is not implemented fully as we concentrated on important code blocks only.

Play Game

Carousel with wrap effect

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge. The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque. An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate). Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

View DemoDownload

Cursor following menu

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

View DemoDownload

Advance Supersized Slideshow jQuery Plugin

So, what exactly does Supersized do?

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back 

View DemoDownload

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really "full featured" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.

View DemoDownload

Creating a Keyboard with CSS and jQuery

This keyboard requires a lot of HTML setup and playing around with CSS. Each of the keys will be represented by a list item in an unordered list. Each of the list items will have a class attached to them, used in both the CSS and jQuery. Most of the classes are just “letter”, “lastitem”, or something similar. This will make finding out which list item is which easy.

View DemoDownload

ColorBox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4

Why you should be using ColorBox

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: less than 9KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.

Tested In: Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet Explorer 6, 7, 8.

12345Download

AD Gallery, gallery plugin for jQuery

A highly customizable gallery/showcase plugin for jQuery.

Features

• Choose effect, should the image slide in, or fade in?
• Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
• jQuery call returns gallery instances, which enables you to change settings on the fly like the "Change to fade effect" link above
• Keyboard arrows to move back and forth
• Click on the edge of the big image to go to the next/previous
• Images are preloaded, and if the aren't finished loading when they are supposed to be displayed, a loading image will appear
• Slideshow count down only begins when the image has loaded and is visible
• Image title, can either be set in the title attribute, or in elm.data('ad-title', 'My title here'). $.data takes precedence over the title attribute
• Image descriptions, can either be set in the longdesc attribute, or in elm.data('ad-desc', 'My description here'). $.data takes precedence over the longdesc attribute
• Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
• Takes the dimensions of the image container div and scales down images that are larger than it
• Image is positioned in the middle if it's smaller than the container div
• Images that are larger than the container are scaled down to fit inside the container

Browser compatibility

The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know.

View DemoDownload

Content Slider Using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.

View DemoDownload

jQuery.popeye 2.0

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.
It was designed as an alternative to the often-seen JavaScript image lightbox. What they all have in common: they employ a modal window to display the large images, thus disrupting the workflow of the user interacting with a webpage.

jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

View DemoDownload

Sliding Panel

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.

View DemoDownload

Orbit: A Slick jQuery Image Slider Plugin

Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.

View DemoDownload

Uniquely Designed and Coded Web Form Styles

View Demo Download

IE Tester : Internet Explorer Versions from 5.5 to 9

Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Requirement : Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)
Note for IE9 : IETester installer does not include IE9 files, so you will need to install IE9 preview and copy files manually : See How To install IE9 under IETester (IE9 Preview requires Vista SP2 or Windows 7).

Download

CSS Compressor - Optmize and Format your CSS

Online code compressor for Cascading Style Sheets

The CSS Compressor greatly reduces the size of standard CSS code, stripping out unnecessary characters and implementing CSS shortcuts, allowing you to minimize the size of CSS file downloads on your web site.

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.

Compresser

Tetris with jQuery

See the colorful tetris beads move in accordance with the lightweight jQuery code.

View Demo

Flip A jquery plugin v 0.9.9

Flip is a jQuery plugin that will flip easily your elements in four directions. Try it

View DemoDownload

Photo Gallery - More Customizations

This gallery demonstrates GalleryView's ability to place both the filmstrip and panel captions on the top of the gallery, instead of the bottom. By wrapping the gallery div and assigning it a background image, we can lift the gallery off the page, or implement any number of design ideas. This gallery also uses a custom navigation theme (download here) and an easing method made possible by the jQuery Easing plugin.

View Demo

JQuery Image Scale Carousel

It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place.

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized for this slider. The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.

It's easy. Set up an array of images, either local images or images out on the interwebs somewhere, and then hand that array to the jQuery Image Scale Carousel. Done!

View Demo Download

Quicksand

Reorder and filter items with a nice shuffling animation.

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

1. Use plain HTML, like an unordered list.
2. Download data by an Ajax call
3. Transform HTML items by JavaScript (for example, sort them differently)

View Demo Download

SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

View Demo 1 View Demo 2 Download