Tag-Archive for » Tutorials «

40 Seriously Awesome MooTools Tutorials and Plugins

10
Jul 2010
admin

MooTools is a lightweight, object-oriented and very popular framework for JavaScript, written in JavaScript which can spice up the interactivity and beauty of your site. User interface plays an important role in the success of any website; JavaScript, CSS and AJAX are commonly used to provide users the leisure of rich user interface over past few years. But using one of the most popular JavaScript libraries, MooTools you can add extra smoothness and interactivity in your website. In this post we have covered some MooTools tutorials and plugins which can be very handy if you are just entering in the world of MooTools.

1. How to Auto Caption Images Using MooTools


In this tutorial your will write a simple script that will select all images with the class of captioned, Take its title attribute or alt attribute and Display it right below the image.

Read Full Tutorial
Demo

2. Sexy Alert Box


Sexy Alert Box replaces old fashion and abruptly appearing alerts with good-looking ans smoothly appearing Alerts using MooTools 1.2 or up.

Read Full Tutorial
Demo

3. AJAX Username Availability Checker Using MooTools 1.2


Almost every website offering membership to its readers needs username availability checker to facilitate users in a way that they know if their desired username is available or already registered on the specific site. So here is a tutorial on how you can implement a username availability checker using MooTools 1.2.

Read Full Tutorial
Demo

4. AutoCompleter


You must have noticed Google giving suggestion about your search queries in a drop down. This Auto-completer script provide the same facility for text suggestion and completion using MooTools.

Read Full Tutorial
Demo

5. AutoGrow Textarea MooTools Plug-In


This MooTools plug-in expands a text-area as the user types something in it. This version is based on the jQuery plug-in developed by Chrys Bader (www.chrysbader.com).

Read Download Plug-in
Demo

6. Background Animations Using MooTools


Mootools a JavaScript framework made animation very easy. This tutorial will show how you can use animated effect in your website.

Read Full Tutorial
Demo

7. Better Pull Quotes with MooTools


This tutorial will use MooTools to create a great-looking pull quotes which will automatically display quotes without repeating any content.

Read Full Tutorial
Demo

8. Create a Quick MooTools Slideshow with Preloading Images


This code will let you learn how to create a simple image slideshow using MooTools with the feature of pre-loading the images; which looks more elegant and enhance the pleasure of viewing the images.

Read Full Tutorial
Demo

9. Create a Simple, Powerful Product Highlighter with MooTools


In this tutorial well be creating a flexible tool for highlighting the products or services available on your website using the MooTools; a JavaScript framework.

Read Full Tutorial
Demo

10. Create a Spectacular Photo Gallery with MooTools


In this tutorial, you will learn to combine many of MooToolss features to create a nice and simple photo gallery.

Read Full Tutorial
Demo

11. Create a Sprited Navigation Menu Using CSS and MooTools


In this tutorial your will learn to create a sprited navigation menu using CSS and Mootools

Read Full Tutorial
Demo

12. Create an Animated Sliding Button Using MooTools

Every website should have attractive and good-looking buttons to gain the attention and attraction of readers. If you want to be a successful website owner you need to be creative and should not use the old style boring buttons. In this tutorial you will learn to create an animated sliding button using MooTools.

Read Full Tutorial
Demo

13. Create Snook-Style Navigation Using MooTools


This tutorial will teach how you can use an image and Mootools to create a slick mouse-over effect.

Read Full Tutorial
Demo

14. Create Twitter-Style Dropdowns Using MooTools


Well, everybody must have seen the drop-down login menu to twitter. This tutorial will teach you how you can duplicate that functionality of twitter like drop-down menu using MooTools.

Read Full Tutorial
Demo

15. Facebook Sliders With MooTools and CSS


This tutorial will explain how to create Facebook-style sliders that control the height, width, and opacity of an image.

Read Full Tutorial
Demo

16. FancyForm


FancyForm script replaces old checkboxes with the new interactive and flexible checkboxes with Tick being the sign for checked option and cross for the unchecked option.

