The entire tool is free to use and based on open HTML standards. You can download the entire script package from their website to start messing around. I recommend spending a bit of time with jQuery and JavaScript effects.

There are many unique styles of transitions between image gaps. Similarly a thumbnail carousel is included with each rotation. This is a powerful feature not included in many scripts for how intensive actions are on server space. You have the option for fullscreen, or to additionally remove this option entirely.

Advanced Setting

If you hold a knowledge of CSS design it’s possible to create some fantastic customizations. CSS is the root language for building design code within HTML. The cross-browser support makes it much easier to enable powerful effects and cascading styles.

You may run through a gallery of Flickr photos or similar 3rd party solutions. This makes the creation of each image gallery almost a snap! Similarly you’re able to host multiple many images on different domains.

Now when you look into this plan you are offered 2 options. the TN3 gallery for free which is stripped of some prime features but still works. In fact, the free plan is great for any basic website not looking to dish out any funds.

The pro version of the module supports loads of features. However just purchasing a pro model only allows installation on one website. That’s the reason why a higher source is available for purchase on multi-site authors. I’ve added a few great features below included only in the pro series.

• Additional pre-packaged CSS skins
• Vertical thumbnails in carousel
• XML support
• Mouse-Wheel navigation
• Host multiple albums
• Dynamic image resizing
• Unbranded solutions

You should look into their use guide for implementation. Honestly the programming isn’t too difficult, so I highly recommend it. Spend some time on the TN3 website and you’ll find loads of new information for developers. This ranges everywhere from jQuery installation to customizations in CSS and HTML.

Conclusion

Hopefully these options will get you thinking about the TN3 gallery solution. For your next website launch it’s quite possibly the most important tool!

To get a broader view of pricing charts they offer a dedicated page to each version. Similarly they have hosted examples with bits of code and many skins to choose from. If you have suggestions or recommendations for the script, feel free to strike up anything in the comments below.

These CSS3 Navigation tutorials are more experimental. You can also create user friendly horizontal and vertical CSS3 navigation. Javascript makes it possible to create more interactive, flexible and more responsible navigation to any web site. Some navigations and menu tutorials discussed here which would help you to experiment all the new properties of CSS3 successfully.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators

JQuery Style Menu With CSS3

Here is an experimental CSS3 navigation. The outcome was a simple animated sliding vertical CSS3 navigation. It adds styling for the anchor tags with some fancy web kit border radius and box shadow. It gives shape, depth and completeness to image background.

CSS3 Dropdown Menu

CSS3 drop down menu adds some new features. The creation of multi-level dropdown menu that using border radius, box shadow and text shadow shown here. This dropdown also works on non CSS3 compatible browsers.

Apples Navigation Bar Using Only CSS

This is mainly image free apple CSS3 navigation. This toolbar created using only CSS. You can give rounded corners and drop shadows to this CSS3 navigation element. 

Create a Slick CSS3 Navigation

This is only an experimental example that uses the new features of CSS3. That tries to mimic the CSS3 navigation menu in dragon interactive website using only CSS.

Sweet Tabbed Navigation Using CSS3

If you are interested in creating a sweet tabbed CSS3 navigation this tutorial will definitely comes to your help. It provides you a step by step description to how create tabbed CSS3 navigation. After creating navigation you can use some CSS3 features to make that navigation look beautiful.

Advanced CSS3 Menu

Just using CSS3 you can create great looking buttons. CSS3 made simple of creating these buttons by providing new features. So now creating a nice looking CSS3 navigation is not a difficult task.

Use CSS3 to Create a Dynamic Stack of Index Cards

This mega dropdown menu offers an effective solution to displaying a lot of content at the same time it helps to keep a layout clean. Here is a neat description to know how to build a cross browser CSS drop down menu using CSS3 features.

How to Build a Kick Butt CSS3 Mega Drop Down Menu

The navigation provides a great place to have little fun and insert some personality. To this unique CSS3 navigation menu it use font face, transforms and transition features of CSS3. A usable CSS3 navigation is a staple in good web designing.

