Web Icons Shapes

Photoshop Shapes | .csh | 60 Shape

 

http://www.mediafire.com/download.php?fndgiyvjn0m

20 Simple jQuery Tricks

Written by Joshua Johnson, On 28th October 2009.
Filed in JavaScript.

RSS (5,939 Readers) Twitter (1,934 Followers)

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

Here are 20 simple jQuery tricks to get you on your way to JavaScript bliss. The keyword here is “simple” so even if you’ve never used jQuery before, this is the perfect place to start!

Beginner Tutorials

Just to get you started off right, here are the beginner tutorials straight from jQuery.com.

#1 – jQuery Rounded Corners

A short post from “15 Days of jQuery” on using the wrap, prepend, and append functions to create a rounded corner effect.

#2 – Image Cross Fade Transition

3 Simple methods of cross fading one image into another using jQuery and CSS.

#3 – Fading Menu – Replacing Content

Chris Coyier provides some of the best free content out there for learning web design. Here’s one of many jQuery tutorials on his site.

#4 – Sexy Drop Down Menu w/ jQuery & CSS

Learn to create a slick, animated UI for your site with this step by step tutorial.

#5 – Tabbed Content Area using CSS & jQuery

An oldie but goodie, this was one of the first tutorials ever posted on NetTuts. This is where I first learned about jQuery!

#6 – jQuery Twitter Ticker

Learn how to use both the Twitter API and jQuery to create a great looking Twitter ticker.

#7 – Vertically Scrolling Menu

This article shows you how to create a really smooth, vertically scrolling menu. A great tutorial despite the fact that the author seemed to think it was a horizontally scrolling menu!

#8 – Easy Display Switch with CSS and jQuery

Mimic Abduzeedo’s new site and to create a switch for changing your content from list view to grid view.

#9 – Simple Toggle with CSS & jQuery

A great beginner’s tutorial describing how to use the toggle feature.

#10 – WordPress & jQuery Contact Form without a Plugin

A well written, in-depth look at creating a WordPress form without the need of an additional plugin.

#11 – jQuery Sequential List

Use jQuery to take the monotony out of coding sequential items.

#12 – Create a Fancy Share Box

Having social media share links on your site has quickly become a standard for most blogs. Use this tutorial to make yours standout.

#13 – Create a Slick and Accessible Slideshow Using jQuery

Use this stunning content slider to put a ton of content in a small space.

#14 – Using jQuery for Background Image Animations

Create eye-catching background animations with only a few lines of code.

#15 – Animated Menus Using jQuery

Similar in concept to #14 but with a subtler, more sophisticated effect.

#16 – “Outside the Box” Navigation with jQuery

An amazing technique for creating website navigation that mimics the OS X dock.

#17 – How to implement a news ticker with jQuery and ten lines of code

A quick and easy news ticker from Antonio Lupetti.

#18 – Create a Stunning Popup with jQuery

This tutorial shows you how to create a popup window and fade out the background.

#19 – jQUery Feed Menus

Learn to create simple and effective RSS feed menus like those in Safari.

#20 – Create a Funky Parallax Background Effect

This tutorials walks you through creating an incredibly unique sliding 3D background effect.

That’s All Folks

That concludes our roundup of simple jQuery tricks. Now go and use these techniques to create some amazing effects on your site. Leave a comment using the field below to share your favorite jQuery tricks and tutorials.

More jQuery -- Oh Yea!

HTML5: The Basics (1 of 4)

Written by Joshua Johnson, On 19th October 2009.
Filed in HTML, Web Standards.

RSS (5,883 Readers) Twitter (1,791 Followers)

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

APIs

Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:

2D drawing API which can be used with the new canvas element.

API for playing of video and audio which can be used with the new video and audio elements.

An API that enables offline Web applications.

An API that allows a Web application to register itself for certain protocols or media types.

Editing API in combination with a new global contenteditable attribute.

Drag & drop API in combination with a draggable attribute.

API that exposes the history and allows pages to add to it to prevent breaking the back button.

Cross-document messaging.

As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

New Elements in HTML5

HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):

<article> Defines external content

<aside> Defines some content aside from the article it is placed in

<audio> Defines sound, such as music or other audio streams

<canvas> Defines graphic, such as graphs or other images

<command> Defines a command button, like a radiobutton, a checkbox, or a button

<datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list

<datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value

<datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements

<details> Defines details of an element, which the user can see, and click to hide

<dialog> Defines a dialog, such as a conversation

<embed> Defines embedded content, such as a plug-in

<event-source> Defines a source for events sent by a server

<figure> Used to group some elements

<footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information

<header> Defines the header of a section or document

<mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text

<meter> Defines a measurement. Used only for measurements with a known minimum and maximum value

<nav> Defines a section of  navigation links

<nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>

<output> Defines different types of output, such as output written by a script

<progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript

<rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>

<section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document

<source> Defines media resources for media elements, such as <video> and <audio>

<time> Defines a time or a date, or both

<video> Defines video, such as a movie clip or other video streams

Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.

Semantic Changes

This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>

Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.

Getting HTML5 Working Today

Don’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 right away. In article four, we’ll take a look at how you can start your HTML5 journey sooner rather than later.

Conclusion

This article briefly introduced the new elements and APIs included in HTML5. We talked about how you should be excited for the changes HTML5 will bring to the web apps of tomorrow. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today. Check back here frequently in the next week for an in-depth look into each of these topics!

By Henry Jones

10 Absolute Best Web Design Galleries

-->

You’ve probably realized by now that the internet is overflowing with web design galleries. So I thought I would take some time to share with you my list of the 10 best Web Design Galleries out there. Feel free to let us know what your favorite galleries are.

1. Best Web Gallery

I promise this one isn’t ranked #1 because of it’s name. I love the Best Web Gallery because it only showcases the best of the best css sites with the occasional very good flash site…just the way the internet should be. The posting schedule here is also very frequent and consistent.

2. The FWA

If you are looking for over-the-top Flash web design inspiration, you need not look any further than The FWA.

3. The Best Designs

The Best Designs is another terrific gallery that focuses on quality, frequent posts, and a good mixture of css and Flash.

4. CSS Remix

Although I’ve been disappointed with the frequency of new sites added to CSS Remix lately, you can’t deny the quality of sites featured here. I also love it’s “get out of the way” design and user interface.

5. Pattern Tap

Pattern Tap gets the #5 spot for being original. Instead of only showcasing complete site designs, it focuses on individual aspects of user interface design such as nav bars, footers, headers, etc.

6. Styleboost

Styleboost was one of my favorite sites to visit back in the early 2000’s when Flash sites were all the rage. At some point it made the transition to a css gallery too, and has done a fine job of it. You can always find high quality design inspiration here.

7. CSS Elite

CSS Elite is a great place to find css design inspiration and has good navigation for browsing.

8. Site Inspire

I like Site Inspire because I can always find sites there that have not been featured on the other galleries.

9. CSS Mania

CSS Mania adds a lot of new sites every day, which is good, but occasionally a “no so good” design will find it’s way into the gallery.

10. Web Creme

Web Creme is a solid gallery with a consistent posting of quality css web designs.

Related Posts

Here's some other articles that you will definitely find useful.

A Showcase of Super Clean Web Designs

40 Super Sleek Fonts for Clean Web Design

Stunning Examples of Light On Dark Web Design

If you enjoyed this article, consider sharing it on one of the following social bookmarking site.

Digg   |   Stumble   |   Del.icio.us Subscribe to RSS