Read Full Tutorial
Demo

17. iPhone-Style Passwords Using MooTools PassShark


In this tutorial you will learn how to create a iPhone-like password field, showing the most recently typed character and hiding previous per normal password fields.

Read Full Tutorial
Demo

18. JavaScript drop down menu using Mootools


Drop down menus are very important for any website layout and beauty. So in this tutorial you will learn to create a very easy and unobtrusive drop down menu using MooTools Core Build and the Fx.Slide.

Read Full Tutorial
Demo

19. Kroppr


Kroppr is an image cropping tool for your website that allows users to rotate, re-size and crop images with minor changes to your site.

Read Full Tutorial
Demo

20. Milkbox


Milkbox is a simple and sleek lightbox clone written for MooTools.

Read Full Tutorial
Demo

21. MooFlow


MooFlow give you a completely awesome browsing experience on your website, almost same as you get on apple.com for viewing the products.

Download
Demo

22. mooRainbow

Description
Download
Demo

23. mooSlide

mooSlide replaces common lightbox with Ajax one. You can have any type of content in it like HTML or FLASH, it can slide from top or bottom. It can be very handy to create beautiful sliding login panel.

Download
Demo

24. MooTools CountDown Plugin

I assume every one have used rapidshare at least for one time and had to wait for some seconds for the downloading starts. Using MooTools you can make a similar CountDown plugin by the use of which you can implement the same system that rapidshare is using.

Original Link
Demo

25. MooTools Kwicks Plugin


MooTools Kwick Plugin will enable you to have a hidden detail of an image displayed when you take your cursor on that image.

Original Link
Demo

26. MooTools Zoomer Plugin

Zoomer provides an elegant method for zooming in on large images.

Original Link
Demo

27. Morph Effect on mouseenter/mouseleave with Mootools


In this tutorial you will learn to add an elegant morph effect on unordered list on mouseover. Demo can elaborate more about this tutorial.

Tutorial
Download
Demo

28. Sexy Animated Tabs Using MooTools

If you have less space and more content to display then you can use tab systems. This tutorial will show you how to create sexy and animated tabs which can handle lot of content in little space.

Read Full Tutorial
Demo

29. Sexy sliding JavaScript side bar menu using mootools


A sliding menu can help you to save a lot of space on your website. This tutorial will use MooTools to create a sexy sliding side bar menu with very smooth sliding effect.

Read Full Tutorial
Demo

30. Sliding Labels Using MooTools


This tutorial will teach you to create sliding labels using little jQuery code. Luckily the effect doesnt require much MooTools code either!

Read Full Tutorial
Demo

31. Smooth Scrolling with MooTools Fx.SmoothScroll

Learn to create smooth scrolling effect using MooTools Fx.SmoothScroll.

Read Full Tutorial
Demo

32. TableGear


TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.

Download
Demo

33. Two CSS vertical menu with show/hide effects


This is a simple tutorial which will teach you to create two vertical menu with hide/shoe effect. One example will use Simple JavaScript and other will use MooTools.

Read Full Tutorial
Demo

34. Using CSS and Mootools to simulate Flash horizontal navigation effect


This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.

Read Full Tutorial
Demo

35. Using MooTools to Instruct Google Analytics to Track Outbound Links

Google Analytical provides important information about your visitors and where they are coming from, and if you want to see what are the exit links then by using MooTools you can direct Google Analytic to track outbound links

36. Facebook-Style Modal Box Using MooTools


This tutorial will teach you to combine CSS, Facebook’s imagery and MooTools to create a stylish and lightweight Facebook like Modal Box.

Read Full Tutorial
Demo

37. SqueezeBox – Expandable Lightbox


SqeezeBox is an overly which is designed getting inspired from LightBox. It will display the images in the full size in the same window like LightBox.

Download
Demo

38. FancyUpload – Swiff meets Ajax


FancyUpload replaces unobtrusive, queued and multiple-file selection with a fancy animated progress bar. It is very easy to set up and completely customizable using CSS and XHTML.