Creating a Fun Animated Navigation Menu With Pure CSS

This article shows you how to create a simple animated CSS3 navigation menu. It is future proofed to work with next generation browser. Here menu is organized in an unordered list it provides an easy way to style the menu links and it is semantically correct.

CSS3 Minimalistic Navigation Menu

This article shows you how to create a simple CSS3 animated navigation menu. It is future proofed to work with next generation browser. Here menu is organized in an unordered list it provides an easy way to style the menu links and it is semantically correct.

Accordion Using Only CSS

This tutorial helps you to achieve accordion effect using CSS3. It doesn’t require javascript. You can also animate this by using web kit transition property. This accordion like CSS3 navigation can add up value to your site.

Accordian Effect Using CSS

 How to create a pure CSS based accordion effect without javascript is described in this tutorial. It is concentrated on utilizing targeted pseudo class. It uses CSS transitions to animate the effect.

CSS3 Menu Demo

This page provides you code for the creation of horizontal chunky menu. It uses only CSS properties to create this menu. So there is no need to worry about javascript disabled browsers.

CSS3 Transition Tutorial Menü mit Slide-Effekt im Apple-Style

Here you will get a detailed description of CSS3 transition tutorial menu with slide effect in apple style along with code and images.

How to Create a Drop Down Nav Menu with HTML5 CSS3 and JQuery

This tutorial shows you what you can achieve with HTML5 and CSS3. The result will be the dropdown menu. It also used jQuery to handle the effect and add finishing touches.

Osx Dock

A modal that helps web developer who are using webkit based browsers, CSS3 effects and properties to create fast, simple modals by using transforms, animation and some other design cues.

How To Create a Sweet CSS3 Vertical Navigation

Here is stuff for creating a beautiful vertical CSS3 navigation. Without using an image it displays an icon in the centre. When the user hovers over the circle it expands and shows a short description.

Halftone Navigation Menu With jQuery & CSS3

The methods for making CSS3 and jQuery halfone style navigation menu given here. That allows you to display animated halfone style shapes with the navigation link. It provides a simple editor for creating additional shapes. So now you can create an eye catching navigation menu on your site.

Slide Down Box Menu

Here is an idea to create unique sliding box navigation. To create this menu you can use background image that create a glass like effect with a semi transparent gradient. You can also try it in different textures to make it look amazing.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

It teaches you how to create a full page cufonized menu. This menu has some features like a hover state item that adapts width of the current item and there is a slide out description bar that help to reach current menu item. It used jQuery for the effect and CSS3 property for the style.

Animated CSS3 Navigation

To create this animated CSS3 navigation menu you need an unordered list and two div elements with different attributes in li tag. It uses CSs3 gradients to style the background, text shadow, box shadow and CSS3 animation for animation purpose.

Simple Navigation With CSS3 and JQuery

A simple navigation menu built with CSS3 and UI. It uses fonts from google font API and to give rounded corners you can use DD rounded corner script. The code for the creation of this navigation is very simple.

Create a CSS3 Menu Using moz-border-radius

Here is an explanation with example for how to create a CSS3 navigation that uses the property moz-border radius. It works in different browsers. Both HTML and CSS codes are given you can make use of it.

CSS Greennav

A clean CSS3 navigation menu can be created with professional look. To give professional touch to it you can use some of the CSS3 properties like the gradient, drop shadow and rounded corners. This uses some new technique that allows giving a two different color borders.

CSS3 Fade Menu

CSS3 fade menu uses only one graphics that is right and left arrows to indicate the sub menu. It applies CSS3 styling to give corner radi, drop shadows, gradient fill and fade in transition. CSS3 made simple and easy to create a navigation menu.

Windows7 Start Menu CSS3

Now it is possible to create windows 7 start menu using only CSS3. There are three menus one is container, second is programs menu and third on is link menu these CSS3 navigation created with the help of some CSS3 properties such as box shadows, gradients. Here transparency is achieved by using RGBA.