Download

39. Create a Simple News Scroller Using MooTools


News scrollers are very common on internet because of their effectiveness. In this tutorial you will learn to create a simple news scroller using MooTools.

Read Full Tutorial
Demo

40. Checkbox Filtering Using MooTools ElementFilter

This tutorial will use MooTools ElementFilter to make a checkbox filter, for example if you are making a search box, when you type your search in the box, elements with matching text will automatically be checked!

Read Full Tutorial
Demo

This is all for this post. Anything missing or any suggestion? Do mention in your comments and we will be ha

Category: Graphic Design  Tags: , , , ,  Leave a Comment

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

06
Jul 2010
admin

Preview-css-menu-button-tutorialsNavigation menus and buttons with CSS styling are being used in almost every website. There are a lot of techniques to utilize and a good developer should have some basic knowledge about them all.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

Bulletproof-sliding-doors-css-menu-button-tutorials

2. CSS Sliding Door Using Only One Image

In this tutorial,author will show you how to code the navigation bar using only 1 image.

Sliding-door-using-only-one-image-css-menu-button-tutorials

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

Drop-down--css-menu-button-tutorials

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

Pure-with-infinite-sub-menus-tutorial-css-menu-button-tutorials

5. Pure CSS Vertical Menu

Following this tutorialyou are going to build the second most common menu navigation, the vertical navigation menu. Hereyou are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

Pure-vertical-css-menu-button-tutorials

6. Horizontal Menus That Grow on You

In this quick tutorial,author is going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. Whenyou move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

Horizontal-that-grow-on-you-css-menu-button-tutorials

7. Advanced CSS Menu

This tutorialwill show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now lets take it to the next level code an advanced (un-typical) list menu utilizing the CSS position property.

Advanced-css-menu-button-tutorials

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

Horizontal-subnav-with-jquery-css-menu-button-tutorials

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. Whatyou want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

Advanced-trick-css-menu-button-tutorials

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

How-to-using-sprites-css-menu-button-tutorials

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphicand finallycode website menu using unordered lists, and valid xHTML/CSS.

Graphics-with-rollovers-css-menu-button-tutorials

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some great looking icons. Hereauthor will show you how to implement it to your web page.

Dock-css-menu-button-tutorials

13. Vertical CSS Menu With a Behavior File

In this tutorialyou will build a vertical CSS menu with rollover submenus. This menu will be written in CSS and HTML, and will use a so-called behavior file.

Vertical-with-behavior-file-css-menu-button-tutorials

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menua simple way to display some teaser information for your vertical navigation.

Vertical-navigation-with-teaser-css-menu-button-tutorials

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

Sprite-navigation-css-menu-button-tutorials

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that authors created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

3-drop-down-css-menu-button-tutorials

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover and position properties.

Create-advanced-using-the-hover-position-properties-css-menu-button-tutorials

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu.The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

Create-vimeo-like-top-navigation-css-menu-button-tutorials

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorialauthorwould like to go over how to create a sexy drop down menu that can also degrade gracefully.

Sexy-drop-down-css-menu-button-tutorials

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the whatever:hover behavior file to make things work in Firefox and IE6+.

How-to-create-dropdown-css-menu-button-tutorials

21. CSS Overlapping Tabs Menu

In this tutorial youre going to learn to create a simple, yet cool menu with overlapping tabs.

Overlapping-tabs-css-menu-button-tutorials

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorialwill show you how to add some nice round corner effect to your anchor elements with jQuery. And yes,you will be doing this without using any image.

Rounded-corner-navigation-bar-with-jquery-css-menu-button-tutorials

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

Simple-vertical-css-menu-button-tutorials

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

Navigation-rollovers-with-drop-downs-css-menu-button-tutorials

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

Navigation-bar-with-tabs-using-sliding-doors-effect-css-menu-button-tutorials

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

Simple-vertical-digg-like-css-menu-button-tutorials

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu usingCSS3 without any JavaScript.

Jquery-style-with-3-css-menu-button-tutorials

28. Apples Navigation Bar Using Only CSS

Followingthis articleyou are going to learn how to make the toolbar below, using nothing but HTML and CSS.

Apple-navigation-bar-using-only-css-menu-button-tutorials

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Create-slick-using-3-css-menu-button-tutorials

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Create-windows-7-start-menu-using-3-only-css-menu-button-tutorials

Buttons

1. Gradient Buttons with CSS3

Aquick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient buttonshowing people just how amazing CSS3 is.

Gradient-with-3-css-menu-button-tutorials

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

Liquid-color-adjustable-css-menu-button-tutorials

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

3-gradients-no-image-aqua-mac-css-menu-button-tutorials

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

Sexy-hover-css-menu-button-tutorials

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

Creating-with-3-css-menu-button-tutorials

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

Roll-your-own-google-css-menu-button-tutorials

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

How-to-make-sexy-with-css-menu-button-tutorials

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

Better-nav-interactions-css-menu-button-tutorials

9. Roll Over Button Tutorial

In this XHTML CSS tutorial youll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, youll learn how to create a button whos hover state image is preloaded.

Roll-over-css-menu-button-tutorials

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This ones a good one for anyone getting started with CSS!

How-to-build-simple-with-image-sprites-css-menu-button-tutorials

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Fast-rollovers-without-preload-css-menu-button-tutorials

12. Pretty CSS3 buttons

Learnto create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

Pretty-css-menu-button-tutorials

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

How-to-design-sexy-using-css-menu-button-tutorials

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

Radioactive-css-menu-button-tutorials

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

Beautiful-icon-set-css-menu-button-tutorials

16. Building Beautiful Buttons With CSS Gradients

Well build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you dont have to regenerate images every time you change text, pages will load much faster because you dont have to download separate images and it allows text to be easily localized.

Building-beautiful-with-gradients-css-menu-button-tutorials

17. CSS3 Gradient Buttons

In this tutorial authors going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

Gradient-css-menu-button-tutorials

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

Build-kick-ass-practical-css-menu-button-tutorials

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

Only-drop-down-css-menu-button-tutorials

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all yourwebsites buttons.

How-to-make-nice-css-menu-button-tutorials

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution fordevelopers to create flexible buttons with easily changeable text.

Cross-browser-rounded-jquery-css-menu-button-tutorials

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

Making-rollover-css-menu-button-tutorials

23. Recreating CNNs Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNNs beveled style navigation isnt necessary.

Recreating-cnn-beveled-navigation-with-pure-css-menu-button-tutorials

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

Creating-glassy-non-div-navigation-bar-css-menu-button-tutorials

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

Sprites-css-menu-button-tutorials

Category: Graphic Design  Tags: , , , , ,  Leave a Comment

jQuery Carousel Plugins: Best Resources, Tutorials And Examples

06
Jul 2010
admin

Preview-jquery-carousel-plugins-resources-tutorials-examplesCarousels are handy if you have a row images and want your visitors to access them in solid and really beautiful way. With jQuery opportunities this feature is made very simple and good-looking.

In this post youre going to find different types of premade carousel plugins andtutorials how to make your own unique carousel gallery whenever you wish, find also some little inspiration at the end of article as bonus!

1. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Check out 15+ examples, tutorial how to set it up and all configuration options. Works with all major browsers. Heres the circular dynamic carousel example.

Jcarousel-jquery-carousel-plugins-resources-tutorials-examples

2. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb)alternative for users whose primary focus is not to build a full-blown image gallery.

Lite-jquery-carousel-plugins-resources-tutorials-examples

3. Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with flexible settings. Some cool features:

  • Ability to show multiple slides
  • Ability to show intro slide
  • Ability to Disable “First” and “Last” buttons at beginning & end of carousel

Heres an example with intro slide.

Agile-beta--jquery-carousel-plugins-resources-tutorials-examples

4. jQuery Carrousel

The core allows to create your own controls or effects. This plugin transforms and tags into an animatedcarousel.