This can include text elements, form fields, headings, images, and so much more. CSS properties can also be easily manipulated using just a few lines of jQuery. In this overview we’ll be going over some of the best features for DOM manipulation.

Much of the code is built around the newest version of jQuery which at the time of writing is 1.3.2. The library is backwards compatible for most functions so primary CSS manipulation shouldn’t cause any errors. If you have any questions check out the release documentation and page wiki.

Getters and Setters

Before jumping into code we should clear up some simple lingo. There are two main types of functionality we’ll be working with in manipulation functions. Getters are used to get any type of data and return some form of result. This can include dynamic data responses or complex algorithms.

Setters are in place to change or update the current value of a page element. DOM objects are often referenced through CSS from an ID or class name. jQuery uses the internal method .attr() to update the value of any element’s list of attributes. However it can also pull data from any element being used to just check the current value – this is both a setter and getter style method.

Among many of these methods are all 3 types. Combination functions are very useful since they provide response information and also hold the ability for document manipulation. CSS properties are some of the easiest to build upon and provide the most delicate environment for practice.

Dynamic Classes

The most popular method .addClass() is commonly seen in jQuery scripts. It can be useful to manipulate a page element and change its class on the fly. As a simple example consider a user removes a friend or deletes a message from their profile. You may then manipulate that entry in the list to change its class to “deleted” or “old”.

This gives the animated effect of applying the action right after the user clicks. This can be done with a jQuery Ajax() call and simply apply an addClass() method towards the end of the return statement.

$('p').addClass('myclass secondclass');

The function can also be used to affect many page elements at once. For example the code above targets all paragraph elements on the page and adds two different classes to them. The individual entries myclass and secondclass are separated by a space and delineated inside the addClass function.

Checking Classes

removeClass() is just the opposite and provides a self-explanatory effect. You are able to chain methods by removing a class from an element and also adding a new class onto the same object. This type of coding is very convoluted and proves to be a bit more distracting than useful.

Also in the same range is the .hasClass() method. This only requires a target parameter and will return a boolean value if the matched element(s) has a class or not. This can be extremely useful when looking to apply a new class onto elements and you’re unsure if they are already in place.

You may also have an interest in .toggleClass() which will add or remove classes based on the element’s current state. For example this could be used on a drop-down menu with an open and closed state. Check out the toggleClass documentation if you want to find out more uses.

Building Directly with CSS

If adding new classes isn’t really your style you may consider directly manipulating page objects with CSS. The .css() method is used to pull any property value from the selected object. This can be done multiple times by separating each query with a comma.

The shorthand writing passage for the CSS method also allows you to apply function code inside the parentheses. This code can parse complex maths and perform loops for data manipulation. Below is an example piece of code applying a few CSS properties to an element under the ID “myFirstElm”.

$('#myFirstElm').css( {width : '30px', height : '10px', color : '#000'} )

You may notice this is not the most elegant solution for CSS styles. It’s often much easier to write out the code in advance and save this as dormant styles in your global stylesheet. In this way you just need to switch classes to bring about the same effect as applying a multitude of properties as shown above.

Much of the manipulation done with the CSS method can also be applied with other jQuery functions. If you’d like to delve into other tutorials a bit deeper check out our list of jQuery tutorials for an exclusive set.

HTML Elements

Each HTML element has internal contents based on its placement in the tree. The Document Object Model can be viewed as a hierarchy tree which shows the root nodes and all of their children.

With the jQuery .html() method you are able to directly pull all internal HTML from a block element. This is similar to each browser’s native innterHTML property with more dynamic features. With the html() method you are able to target any page element and pull/manipulate its contents from any event. This could be a button press, mouse over event, or anything similar.

Attributes

Each HTML element commonly has a few attributes associated with it. Even HTML and body tags are now seeing attributes with useful values added into pages.