Js-jquery-carousel-plugins-resources-tutorials-examples

5. jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

  • Carousel never ends and images shuffle around
  • Captions are optional
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
  • Thumbnails can be styled via CSS
  • Its less than 14K
  • Reusable on multiple containers within the same page

Infinite-jquery-carousel-plugins-resources-tutorials-examples

6. Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

Step-viewer-jquery-carousel-plugins-resources-tutorials-examples

7. Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

  • Works in FF3, IE7, Opera, and Safari.
  • Supports fixed-size or variable-size children
  • Supports the Meta plugin for jQuery
  • Totally CSS-based allowing for high customization
  • Degrades gracefully into an unordered list

Just-another-jquery-carousel-plugins-resources-tutorials-examples

8. LoopedCarousel

LoopedCarousel is a plugin made for jQuery that is not only a looping carousel, its main goal is to be extremely easy to implement. No more messing around with CSS to get your carousel to look and function properly. You want to show 5 items? Tell it “items: 5″ and so.

Looped-jquery-carousel-plugins-resources-tutorials-examples

9. jQuery Carousel

Great looking plugin with various types of use.

Great-jquery-carousel-plugins-resources-tutorials-examples

10. Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with a set of nested elements.

Roundabout-jquery-carousel-plugins-resources-tutorials-examples

11. How to Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

How-to-create-with-wordpress-posts-jquery-carousel-plugins-resources-tutorials-examples

12. jQuery Carousel Gallery for WordPress

This plugin builds on the built-in WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel.

Gallery-for-wordpress-jquery-carousel-plugins-resources-tutorials-examples

13. Making an infinite JQuery carousel

In this tutorialyou will make an infinite JQuery carousel. The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item. You can check out the demo.

Making-infinite-jquery-carousel-plugins-resources-tutorials-examples

14. jQuery Infinite Carousel

Screencast how to create infinite jQuery carousel. Step by step written tutorial also available. Check out the demo and accesscode.

Screencast-tutorial-jquery-carousel-plugins-resources-tutorials-examples

Examples

Branded07

Branded-07-jquery-carousel-plugins-resources-tutorials-examples

Aaron Hall Portfolio

Aaron-hall-portfolio-jquery-carousel-plugins-resources-tutorials-examples

Corny

Corny-jquery-carousel-plugins-resources-tutorials-examples

Mkg Studio

Mkg-studio-jquery-carousel-plugins-resources-tutorials-examples

Deluge Studios

Deluge-studios-jquery-carousel-plugins-resources-tutorials-examples

Golf Working

Golf-working-jquery-carousel-plugins-resources-tutorials-examples

Dazzle Cat

Dazzle-cat-jquery-carousel-plugins-resources-tutorials-examples

What Is XV

What-is-xv-jquery-carousel-plugins-resources-tutorials-examples

Bret Glassett

Bret-glassett-jquery-carousel-plugins-resources-tutorials-examples

Chris Kaufman Portfolio

Chris-kaufman-portfolio-portfolio-jquery-carousel-plugins-resources-tutorials-examples

Category: Graphic Design  Tags: , , , , , ,  Leave a Comment

The Ultimate Roundup of 50+ Icon Designing Tutorials

05
Jul 2010
admin

Icon designing is very essential and important for graphic designer as there are plenty of clients who are willing to pay good for some unique and creative icons for their projects. There are many sites offering free icons for commercial use but they cannot be unique as anyone can use them or they may not be according to your requirements like size or color so it is very important for designers to know, how to design their own spicy icons.

In this article we have compiled a list of very useful tutorials for icon designing. Mostly of them are performed in Photoshop or Illustrator. After going through these tutorials, you will have basic skills for icon designing, which you can utilize in your or your client’s projects.

1. Computer Icon Tutorial


In this video tutorial you will learn how to make Computer Icon. PSD file is included.

2. Design a Calendar Icon


This tutorial will help you to make a Calendar Icon using Photoshop.

3. Craft a Delicious Chinese Food Icon


This tutorial will teach you how to Craft a Delicious Chinese Food Icon using Adobe Illustrator.

4. Create a Cardboard Box Filled With Glossy Icons


This tutorial will demonstrate how to Create a Cardboard Box Filled With Adobe Style Glossy Icons using Photoshop.

5. Create a Chalkboard Icon


This tutorial will help you to Create a Chalkboard Icon Using Photoshop and IconBuilder.

6. Create a Dock Icon Folder


This Photoshop tutorial will help you to Create a Dock Icon Folder.

7. Create a glossy high tech 3D speaker icon


This tutorial will help you to Create a Glossy High Tech 3d Speaker Icon using Photoshop.

8. Create a Glossy Volt Icon


In this tutorial you will learn how to create a Glossy Volt Icon using Photoshop.

9. Create a Magnifying Glass Icon


This tutorial will help you to create a magnifying glass using Adobe Photoshop.

10. Create a Shiny Lock Icon Design


In this tutorial you will learn how to create a shiny lock icon using Photoshop.

11. Create A Stylish And Sleek Play-Station Portable Icon


This tutorial will tell you how to create A Stylish And Sleek PSP Icon using Photoshop.

12. Create a Stylized First Aid Icon


In this tutorial you will learn to create a Stylish First Aid Box using Illustrator.

13. Create A Vector Art Twitter Bird Character Icon


This tutorial will demonstrate the process to creating a vector art Twitter bird icon using adobe Illustrator.

14. Create An Aperture Style Camera Lens Icon


This tutorial will teach to how to create an aperture style camera lens icon using adobe Illustrator.

15. Create an envelope icon with a satin feel


In this tutorial you will learn how to create an envelop icon with satin feel using Illustrator.

16. Create Contact Icon


This tutorial will help you to create a beautiful contact icon for your website using adobe Photoshop.

17. Creating a Modern, Glossy Mouse Icon


Follow this tutorial to create a modern and glossy mouse icon using adobe Photoshop.

18. Design a Detailed Compass Icon


This tutorial will help you to design a compass icon using Adobe Photoshop.

19. Design a Glossy Download Icon


In this tutorial you will learn how to design a Glossy Download Icon using Photoshop.

20. Design a Stylish Mail Icon


This tutorial will help you in designing a stylish Mail icon in Photoshop.

21. Design a Vector Audio Speaker Icon


In this tutorial you will learn to design a vector audio speaker icon using Illustrator.

22. Design Float Circle Icon


This tutorial will teach you to create a Design Float Icon using Adobe Illustrator.

23. Draw 3D Crystal Icon


In this tutorial you will learn to Draw a 3D Crystal Icon using Photoshop.

24. Draw a Speaker Icon


This tutorial will help you to draw an elegant speaker icon using Adobe Photoshop.

25. Design a Forum Icon


In this tutorial you will learn to create a Forum Icon using Adobe Photoshop.

26. Glossy RSS icon


This tutorial will demonstrate the steps to create a beautiful glossy RSS icon using Photoshop.

27. Handy Web 2.0 Icons


This tutorial will teach you how to create handy web 2.0 icon in Photoshop.

28. How to Create a Cute and Adorable Twitter Icon


In this tutorial you will learn to create a cute Twitter Bird Icon using Photoshop.

29. How to Create a Golden, Vector Compass


This tutorial will teach you to create a golden vector compass using Adobe Illustrator.

30. How To Create a Detailed Apple iPad Icon


This tutorial will teach you to create a fantastic Apple iPad icon in Photoshop.

31. How to Create a Quirky Twitter Bird


In this tutorial you will learn to create a quirky twitter bird icon using Corel Draw.

32. How to Create a Social Media UFO Icon


This tutorial will teach you to create a social media UFO icon using Adobe Photoshop.

33. How to Create an Envelope Icon


In this tutorial you will learn to create an envelop icon using Adobe Photoshop.

34. How to Make a Folder Icon