With the powerful .attr() method you can both set and get attribute values. After targeting your jQuery element it’s important to realize which functionality you’re going to be using. By targeting just a single attribute name you can check to see if this is set on the current element and what its value is.

Below is sample code for adding an alt attribute to a simple page image. This code will work to either add a new alt tag or overwrite the current value. This is what gives jQuery so much power and shows what you can truly accomplish with a small library of manipulation functions.

$('#pagePhoto').attr('alt', 'Here is my image alt text');

Along with .attr() there are many other sample methods which can pull data about an element. .height() and .width() will pull the exact measurement of an object’s height and width at the time of calling a function. So if you have an expanding box you can create a for loop to output each length/width combo as it grows.

Conclusion

jQuery is an enormous library and it will require some time to scour all the information at hand. Not every function will prove to be useful to you so as a developer it’s important to pick and choose your favorites. Figure out which type(s) of functionality you prefer the most and practice building this through many different means.

The open-source nature of the project shows how quickly plug-ins can be built and added into code repos. Document manipulation has been around for years but has just recently broken into the spotlight with its ease of implementation. Most modern CMS packages will come out-of-the-box running jQuery or a similar JS library. By studying the basic functions ahead of time it will become much easier to adapt as a jQuery dev in the coming years.

These 45 jQuery tutorials will help you to create accordion, slideshow, plugin, menus and slider gallery.

1. jQuery plugin: Easy Accordion

Utilization of jQuery as one of the applications are very varied, especially functionality and usability of these jQuery. One is how to make an application accordion becomes easier for you to do.

2. Simple Tooltip w/ jQuery & CSS

There are so many applications and plugins that you can use in conjunction with the features found on jQuery, one of which is a feature that you can use tooltips on CSS code.

3. Coda Popup Bubbles

As one of the applications that are not yet widely used, especially on the Mac, make Coda become one of the interesting tools for you to try, for example for application and web development.

4. Annotation Overlay Effect with jQuery

Much we can do with the existence of such jQuery applications, one feature that is quite interesting and you can use as an animated feature on your blog or website is “Annotation overlay Effect”. This feature is very nice and quite interesting for you to try.

5. Exposure Jquery Plugin

To produce images that you can view modifications, both in terms of look, slide, image size, and multiple applications related to image.

6. Build an RSS Reader with jQuery Mobile

Some applications that you can use to gain backlinks is to use widgets including RSS reader. Where in this application we can know the number of readers of a blog that will always get updates from our blog.

7. Randomizer App w/ jQuery

Utilization of various jQuery-based applications that is very helpful to optimize the various features available on a web design. One thing you can do with jQuery application is a feature of “randomizer”.

8. Full Page Image Gallery with jQuery

Web design is equipped with a full image gallery are usually used for websites that contain about design and the like. To make this kind of application features, jQuery also been equipped with some source code that you can modify.

9. jQuery Tabbed Interface/ Tabbed Structure Menu Tutorial

Structures built on the application and some source code will certainly help you in arranging the layout and also design a web site. You only need to do some steps to get the best results.

10. jQuery plugin: Easy List Splitter

Interested to try the other features of jQuery? Applications and various kinds of features you can get by utilizing the features and facilities contained in the jQuery source code.

11. Sliding Boxes and Captions with jQuery

A website will be more interesting if it comes with several features that are easy to navigate, including the existence of multiple slides box facilities, mainly for convenience in choosing menus. jQuery code you can use to do so.

12. bgStretcher – jQuery Plugin

Display an attractive website, often affects visitors to better know the contents of the website. Some simple features that you can apply for the website display becomes more appealing is by using a background as a screen from view the website itself. Query which has many features and facilities can do so.

13. Image Cross Fade Transition

To create an animated image, you can use jQuery and also an application to modify various types of image transition.

14. Slider Gallery

Slider gallery is a feature that uses some kind of image that will be used as an animation in it. jQuery you can use to make the feature. With the existing code, you can create a slider gallery according to your wishes.

15. Custom Animation Banner with jQuery

To attract visitors of a web is usually some interesting features in it deliberately in pairs. For example, by placing banner animation.

16. Wijmo – jQuery UI Widgets

Many things you can do with the existence of jQuery applications, such as the manufacture of some types of widgets. There are so many types and widget view that you can use, such as charts, sliders image, grid, and some graphics applications.

17. Quick Feedback Form w/ PHP and jQuery

Many business applications that use the mailing list form feedback form. Where with this kind of application form, businesses can get a list of potential customers, so it’s easier to follow up on these customers. The making of this application will be easier with features that are available on the jQuery system.

18. Creating a Dynamic Poll with jQuery and PHP

To create a feature polls, you can do through some jQuery and PHP applications. There is little difference for editing code on each feature you want to use.

19. Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP

Business applications are widely used on various websites that sell various goods. For the features used are “added to chart”. There are many applications that can be used to make this kind of feature, for example by using jQuery and PHP.

20. Create a unique Gallery by using z-index and jQuery

Various types and features you can get in some more websites that feature gallery application. Some examples gallery that often you come across them is shaped slider.

21. Floating HTML Menu Using jQuery and CSS

To make a wide range of menu display on a website often required an understanding of the functions of a source code, especially if you wish to make application to the features found on jQuery and CSS.

22. Pretty checkboxes with jQuery

The use of check boxes often can we meet on a few websites that aim to online surveys. There are many types and appearance of the features found on a check box. You can make a variety of applications of this kind, for example with a more attractive appearance.

23. Create an amazing music player using mouse gestures and hotkeys in jQuery

Create a music player that is quite interesting and attractive you can do through a programming language. Some of the applications contained in jQuery you can modify to produce a good display and music player equipped with various features.

24. Simple jQuery Spy Effect

I guess you will not find it difficult to develop some code that is contained in the application of jQuery. One proof of the benefits of jQuery code is able to make a variety of features, like Spy Effect.

25. Create an Amazon Books Widget with jQuery and XML

Do you like an online business? One such site is quite well-known online business is Amazon. Do you want to take part in the market Amazon products through your blog? With this application you can use through jQuery, some features and widgets you can use the Amazon with a little modification at existing code.

26. Building a jQuery Image Scroller

Display animation on a web site would be more interesting if it is equipped with a variety of images, particularly three dimensional images. In addition, you also can adopt jQuery applications for further maximize the scroll view that you created.

27. Make a Mega Drop-Down Menu with jQuery

To simplify the process of navigation on some sites and blogs, use the drop down menu will be very helpful, especially for that who want a simpler blog but does not reduce the function of the application. To make this kind of application, you can use jQuery application.

28. Animate Image Filling Up Using jQuery

Actually, to create animated images are not too difficult. To do this you only need to prepare an existing image, for example by editing via Photoshop. After that, to create the impression of animation, some applications you can use, one of which is jQuery.

29. Sexy Drop Down Menu w/ jQuery & CSS

Although the function of the drop down menu looks very simple, but if you are able to create and display a combination of drop down button becomes more attractive, it is not impossible that this will give the impression visitors of your website.

30. Outside the Box Navigation with jQuery

Actually, to make the navigation buttons on a website not too difficult. With the help of a few applications, then you can make some shapes and design a navigation button, so that your website look more attractive when compared with the navigation keys are still standard.

31. Create simple tooltips with CSS and jQuery – Part 2

Display tooltips some applications you can integrate with several existing jQuery code. The purpose of this application is to perfect some form of tooltips that ever existed, such as the use of some applications do not need.

32. jQuery Sequential List

The use of some jQuery code can you combine to make a variety of lists on a particular application. And if you’re having trouble, you can try some changes to this code.

33. Fading Menu – Replacing Content

To make fundamental changes on a website, you can do it through some existing HTML source code. Only needed a little editing of some code from the default values to the value that you want.

34. Animated Menus Using jQuery