In this tutorial you will learn to create folder icon for your desktop or a website using Adobe Photoshop.

35. Designing a New Social Media Icon


In this tutorial you will learn to create a new StumbleUpon Icon using adobe illustrator.

36. Drawing A Pencil Icon


This icon designing tutorial will demonstrate the process of drawing a pencil icon.

37. Drawing iTune Icon


This tutorial will teach you to create an iTune Icon using Adobe Illustrator.

38. Draw Pie Charts


In this tutorial you will learn to create pie charts using Illustrator.

39. Making a Photoshop Shield


This tutorial will help you to make a Photoshop Shield icon.

40. Nice ‘n’ Simple Subscribe Badges


This tutorial will teach to the process to making simple subscribe badges using Photoshop.

41. New Quicktime Icon


This tutorial will teach you to create Quicktime Icons in Photoshop.

42. Orb Site Icons Tutorial


In this tutorial you will learn to create Orb Site Icons using Photoshop.

43. Gold Ipod Shuffle Icon

.
This tutorial will demonstrate the process to make a Gold iPod Shuffle Icon using Photoshop.

44. Design the Mac OS X Leopard Folder


In this tutorial you will learn to create a Mac OS X Leopard Folder in Photoshop.

45. Create Mario Icon


This tutorial will teach you the process to create a Mario Icon using Photoshop.

46. Professional Security Icon


In this tutorial you will learn to create a Professional Security Icon.

47. Pyramid Icon Design


This tutorial will teach you how to make a Pyramid Icon using Photoshop.

48. Skype Logo


In this tutorial you will learn to create Skype Logo using adobe Photoshop.

49. Vista Error Icon


This tutorial will demonstrate how to create a Vista Error Icon in Photoshop.

50. “Share This” Icon


This tutorial will help you to create a “Share This” Icon using Photoshop.

51. Create a Speed Gauge and Watch Icon


In this tutorial you will learn to create a speed gauge and watch icon using Photoshop.

Anything missed? Feel free to shout at us via comments section. :)

Category: Graphic Design  Tags: , , , ,  Leave a Comment

30 jQuery Accordion Menus, Tutorials And Best Examples

04
Jul 2010
admin

Preview-jquery-accordion-menus-resources-tutorials-examplesAccordion menus are used widely in navigation, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed, you can really save some space and be able to show a lot of information using this technique.

Yes, and of course such sliding content always is great from design point of view and giving your visitor unique experience while he is visiting. Great isn’t it? – here you will find a lot of customizable plugins, tutorials helping you to understand accordions at all as well as great examples, where this technique has been implemented in successful sites!

1.Yup, Yet another JQuery Accordion Plugin

Simple free jQuery accordion plugin. Available in 4 versions. Check out the tutorial how to use it, get the code, and download all the source files.Some of the new features:

  • Built according to the JQuery Plugin pattern
  • No more need for menus to have an ID
  • An ‘active’ class is now added to each toggle that has an open panel below it
  • Panels that hold other things than lists. You can now add anything
  • Nested accordions

Check out the demo here.

Yup-yet-another-jquery-accordion-plugin-jquery-accordion-menus-resources-tutorials-examples

2.jQuery UI Demo

See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.

User-interface-jquery-accordion-menus-resources-tutorials-examples

3.Stupid Simple jQuery Accordion Menu

Very detailed tutorial about including jQuery in your mockup, creating the JavaScript, creating CSS and HTML. You can also view the demo and download all files.

Simple-stupid-jquery-accordion-menus-resources-tutorials-examples

4.Making Accordion Menu Using jQuery

In this post, youll see two examples of accordion. First menus visibility gets toggled on clicking on the header while the another menus visibility gets toggled when mouse is moved over it. See the tutorial and download source files as well.

Making-using-jquery-accordion-menus-resources-tutorials-examples

5.jQuery Accordion Menu

Step by step tutorial that will take you through the creation of a jQuery accordion menu. Of course, you can view the demo and download source files.

Lateral-code-jquery-accordion-menus-resources-tutorials-examples

6.jQuery Examples Horizontal Accordion

Learn how to create easy horizontal accordion menu.

Examples-horizontal-tutorial-jquery-accordion-menus-resources-tutorials-examples

7.jQuery – Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. Explore tutorial, see documentation and different examples of use here.

Horizontal-tutorial-jquery-accordion-menus-resources-tutorials-examples

8.State-Saving jQuery Accordion Menu Without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them. View demo and download source too.

State-saving-jquery-without-reloading-the-page-tutorial-jquery-accordion-menus-resources-tutorials-examples

9.Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.

Screencast-tutorial-jquery-accordion-menus-resources-tutorials-examples

10.Regular and Hover Accordion Menus

See example of hover accordion menu, learn how to create it and download the plugins.

Regular-hover-jquery-accordion-menus-resources-tutorials-examples

11.Haccordion – Simple Horizontal Accordion Plugin for jQuery

Simple and fast plugin for creating simple horizontal accordion menus. Demo included.

Haccordion-simple-horizontal-accordion-plugin-for-jquery-accordion-menus-resources-tutorials-examples

12.Exactly How to Create a Custom jQuery Accordion

The plan for this tutorial is to show how to create an accordion using the jQuery UI function, then create one using some custom coding.Youll be using a blog sidebar as an example. View demo and get the source.

Exactly-how-to-create-custom-jquery-accordion-tutorial-jquery-accordion-menus-resources-tutorials-examples

13.Simple Accordion w/ CSS and jQuery

Detailed tutorial how to create great looking accordion menu. You can also check out Toggle tutorial. View demo.

Simple-witch-css-jquery-accordion-menus-resources-tutorials-examples

14.Accordion Madness

One of the options how to create accordion menu.

Madness-jquery-accordion-menus-resources-tutorials-examples

15.A Simple and Beautiful jQuery Accordion Tutorial

Learn how to create the well-known JavaScript accordion with the most minimal amount of HTML, CSS,JS and of course, with a beautiful interface as well. Check out demo and download source.

Simple-beautiful-tutorial-jquery-accordion-menus-resources-tutorials-examples

16.Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Demo and code included.

Slide-drawer-jquery-accordion-menus-resources-tutorials-examples

17.Create Simplest Accordion Menu using jQuery

Another simple tutorial how to create standard accordion menu. View demo and download files.

Simplest-menu-using-jquery-accordion-menus-resources-tutorials-examples

18.TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle. For more information visit leigeber.com.

Tiny-javascript-jquery-accordion-menus-resources-tutorials-examples

19.Javascript Accordion Menu Wizard

Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.

Javascript-menu-wizard-jquery-accordion-menus-resources-tutorials-examples

20.Horizontal JavaScript Accordion 1kb

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.

Horizontal-javascript-1kb-jquery-accordion-menus-resources-tutorials-examples

Examples

21.Alex Cohaniuc Portfolio

Alex-cohaniuc-jquery-accordion-menus-resources-tutorials-examples

22.Deluge Studios

Deluge-studios-jquery-accordion-menus-resources-tutorials-examples

23.Rzmota

Rzmota-jquery-accordion-menus-resources-tutorials-examples

24.Screenfluent

Screenfluent-jquery-accordion-menus-resources-tutorials-examples

25.Artisanmedia

Art-is-a-media-jquery-accordion-menus-resources-tutorials-examples

26.Exotics RTC

Exotics-rtc-jquery-accordion-menus-resources-tutorials-examples

27.Two Chaps

Two-chaps-branding-jquery-accordion-menus-resources-tutorials-examples

28.Ten 18 Photography

Ten-18-photography-jquery-accordion-menus-resources-tutorials-examples

29.We Are Lighthouse

We-are-lighthouse-jquery-accordion-menus-resources-tutorials-examples

30.DJ Eric C

Dj-eric-c-jquery-accordion-menus-resources-tutorials-examples

Category: Graphic Design  Tags: , , , , ,  Leave a Comment
« Previous Entries