Use the navigation menus with animated display widely used in flash website.It is intended that the website look more attractive, but the most important thing is not to such animated features became more severe at the time of the website loading. To make some animated menus, you can use the features of jQuery.

35. Create a Cool Animated Navigation with CSS & jQuery

For some people, use the navigation menu is quite animated will be more attractive when compared with a menu that is static. This is because with the menu or button would be more interesting animated visitors of a website. How to make it? You can create a menu via some web design applications, such as CSS and jQuery.

36. Submit A Form Without Page Refresh using jQuery

One feature that is used to interact with visitors of a website is with the menu “submit form”. Where these features can you find in some survey website, business, and others. Features can submit your form with a few modifications of existing code in jQuery, and also can you change the layout of the form.

37. Making a Custom YouTube Video Player

Using video as facilities of media presentation in person, be one alternative in conveying information to others. Currently, nearly every site is always equipped with the feature “live video”, such as YouTube, Metacafe, and several other online video applications. Various video displays can be made in accordance with your wishes.

38. Blockster transition effect

Various forms of animation can you make with the help of jQuery applications, such as sliders, drop down menus, gallery, and various other animated displays. This application is a combination of flash with some specific programming language web design, such as jQuery.

39. Build a POI map using jQuery & Google Maps v3

Since the Google maps application some time ago, developments in information technology more so easy. With Google maps application, many benefits can you meet, such as the location of a place and others. To be able to use this kind of application, you also can use the jQuery code for that purpose.

40. Thumbnails Navigation Gallery with jQuery

Several types of navigation buttons you can use such created applications with jQuery. One of the results of a code contained in this application is that you can make a navigation menu using some of these images as navigation buttons. Given these features, then a website will appear more attractive.

41. Animated Form Switching with jQuery

As a means to interact with others, especially visitors of a website, often we are asked to register if you want to join the site. The use of application “form” is absolutely necessary. In order to view an online form looks attractive; there are some modifications you can do, especially on the code used to build the form.

42. Animate Panning Slideshow with jQuery

Animated feature currently already widely used in several websites, especially the flash website design. Such application is intended to make it more attractive appearance of the website. Some features and types of animation can be your own create accordance with our wishes.

43. Sponsor Flip Wall With jQuery & CSS

Use wall flip on some websites is very useful as a means of promoting a website by placing a banner on the layout of the website. This application provides a separate display for you, especially those that have a product to be marketed. This application is more likely to use the animation feature based “flash”.

44. Contextual Slideout Tips With jQuery & CSS3

Many things you can do using jQuery application, one of which is the code used to create a slide out that also functions as a navigation button on your website. This application has a view that is quite interesting. Besides, you also can easily create this kind of feature.

45. jQuery Syntax Highlighter

Some of the code associated with CSS, HTML, jQuery, and several other applications that mutual support will help you in learning some of the code needed to build a web design.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

CSS3 Border Radius Tool

Here is the CSS which I used in PHP file:

.outPut {
	-moz-border-radius:10px 10px 10px 10px;
	background-color:rgba(166, 167, 244, 0.8);
	display:table-cell;
	font-size:2em;
	height:200px;
	margin:0 auto;
	min-height:200px;
	text-align:center;
	vertical-align:middle;
	width:320px;
}

.Code {
	-moz-border-radius:10px 10px 10px 10px;
	background:none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
	margin:60px 0 20px;
	padding:10px;
	position:relative;
}

input{-moz-border-radius:5px 5px 5px 5px;
	background-color:rgba(255, 255, 255, 0.5);
	border:1px solid #D4CFBD;
	font-size:1.1em;
	padding:2px 5px 2px 2px;
}

label {
	font-size:1.1em;
	margin:4px 10px 0 0;
}

Here is jQuery code:

$(document).ready(function(){
    $(".radiusInput").keyup(function()
    {$(".code-border-radius-equal").text(function(b){
    var c=$(".radiusInput").val();return(c+"px")});
    var a=$(".radiusInput").val()+"px";
    $(".outPut").css({"-webkit-border-radius":a,"-moz-border-radius":a,"border-radius":a})
    });

DEMO Download

We have focused on finding articles based on the following areas of web development:

CSS 3

WordPress

Jquery

Whether you have just started in web development or if you’re a pro, or if you want to just improve your skills, then these tutorials are for you. We, at Pelfusion, believe that 2010 is the year for all of us to go beyond our boundaries and really focus on working on our skills. CSS 3 and Jquery are the tools you need to take your web design skills and really boost them to the next level. For wordpress, we’ve included all of the tricks of the trade you need to give your blog that cutting edge that is demanded in this new year.

This article focuses on the BEST tutorials for each field, so we hope you enjoy it and if you have any other tutorials to suggest, please feel free to let us know.

CSS 3 Tutorials

1. The New Hotness: Using CSS3 Visual Effects

Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome.

2. Stronger, Better, Faster Design with CSS3

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff).

3. Liquid Columns with Background Size

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns.

4. Pushing your buttons with practical CSS3

In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

5. Push your web design into the future with CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design.

6. CSS Trick Hidden Messages

Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection.

7. A look at some of the new selectors introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes.

8. Rounded Corner Boxes

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation.

9. A mock up interface using CSS3 colour

“I’ve included quite a lot of other CSS3 into the mix. There is liberal use of box-shadow to give the allusion of depth on the windows and title bar. Rounded corners have been added to windows.”

10. Creating a Polaroid Photo Viewer with CSS3 & Jquery

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create.

11. Styling Forms with attribute selectors

In this article, the first of a two-part series, we will look at attribute selectors and how do they allow us to better style portions of a Web documents.

12. Old School Clock with CSS3

Transform:rotate is a new feature of CSS 3 which lets you… well, rotate stuff. Transform will also allow you to scale, skew and translate (move) objects in your web page.

13. The CSS3 Border Radius Property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

14. How to create a sexy vertical sliding panel using jquery and css3

First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel.

15. 11 Classic CSS techniques made simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming.

16. 3 Easy and fast CSS techniques for faux images

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

17. Create a letterpress effect with css text shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

18. Text Embossing techniques with CSS

I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.

19. CSS Text Gradients

Text Gradient is a simple css trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.

WordPress Tutorials

20. WordPress hack creating a dynamic sticky

For our blog, MaxPower, we needed to have certain articles ’stay at the top’ longer than others.

21. How to make a wordpress plugin

A short video tutorial on how to make a wordpress plugin.

22. How to make a random post button

Ever wanted to have a “Random Post” link or button in your sidebar but you don’t know where to start? Well, today I’m going to show you how to do it.

23. Create an auto stats page for advertisers

I’m going to show you how to sell more ad spaces by adding stats to your WordPress blog’s Advertise page.

24. Multiple WordPress Page Layouts in one single template

Multiple layouts can always be achieved with custom page templates, but to keep things clean and economical, it’s much better to rely on one global template (”page.php”) if you can get away with it. So how will it work?

25. WordPress Hack: Create a custom error 404 page

In this “Wordpress Hack” you’ll learn how to create a custom 404 Error page for your blog. It’s helps your visitors find what they need, and also helps you not lose visitors!

26. Translating your blog

Your blog is online accessible to anyone in the world. Translating blog posts and pages increases your audience and monetization capabilities by at least ten-fold!

27. Styling WordPress Comments

A fun part of customizing WordPress themes is designing a comments format which complements the rest of the site.

28. WordPress Hack: How to setup a post series in wordpress

Organize your wordpress blog by setting up a post series people can follow for specific topics.

29. How to: List scheduled posts

Here’s a good idea to make your readers visit your blog more often, or suscribe to your rss feed: What about listing the title of your scheduled posts? If you’re interested to do so, just read this recipe.

30. Create a peel away effect on your blog or website

If you are wondering how some webmasters or bloggers create this little peel away effect on the top right corner of their website.

31. Custom Login Page

It’s cool to have the WordPress login page customized to fit your own website branding.

32. Highlight wordpress category when on a single post tutorial

While making the redesign for this blog I wanted to highlight the category in the navigation when browsing the specified category as well as keeping it highlighted when on the a single post added to that category.

33. How to add gravatars to wordpress themes

Add Gravatars to your WordPress theme. Gravatars are a quick way to add a personal touch to your blog comments by displaying the avatar of the commenter alongside their comment.

34. How to hack together a user contrributed link feed with wordpress comments

Although WordPress has a *very* extensive plug-in collection, now and again things come up for which there are no suitable plug-ins available (yet).

35. Blog Posts in different columns

Recently I had my blog posts divided into three columns with different blog posts appearing in each one. I’ve now switched back to two columns, putting my blog design/tech posts in one and my personal/life posts in the other.

36. Highlight author comments in wordpress

If a commenter knows the email address of the blog author, she could use the blog owner’s email address in her comment and get her own comment highlighted.

37. How to add adsense between your blog posts

To display Google AdSense ads (image ads or text ads) between your posts, log into your WordPress dashboard, go into your theme editor screen (see the red circle on the left in the image above to find your editor screen).

Jquery Tutorials

37. How to load in and animate content with jquery

In this tutorial we will be taking your average everyday website and enhancing it with jQuery.

38. Create a cool animated navigation with CSS & Jquery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website.

39. Creating a dynamic poll qith jquery and php

In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

40. Face-book style Lightbox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

41. Creating a filterable portfolio with jquery

In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

42. Building a jquery powered tag cloud

Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well.

43. Jquery Hover Subtag Cloud

Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce “Hover Sub Tags” under each main Tag.

44. Fading Menu – Replacing Content

The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is.

45. Create a photo admin site using php & jquery

I’m pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery, and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover

46. Create an amazon.com books widget with jquery and xml

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

47. jQuery Style Switcher

In this tutorial I will be showing you how to create a style switcher using jQuery and PHP.

48. Build a top panel login with jquery

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.

49. Adding form validation to wordpress comments using jquery

In this tutorial I’ll show you how to use jQuery to do some instant checking on an example comment form.

50. Improved Current Field Highlighting in forms

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.

51. Developing a Jquery Plugin

First of all, you might ask yourself why you’d want to develop a plugin. The first and best reason is the ability to maintain chainability.

52. Build a better tooltip with jquery awesomeness

In this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

53. Crafting an animated postcard with Jquery

In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere.

54. 60. How to build an animated header in jquery

We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.

There are lots of stuff available on web about jQuery but from where to begin? is the question. Here i have collected 25 excellent jQuery tutorials for designers to start.

1. jQuery Essentials Presentation at MinneWebCon (102 pages)

2. jQuery for Absolute Beginners: The Complete Series

3. 7 reasons why you really should learn jQuery

4. jQuery Crash Course

5. jQuery Tutorials for Designers

6. Creating a “Filterable” Portfolio with jQuery

7. Jquery Easy Tips And Tricks Tutorial

8. Building a jQuery-Powered Tag-Cloud

9. Useful and Handy jQuery Tips and Tricks

10. jquery Hover Sub Tag Cloud

11. Create a Cool Animated Navigation with CSS and jQuery

12. Jquery Fade In Fade Out

13. Creating a Dynamic Poll with jQuery and PHP

14. Simple Toggle with CSS & jQuery

15. Fading Menu – Replacing Content

16. A fancy Apple.com-style search suggestion

17. Create a Photo Admin Site Using PHP and jQuery

18. How to Load In and Animate Content with jQuery

19. How to create Skype-like buttons using jQuery

20. Create an Amazon Books Widget with jQuery and XML

21. jQuery Horizontal Tooltips Menu Tutorials

22. Create an apple style menu and improve it via jQuery

23. Simple JQuery Image Slide Show with Semi-Transparent Caption

24. Simple Lava Lamp Menu Tutorial with jQuery

25. AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL