nddrylliog_pismo 0.7.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. data/.document +5 -0
  2. data/.gitignore +29 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE +23 -0
  5. data/NOTICE +4 -0
  6. data/README.markdown +131 -0
  7. data/Rakefile +72 -0
  8. data/bin/pismo +45 -0
  9. data/lib/pismo.rb +82 -0
  10. data/lib/pismo/document.rb +67 -0
  11. data/lib/pismo/external_attributes.rb +14 -0
  12. data/lib/pismo/internal_attributes.rb +316 -0
  13. data/lib/pismo/reader.rb +19 -0
  14. data/lib/pismo/reader/base.rb +259 -0
  15. data/lib/pismo/reader/cluster.rb +171 -0
  16. data/lib/pismo/reader/tree.rb +154 -0
  17. data/lib/pismo/stopwords.txt +1002 -0
  18. data/lib/pismo/version.rb +3 -0
  19. data/pismo.gemspec +30 -0
  20. data/test/corpus/bbcnews.html +2131 -0
  21. data/test/corpus/bbcnews2.html +1575 -0
  22. data/test/corpus/briancray.html +269 -0
  23. data/test/corpus/cant_read.html +426 -0
  24. data/test/corpus/factor.html +1362 -0
  25. data/test/corpus/gmane.html +138 -0
  26. data/test/corpus/huffington.html +2932 -0
  27. data/test/corpus/metadata_expected.yaml +72 -0
  28. data/test/corpus/metadata_expected.yaml.old +122 -0
  29. data/test/corpus/queness.html +919 -0
  30. data/test/corpus/reader_expected.yaml +39 -0
  31. data/test/corpus/readers/cluster_expected.yaml +45 -0
  32. data/test/corpus/readers/tree_expected.yaml +55 -0
  33. data/test/corpus/rubyinside.html +318 -0
  34. data/test/corpus/rww.html +1351 -0
  35. data/test/corpus/spolsky.html +298 -0
  36. data/test/corpus/techcrunch.html +1285 -0
  37. data/test/corpus/tweet.html +360 -0
  38. data/test/corpus/youtube.html +2348 -0
  39. data/test/corpus/zefrank.html +535 -0
  40. data/test/helper.rb +15 -0
  41. data/test/test_corpus.rb +54 -0
  42. data/test/test_pismo_document.rb +34 -0
  43. metadata +156 -0
data/test/corpus/metadata_expected.yaml ADDED
@@ -0,0 +1,72 @@
1
+ ---
2
+ :rww:
3
+ :title: "Cartoon: Apple Tablet: Now With Barometer and Bird Call Generator"
4
+ :feed: http://www.readwriteweb.com/rss.xml
5
+ :lede: I'm just aching to know if the new Apple tablet (insert caveats, weasel words and qualifiers here) is a potential Cintiq competitor. I don't think it will be, but you never know. It may also have a built in barometer and bird call generator. I'm never sure if Apple does themselves more good than harm with the secrecy and anticipation that surrounds the run-up to these announcements.
6
+ :feeds:
7
+ - http://www.readwriteweb.com/rss.xml
8
+ - http://www.readwriteweb.com/archives/2010/01/cartoon_apple_tablet_now_with_barometer_and_bird_c.xml
9
+ :briancray:
10
+ :title: 5 great examples of popular blog posts that you should know
11
+ :feed: http://feeds.feedburner.com/briancray/blog
12
+ :lede: "This is a mock post."
13
+ :huffington:
14
+ :title: Afghans Losing Hope After 8 Years Of War
15
+ :author: TODD PITMAN
16
+ :authors:
17
+ - TODD PITMAN
18
+ - AP
19
+ :feed: http://feeds.huffingtonpost.com/huffingtonpost/raw_feed
20
+ :lede: "KABUL - The man on the motorcycle was going the wrong way down a one-way street, gesturing indignantly for the phalanx of traffic-clogged cars in front of him to move."
21
+ :bbcnews:
22
+ :title: Gay Muslims made homeless by family violence
23
+ :titles:
24
+ - Gay Muslims made homeless by family violence
25
+ - BBC News - Gay Muslims made homeless by family violence
26
+ :author: Poonam Taneja
27
+ :authors:
28
+ - Poonam Taneja
29
+ :description: A charity is dealing with more gay Muslims made homeless after fleeing forced marriages and so-called "honour" violence.
30
+ :lede: A UK charity is dealing with an increasing number of young gay Muslims becoming homeless after fleeing forced marriages and so-called honour violence.
31
+ :feed: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/england/rss.xml
32
+ :factor:
33
+ :title: Factor's bootstrap process explained
34
+ :lede: "Separation of concerns between Factor VM and library codeThe Factor VM implements an abstract machine consisting of a data heap of objects, a code heap of machine code blocks, and a set of stacks. The VM loads an image file on startup, which becomes the data and code heap. It then begins executing code in the image, by calling a special startup quotation.When new source files are loaded into a running Factor instance by the developer, they are parsed and compiled into a collection of objects -- words, quotations, and other literals, along with executable machine code."
35
+ :ledes:
36
+ - "Separation of concerns between Factor VM and library codeThe Factor VM implements an abstract machine consisting of a data heap of objects, a code heap of machine code blocks, and a set of stacks. The VM loads an image file on startup, which becomes the data and code heap. It then begins executing code in the image, by calling a special startup quotation.When new source files are loaded into a running Factor instance by the developer, they are parsed and compiled into a collection of objects -- words, quotations, and other literals, along with executable machine code."
37
+ :youtube:
38
+ :title: YMO - Rydeen (Official Video)
39
+ :author: ymo1965
40
+ :authors:
41
+ - ymo1965
42
+ :spolsky:
43
+ :title: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) - Joel on Software
44
+ :description: Haven't mastered the basics of Unicode and character sets? Please don't write another line of code until you've read this article.
45
+ :lede: "Ever wonder about that mysterious Content-Type tag? You know, the one you're supposed to put in HTML and you never quite know what it should be? Did you ever get an email from your friends in Bulgaria with the subject line \"???? "
46
+ :author: Joel Spolsky
47
+ :favicon: /favicon.ico
48
+ :feed: http://www.joelonsoftware.com/rss.xml
49
+ :techcrunch:
50
+ :title: Googlle Gets A Sexy New Logo; Remains Sketchy
51
+ :author: MG Siegler
52
+ :rubyinside:
53
+ :title: "CoffeeScript: A New Language With A Pure Ruby Compiler"
54
+ :author: Peter Cooper
55
+ :lede: CoffeeScript (GitHub repo) is a new programming language with a pure Ruby compiler.
56
+ :feed: http://www.rubyinside.com/feed/
57
+ :zefrank:
58
+ :sentences: If there's anyone who knows how to marshal an online audience, it's Ze Frank. Ze is best-known for his 2006 program "The Show," in which he made a new 2-3 minute video every day for 1 year. Topics ranged from "fingers in food" to the mysteries of airport signage to a tour de force summary of creatives' addiction to un-executed ideas, aka brain crack.
59
+ :title: "Ze Frank on Imaginary Audiences :: Articles :: The 99 Percent"
60
+ :description: We chat with the Internet's most notorious mass-collaboration instigator Ze Frank about idea execution and how to build armies of sportsracers.
61
+ :tweet:
62
+ :lede: Gobsmacked that TeX/LaTeX (document formatting tools) for OS X is a 1.3GB (yes, GIGAbytes) download OS X.
63
+ :sentences: Gobsmacked that TeX/LaTeX (document formatting tools) for OS X is a 1.3GB (yes, GIGAbytes) download OS Wow..!
64
+ :cant_read:
65
+ :sentences: "For those of us who grew up as weird kids in the 1980s, the work of Berkeley Breathed was as important as those twin eternal pillars of weird-kid-dom: Monty Python and Mad magazine. In a word: seminal. In two words: fucking seminal."
66
+ :gmane:
67
+ :sentences: I am pleased to report that the GCC Steering Committee and the FSF have approved the use of C++ in GCC itself. Of course, there's no reason for us to use C++ features just because we can. The goal is a better compiler for users, not a C++ code base for its own sake.
68
+ :queness:
69
+ :title: 18 Incredible CSS3 Effects You Have Never Seen Before
70
+ :lede: "CSS3 is hot these days and will soon be available in most modern browser. Just recently, I started to become aware to the present of CSS3 around the web. I can see some of the websites such as twitter and designer portfolios websites are using it. Also, I have started to implement it to my own project as well and I really love it!"
71
+ :sentences: CSS3 is hot these days and will soon be available in most modern browser. Just recently, I started to become aware to the present of CSS3 around the web. I can see some of the websites such as twitter and designer portfolios websites are using it.
72
+ :datetime: 2010-06-02 12:00:00 +01:00
data/test/corpus/metadata_expected.yaml.old ADDED
@@ -0,0 +1,122 @@
1
+ ---
2
+ :rww:
3
+ :title: "Cartoon: Apple Tablet: Now With Barometer and Bird Call Generator"
4
+ :feed: http://www.readwriteweb.com/rss.xml
5
+ :briancray:
6
+ :title: 5 great examples of popular blog posts that you should know
7
+ :feed: http://feeds.feedburner.com/briancray/blog
8
+ :lede: "This is a mock post. While there is a place for all of these posts, I'm trying to make a point that original blogs are being shut out by formulaic blogs."
9
+ :huffington:
10
+ :title: Afghans Losing Hope After 8 Years Of War
11
+ :author: TODD PITMAN
12
+ :feed: http://feeds.huffingtonpost.com/huffingtonpost/raw_feed
13
+ :lede: "KABUL - The man on the motorcycle was going the wrong way down a one-way street, gesturing indignantly for the phalanx of traffic-clogged cars in front of him to move."
14
+ :bbcnews:
15
+ :title: Gay Muslims made homeless by family violence
16
+ :author: Poonam Taneja
17
+ :description: A charity is dealing with more gay Muslims made homeless after fleeing forced marriages and so-called "honour" violence.
18
+ :lede: A UK charity is dealing with an increasing number of young gay Muslims becoming homeless after fleeing forced marriages and so-called honour violence.
19
+ :feed: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/england/rss.xml
20
+ :factor:
21
+ :title: Factor's bootstrap process explained
22
+ :lede: "Separation of concerns between Factor VM and library codeThe Factor VM implements an abstract machine consisting of a data heap of objects, a code heap of machine code blocks, and a set of stacks. The VM loads an image file on startup, which becomes the data and code heap. "
23
+ :youtube:
24
+ :title: YMO - Rydeen (Official Video)
25
+ :author: ymo1965
26
+ :spolsky:
27
+ :title: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
28
+ :description: Haven't mastered the basics of Unicode and character sets? Please don't write another line of code until you've read this article.
29
+ :author: Joel Spolsky
30
+ :favicon: /favicon.ico
31
+ :feed: http://www.joelonsoftware.com/rss.xml
32
+ :techcrunch:
33
+ :title: Googlle Gets A Sexy New Logo; Remains Sketchy
34
+ :author: MG Siegler
35
+ :keywords:
36
+ - - googlle
37
+ - 35
38
+ - - logo
39
+ - 10
40
+ - - google
41
+ - 6
42
+ - - site
43
+ - 3
44
+ - - font
45
+ - 2
46
+ - - india
47
+ - 2
48
+ - - surprised
49
+ - 1
50
+ - - week
51
+ - 1
52
+ - - switched
53
+ - 1
54
+ - - school
55
+ - 1
56
+ - - things
57
+ - 1
58
+ - - removing
59
+ - 1
60
+ - - steve
61
+ - 1
62
+ - - decided
63
+ - 1
64
+ - - advantage
65
+ - 1
66
+ - - wasn
67
+ - 1
68
+ - - accepting
69
+ - 1
70
+ - - red
71
+ - 1
72
+ - - copy
73
+ - 1
74
+ - - wouldn
75
+ - 1
76
+ :rubyinside:
77
+ :title: "CoffeeScript: A New Language With A Pure Ruby Compiler"
78
+ :author: Peter Cooper
79
+ :lede: CoffeeScript (GitHub repo) is a new programming language with a pure Ruby compiler. Creator Jeremy Ashkenas calls it "JavaScript's less ostentatious kid brother" - mostly because it compiles into JavaScript and shares most of the same constructs, but with a different, tighter syntax.
80
+ :body: "CoffeeScript (GitHub repo) is a new programming language with a pure Ruby compiler. Creator Jeremy Ashkenas calls it \"JavaScript's less ostentatious kid brother\" - mostly because it compiles into JavaScript and shares most of the same constructs, but with a different, tighter syntax.\nTo get a feel for the language, check out this example code (CoffeeScript on the left, resulting JavaScript on the right):\nAs a Ruby project, you can get the CoffeeScript compiler installed with a simple gem install coffee-script or check out the code from/on GitHub. The code is worth a look as it's notably quite vanilla with hand crafted Ruby covering the lexer and code generation and Racc built code for the parser.\n"
81
+ :feed: http://www.rubyinside.com/feed/
82
+ :keywords:
83
+ - - ruby
84
+ - 15
85
+ - - coffeescript
86
+ - 15
87
+ - - compiler
88
+ - 10
89
+ - - language
90
+ - 10
91
+ - - coffee
92
+ - 5
93
+ - - pure
94
+ - 5
95
+ - - code
96
+ - 5
97
+ - - script
98
+ - 5
99
+ - - javascript
100
+ - 3
101
+ - - github
102
+ - 2
103
+ - - syntax
104
+ - 1
105
+ - - programming
106
+ - 1
107
+ - - brother
108
+ - 1
109
+ - - constructs
110
+ - 1
111
+ - - vanilla
112
+ - 1
113
+ - - parser
114
+ - 1
115
+ - - lexer
116
+ - 1
117
+ - - project
118
+ - 1
119
+ - - installed
120
+ - 1
121
+ - - simple
122
+ - 1
data/test/corpus/queness.html ADDED
@@ -0,0 +1,919 @@
1
+
2
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
+
4
+ <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
5
+ <head>
6
+ <meta name="robots" content="index, follow" />
7
+ <meta name="blogcatalog" content="9BC9209204" />
8
+ <meta name="verify-v1" content="zd6x3bZDR/VMSaiIzWKLJJXcYLeCrxuaNOhkvJgKwM8=" />
9
+ <meta name="description" content="I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It&#039;s incredible! I could never imagine to make animation using CSS few years ago. So, in this post, I will show you my findings of 18 Incredible CSS3 Effects that will blow you away!" />
10
+ <meta name="keywords" content="queness,kevin liew,css-html, inspiration, javascript, trend" />
11
+ <link rel="shortcut icon" href="http://www.queness.com/favicon.ico"/>
12
+ <link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="http://feeds2.feedburner.com/queness" />
13
+ <title>18 Incredible CSS3 Effects You Have Never Seen Before</title>
14
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
15
+ <script type="text/javascript" src="http://www.queness.com/js/jquery-1.3.1.min.js"></script>
16
+ <script type="text/javascript" src="http://www.queness.com/js/jquery.scrollTo-min.js"></script>
17
+ <script type="text/javascript" src="http://www.queness.com/js/tooltips.js"></script>
18
+ <script type="text/javascript" src="http://www.queness.com/js/global.js"></script>
19
+ <script type="text/javascript" src="http://www.queness.com/js/facebox.js"></script>
20
+ <!--<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>-->
21
+ <script type="text/javascript" src="http://www.queness.com/js/component.js"></script>
22
+ <link type="text/css" rel="stylesheet" href="http://www.queness.com/css/SyntaxHighlighter.css"/>
23
+ <script type="text/javascript">
24
+
25
+ $('#diw-468').click(function () {
26
+
27
+ var data = 'id=' + $(this).attr('id');
28
+
29
+ $.ajax({
30
+
31
+ url: "http://www.queness.com/track.php",
32
+ type: "GET",
33
+ data: data,
34
+ cache: false,
35
+ success: function (html) {
36
+
37
+ }
38
+ });
39
+ });
40
+
41
+ </script>
42
+ <link rel="stylesheet" type="text/css" href="http://www.queness.com/css/facebox.css" media="screen" />
43
+ <link rel="stylesheet" type="text/css" href="http://www.queness.com/css/tooltips.css"/>
44
+ <link rel="stylesheet" type="text/css" href="http://www.queness.com/css/style.css?1276634862"/>
45
+ <!--[if lte IE 7]>
46
+ <link rel="stylesheet" type="text/css" href="http://www.queness.com/css/style_ie.css"/>
47
+ <![endif]-->
48
+ </head>
49
+ <body>
50
+
51
+
52
+ <script type="text/javascript">
53
+
54
+ var _gaq = _gaq || [];
55
+ _gaq.push(['_setAccount', 'UA-7781887-1']);
56
+ _gaq.push(['_trackPageview']);
57
+
58
+ (function() {
59
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
60
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
61
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
62
+ })();
63
+
64
+ </script>
65
+
66
+
67
+ <div class="topSection">
68
+ <div class="header">
69
+ <div class="logo"><a href="http://www.queness.com/" title="Queness - all about trend, inspiration, web design and development"><img src="http://www.queness.com/images/queness.gif" width="202" height="51" alt="Queness - all about trend, inspiration, web design and development"/></a></div>
70
+ <div class="navi">
71
+ <ul class="menu">
72
+ <li class="menuHome"><a href="http://www.queness.com/" title="Queness Home">Home</a></li>
73
+ <li class="menuNews"><a href="http://www.queness.com/view-all" title="View all community news">News</a></li>
74
+ <li class="menuContact"><a href="http://www.queness.com/contact" title="Contact">Contact</a></li>
75
+ <li class="last">
76
+ <div class="search">
77
+ <form method="post" action="http://www.queness.com/search">
78
+ <div class="input"><input type="text" value="Search..." id="search" name="search"/></div>
79
+ <div class="button"><input type="submit" value="Search"/></div>
80
+ </form>
81
+ </div>
82
+ <div class="clear"></div>
83
+ </li>
84
+ </ul>
85
+ <div class="clear"></div>
86
+ </div>
87
+ <div class="tweeter"></div>
88
+
89
+
90
+ <div class="clear"></div>
91
+ </div><!--header-->
92
+ </div><!--topsection-->
93
+
94
+ <div class="bottomSection">
95
+ <div class="container">
96
+
97
+ <div class="body">
98
+
99
+
100
+
101
+ <div class="bodyLeft">
102
+
103
+
104
+
105
+
106
+ <div class="logon"><a href="http://www.queness.com/register">Register now</a> or <a href="#login" rel="facebox">login here</a> to start promoting your blog and your favourite articles.</div>
107
+
108
+
109
+
110
+
111
+
112
+
113
+ <div class="postPage">
114
+
115
+
116
+
117
+ <div class="banner-sm">
118
+ <script type="text/javascript">
119
+ Vertical1241594 = false;
120
+ ShowAdHereBanner1241594 = true;
121
+ RepeatAll1241594 = false;
122
+ NoFollowAll1241594 = false;
123
+ BannerStyles1241594 = new Array(
124
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
125
+ "img{border:0;clear:right;}",
126
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
127
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
128
+ );
129
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1241594/1241594.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
130
+ </script>
131
+
132
+ </div>
133
+
134
+ <div class="banner">
135
+
136
+
137
+
138
+ <script type="text/javascript">
139
+ Vertical1240338 = false;
140
+ ShowAdHereBanner1240338 = false;
141
+ RepeatAll1240338 = false;
142
+ NoFollowAll1240338 = false;
143
+ BannerStyles1240338 = new Array(
144
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
145
+ "img{border:0;clear:right;}",
146
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
147
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
148
+ );
149
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1240338/1240338.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
150
+ </script>
151
+
152
+
153
+
154
+
155
+ </div>
156
+
157
+ <div class="clear"></div>
158
+
159
+
160
+ <div class="postLeft">
161
+ <div class="images"><a href="http://www.queness.com/post/2025/18-incredible-css3-effects-you-have-never-seen-before"><img src="http://www.queness.com/resources/images/2025.gif" width="190" height="120" alt="18 Incredible CSS3 Effects You Have Never Seen Before"/></a>
162
+
163
+ <div class="trans"></div>
164
+ <div class="details">
165
+ 17 Feb 2010 - <a href="http://www.queness.com/post/2025/18-incredible-css3-effects-you-have-never-seen-before#comment">
166
+ 11 Comments</a>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="postRight">
172
+ <div class="title"><a href="http://www.queness.com/post/2025/18-incredible-css3-effects-you-have-never-seen-before">18 Incredible CSS3 Effects You Have Never Seen Before</a></div>
173
+ <div class="desc"> I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It&#039;s incredible! I could never imagine to make animation using CSS few years ago. So, in this post, I will show you my findings of 18 Incredible CSS3 Effects that will blow you away!</div>
174
+ <div class="control">
175
+ <strong>Author:</strong> <a href="http://www.queness.com/member/kevin">kevin</a> |
176
+ <strong>Source:</strong> queness <div class="tag leftMargin"><a href="http://www.queness.com/tag/css-html">css-html</a>, <a href="http://www.queness.com/tag/inspiration">inspiration</a>, <a href="http://www.queness.com/tag/javascript">javascript</a>, <a href="http://www.queness.com/tag/trend">trend</a></div>
177
+ </div>
178
+ </div><!--postRight-->
179
+ <div class="clear"></div>
180
+
181
+
182
+
183
+ <div class="clear"></div>
184
+ <div class="article">
185
+
186
+ <!-- start of article -->
187
+
188
+
189
+ <h2>Introduction</h2>
190
+ <p>CSS3 is hot these days and will soon be available in most modern browser. Just recently, I started to become aware to the present of CSS3 around the web. I can see some of the websites such as twitter and designer portfolios websites are using it. Also, I have started to implement it to my own project as well and I really love it! However, it will take a while to ditch CSS2 though.</p>
191
+
192
+ <p>I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It's incredible! I could never imagine to make animation using CSS few years ago. So, in this post, I will show you my findings of 18 Incredible CSS3 Effects that will blow you away!</p>
193
+
194
+ <p>Just make sure you view the following example with the latest version of Safari. Chrome and Firefox might not able to load some of those properly especially those involved animation. If you don't have safari, grab one, it worth it! <a href="http://www.apple.com/safari/" rel="external">Click here to jump to Apple Safari Homepage</a></p>
195
+ <ul id="simplelist">
196
+
197
+ <li>
198
+ <a href="http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/" rel="external">11 classic CSS Techniques Made Simple with CSS3 </a> | <a href="http://nettuts.s3.cdn.plus.org/430_cssTips/demo/index.html" rel="external">Demo</a> <br/>
199
+ <img src="http://www.queness.com/resources/images/css3-2/11-classic-css-techniques-made-simple-with-css31.jpg" width="400" height="200" /><br/>
200
+ <span>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. This new age includes the use of CSS3. In today's tutorial, it will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.</span>
201
+ </li>
202
+
203
+ <li>
204
+ <a href="http://www.css3.info/a-mock-up-interface-using-css3-colour/" rel="external">Mock-Up Interface Using CSS3 Colour</a> | <a href="http://www.css3.info/wp-content/uploads/2007/08/colormoduletest.html" rel="external">Demo</a> <br/>
205
+ <img src="http://www.queness.com/resources/images/css3-2/A mock-up interface using CSS3 Colour.jpg" width="400" height="200" /><br/>
206
+ <span>Here is the example for us to try out (warning large background image). It is based on a loose mock-up of a Mac OS X Leopard style interface.</span>
207
+ </li>
208
+
209
+ <li>
210
+ <a href="http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/" rel="external" rel="external">Awesome CSS3 Lightbox Gallery </a>- <a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php" rel="external">Demo</a> <br/>
211
+ <img src="http://www.queness.com/resources/images/css3-2/Awesome CSS3 Lightbox Gallery.jpg" width="400" height="200" /><br/>
212
+ <span>In this tutorial tutorialzine is going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.</span>
213
+ </li>
214
+
215
+ <li>
216
+ <a href="http://www.zurb.com/playground" rel="external">Awesome Overlays</a> | <a href="http://www.zurb.com/playground/awesome-overlays" rel="external">Demo</a> <br/>
217
+ <img src="http://www.queness.com/resources/images/css3-2/awesome-overlays.jpg" width="400" height="200" /><br/>
218
+ <span>An example of using border-image and other new properties to make killer image overlays in Notable.</span>
219
+ </li>
220
+
221
+ <li>
222
+ <a href="http://paulbakaus.com/2008/05/31/coverflow-anyone/" rel="external">Coverflow Anyone</a> | <a href="http://paulbakaus.com/lab/js/coverflow/" rel="external">Demo </a><br/>
223
+ <img src="http://www.queness.com/resources/images/css3-2/coverflow-anyone.jpg" width="400" height="200" /><br/>
224
+ <span>it uses jQuery UI to create a actual coverflow widget, and jQuery UI's slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.</span>
225
+ </li>
226
+
227
+ <li>
228
+ <a href="http://www.zenelements.com/blog/css3-embed-font-face/" rel="external" rel="external">CSS3 Embed Font Face</a> | <a href="http://www.zenelements.com/blog/css3-embed-font-face/" rel="external">Demo</a> <br/>
229
+ <img src="http://www.queness.com/resources/images/css3-2/css3-embed-font-face.jpg" width="400" height="200" /><br/>
230
+ <span></span>
231
+ </li>
232
+
233
+ <li>
234
+ <a href="http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi" rel="external" rel="external"><a href="http://www.zurb.com/playground/css3-polaroids" rel="external">CSS3 Polaroids</a> | <a href="http://www.zurb.com/playground/css3-polaroids" rel="external">Demo</a> <br/>
235
+ <img src="http://www.queness.com/resources/images/css3-2/css3-polaroids.jpg" width="400" height="200" /><br/>
236
+ <span>In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures. Check out the demo and code snippets below.</span>
237
+ </li>
238
+
239
+ <li>
240
+ <a href="http://webdemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/" rel="external">CSS3 Text Shadow</a> | <a href="http://webdemar.com/wp-content/uploads/2009/09/text-shadow-ie.jpg" rel="external">Demo</a> <br/>
241
+ <img src="http://www.queness.com/resources/images/css3-2/css-eigenschaft-text-shadow.jpg" width="400" height="200" /><br/>
242
+ <span>In this post, you will able to learn how to create letterpress, emboss and glowing effect with CSS3 just with 2-3 lines of CSS code! Awesome!</span>
243
+ </li>
244
+
245
+ <li>
246
+ <a href="http://www.zurb.com/playground/drop-in-modals" rel="external">Drop in Modals</a> | <a href="http://www.zurb.com/playground/drop-in-modals" rel="external">Demo</a> <br/>
247
+ <img src="http://www.queness.com/resources/images/css3-2/drop-in-modals.jpg" width="400" height="200" /><br/>
248
+ <span>For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.</span>
249
+ </li>
250
+
251
+ <li>
252
+ <a href="http://girliemac.com/blog/2009/05/03/matrix-animation-with-webkit-css3/" rel="external" rel="external">Matrix Animation with Webkit CSS3</a> | <a href="http://girliemac.com/sandbox/matrix.html" rel="external">Demo</a></span> <br/>
253
+ <img src="http://www.queness.com/resources/images/css3-2/matrix-animation-with-webkit-css3.jpg" width="400" height="200" /><br/>
254
+ <span>This one is pretty cool. If you are a fan of Matrix, check out this example.</span>
255
+ </li>
256
+
257
+ <li>
258
+ <a href="http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html" rel="external" rel="external">Polaroid Photo Viewer with CSS3 and jQuery</a> | <a href="http://demo.marcofolio.net/polaroid_photo_viewer/" rel="external">Demo</a><br/>
259
+ <img src="http://www.queness.com/resources/images/css3-2/polaroid photo viewer with CSS3 and jQuery.jpg" width="400" height="200" /><br/>
260
+ <span>A pretty incredible and well designed polaroid implemetation! By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).</span>
261
+ </li>
262
+
263
+ <li>
264
+ <a href="http://webkit.org/blog-files/3d-transforms/poster-circle.html" rel="external">Poster Circle</a> | <a href="http://webkit.org/blog-files/3d-transforms/poster-circle.html" rel="external">Demo </a><br/>
265
+ <img src="http://www.queness.com/resources/images/css3-2/poster-circle.jpg" width="400" height="200" /><br/>
266
+ <span>This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</span>
267
+ </li>
268
+
269
+ <li>
270
+ <a href="http://www.zurb.com/playground/radioactive-buttons" rel="external">Radioactive Buttons</a> | <a href="http://www.zurb.com/playground/radioactive-buttons" rel="external">Demo</a> <br/>
271
+ <img src="http://www.queness.com/resources/images/css3-2/radioactive-buttons.jpg" width="400" height="200" /><br/>
272
+ <span>Create killer button focus effects using some very simple RGBa colors and -webkit-animations.</span>
273
+ </li>
274
+
275
+ <li>
276
+ <a href="http://www.zurb.com/playground/sliding-vinyl" rel="external" rel="external">Sliding Vinyl</a> - <a href="http://www.zurb.com/playground/sliding-vinyl" rel="external">Demo </a><br/>
277
+ <img src="http://www.queness.com/resources/images/css3-2/Sliding Vinyl.jpg" width="400" height="200" /><br/>
278
+ <span>We take an image of an album cover, some basic HTML, and a little fancy CSS3 that, on hover, slides out the pure-CSS vinyl record behind it.</span>
279
+ </li>
280
+
281
+ <li>
282
+ <a href="http://natbat.net/code/clientside/css/snowflakes/" rel="external" rel="external">Snowflakes</a> | <a href="http://natbat.net/code/clientside/css/snowflakes/" rel="external">Demo </a><br/>
283
+ <img src="http://www.queness.com/resources/images/css3-2/snowflakes.jpg" alt=" " width="400" height="200" /><br/>
284
+ <span>I still remember old days, looking for javascript snippet to make snowflake effect on my own personal website. And guess what, you don't even need javascript now. It's all CSS! One thing though, not all the browsers are supporting it.</span>
285
+ </li>
286
+
287
+ <li>
288
+ <a href="http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html" rel="external">Super Slick jQuery Menu with CSS - </a><a href="http://demo.marcofolio.net/slick_jquery_css3_menu/default.html" rel="external">Demo</a><br/>
289
+ <img src="http://www.queness.com/resources/images/css3-2/Super slick jQuery menu with CSS3.jpg" width="400" height="200" /><br/>
290
+ <span>The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.</span>
291
+ </li>
292
+
293
+ <li>
294
+ <a href="http://www.zurb.com/playground/super-awesome-buttons" rel="external" rel="external">Super Awesome Buttons</a> | <a href="http://www.zurb.com/playground/super-awesome-buttons" rel="external">Demo</a><br/>
295
+ <img src="http://www.queness.com/resources/images/css3-2/super-awesome-buttons.jpg" width="400" height="200" /><br/>
296
+ <span>Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.</span>
297
+ </li>
298
+
299
+ <li>
300
+ <a href="http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html" rel="external" rel="external">Text Shadow </a> | <a href="http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html" rel="external">Demo</a><br/>
301
+ <img src="http://www.queness.com/resources/images/css3-2/text-shadow.jpg" width="400" height="200" /><br/>
302
+ <span>I guess this is the one that impress me a lot! It really looks like a flash implementation for me. Incredible? I give it 5 stars rating!</span>
303
+ </li>
304
+
305
+ </ul>
306
+
307
+
308
+ <!-- end of article -->
309
+
310
+ <div class="leaderboard" style="width:600px; height:100px">
311
+ <script type="text/javascript">
312
+ Vertical1243466 = false;
313
+ ShowAdHereBanner1243466 = true;
314
+ RepeatAll1243466 = false;
315
+ NoFollowAll1243466 = false;
316
+ BannerStyles1243466 = new Array(
317
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
318
+ "img{border:0;clear:right;}",
319
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
320
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
321
+ );
322
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1243466/1243466.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
323
+ </script>
324
+ </div>
325
+
326
+
327
+ <div class="usage">
328
+ <h2>Copyright &amp; Usage</h2>
329
+ <p>The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.</p>
330
+ </div>
331
+
332
+ </div>
333
+
334
+
335
+ <div class="bookmark">
336
+ <h2>Share This Post to Support Me! :)</h2>
337
+
338
+ <div class="socialIcon">
339
+ <a href="http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before&amp;title=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before" rel="external"><img src="http://www.queness.com/images/bookmark/delicious.gif" width="32" height="32" alt="Bookmark with delicious" title="Bookmark with delicious"/></a>
340
+ <a href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before&amp;title=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before" rel="external"><img src="http://www.queness.com/images/bookmark/digg.gif" width="32" height="32" alt="Bookmark with digg" title="Bookmark with digg"/></a>
341
+ <a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before%2F&amp;t=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before" rel="external"><img src="http://www.queness.com/images/bookmark/facebook.gif" width="32" height="32" alt="Bookmark with facebook" title="Bookmark with facebook"/></a>
342
+ <a href="http://www.furl.net/storeIt.jsp?t=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before&amp;u=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before" rel="external"><img src="http://www.queness.com/images/bookmark/furl.gif" width="32" height="32" alt="Bookmark with furl" title="Bookmark with furl"/></a>
343
+ <br><a href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before&amp;title=bookTitle" rel="external"><img src="http://www.queness.com/images/bookmark/google.gif" width="32" height="32" alt="Bookmark with google" title="Bookmark with google"/></a>
344
+ <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before&amp;title=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before" rel="external"><img src="http://www.queness.com/images/bookmark/stumbleupon.gif" width="32" height="32" alt="Bookmark with stumbleUpon" title="Bookmark with stumbleUpon"/></a>
345
+ <a href="http://technorati.com/faves?add=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before" rel="external"><img src="http://www.queness.com/images/bookmark/technorati.gif" width="32" height="32" alt="Bookmark with technorati" title="Bookmark with technorati"/></a>
346
+ <a href="http://myweb.yahoo.com/myresults/bookmarklet?t=18+Incredible+CSS3+Effects+You+Have+Never+Seen+Before&amp;u=http%3A%2F%2Fwww.queness.com%2Fpost%2F2025%2F18-incredible-css3-effects-you-have-never-seen-before&amp;ei=UTF" rel="external"><img src="http://www.queness.com/images/bookmark/yahoo.gif" width="32" height="32" alt="Bookmark with yahoo" title="Bookmark with yahoo"/></a>
347
+ </div>
348
+
349
+ <div class="socialIcon"><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> </div>
350
+ <div class="socialIcon"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>
351
+ <div class="socialIcon"><script type="text/javascript">var dzone_blurb = "I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It&#039;s incredible! I could never imagine to make animation using CSS few years ago. So, in this post, I will show you my findings of 18 Incredible CSS3 Effects that will blow you away!";</script></div>
352
+ <div class="socialIcon"><script type="text/javascript">var dzone_style = '1';</script></div>
353
+ <div class="socialIcon"><script type="text/javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script> </div>
354
+ <div class="socialIcon"><script src="http://static.delicious.com/js/blogbadge.js"></script></div>
355
+ <div class="clear"></div>
356
+
357
+ </div>
358
+
359
+ <br/>
360
+
361
+ <script type="text/javascript"><!--
362
+ google_ad_client = "pub-2490016011782126";
363
+ /* 468x60, created 7/28/09 */
364
+ google_ad_slot = "0076777246";
365
+ google_ad_width = 468;
366
+ google_ad_height = 60;
367
+ //-->
368
+ </script>
369
+ <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
370
+ </script>
371
+
372
+ <div class="related">
373
+ <h3>You might also want to read...</h3>
374
+ <div class="item">
375
+ <a href="http://www.queness.com/post/2746/10-fresh-and-useful-web-design-and-development-blogs">10 Fresh and Useful Web Design and Development Blogs</a>
376
+ <div class="tag"><a href="http://www.queness.com/tag/design">design</a>, <a href="http://www.queness.com/tag/inspiration">inspiration</a>, <a href="http://www.queness.com/tag/trend">trend</a></div>
377
+ </div>
378
+ <div class="clear"></div>
379
+ <div class="item">
380
+ <a href="http://www.queness.com/post/1946/10-brilliant-css3-and-jquery-examples">10 Brilliant CSS3 and jQuery Examples</a>
381
+ <div class="tag"><a href="http://www.queness.com/tag/css-html">css-html</a>, <a href="http://www.queness.com/tag/inspiration">inspiration</a>, <a href="http://www.queness.com/tag/javascript">javascript</a></div>
382
+ </div>
383
+ <div class="clear"></div>
384
+ <div class="item">
385
+ <a href="http://www.queness.com/post/633/30-javascript-image-and-photo-galleriesmootool-prototype-jquery-and-tutorials">30 Javascript Image and Photo Galleries - Mootool, Prototype, jQuery and Tutorials</a>
386
+ <div class="tag"><a href="http://www.queness.com/tag/inspiration">inspiration</a>, <a href="http://www.queness.com/tag/javascript">javascript</a>, <a href="http://www.queness.com/tag/tools">tools</a>, <a href="http://www.queness.com/tag/tutorial">tutorial</a></div>
387
+ </div>
388
+ <div class="clear"></div>
389
+ <div class="item">
390
+ <a href="http://www.queness.com/post/1431/15-off-on-all-service-packages-of-pixelcrayons">15% off On All Service Packages of PixelCrayons</a>
391
+ <div class="tag"><a href="http://www.queness.com/tag/css-html">css-html</a>, <a href="http://www.queness.com/tag/freebies">freebies</a></div>
392
+ </div>
393
+ <div class="clear"></div>
394
+ <div class="item">
395
+ <a href="http://www.queness.com/post/1138/10-javascriptcss-treeview-and-sitemap-plugins-and-tutorials">10 Javascript &amp; CSS TreeView and Sitemap Plugins and Tutorials</a>
396
+ <div class="tag"><a href="http://www.queness.com/tag/css-html">css-html</a>, <a href="http://www.queness.com/tag/javascript">javascript</a>, <a href="http://www.queness.com/tag/tutorial">tutorial</a></div>
397
+ </div>
398
+ <div class="clear"></div>
399
+ </div>
400
+
401
+
402
+ <div class="comment">
403
+ <a name="comment"></a>
404
+ <h3>Comments</h3>
405
+ <a name="comment4019"></a>
406
+ <div class="commentItem" id="comment-1">
407
+ <div class="userSection">
408
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=217160c9a3d6ea664771889f474448da&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
409
+ <div class="messageBox">
410
+ <div class="body"><strong>
411
+ <a href="http://www.alleycat.be" rel="external nofollow">Jo</a></strong> on 2 Jun 2010 says:<br/>
412
+ <div class="desc">
413
+ it's great, this shit will definitely help me revamp my site, cool man, never mind those trolls </div>
414
+ </div>
415
+ <div class="footer"></div>
416
+ </div>
417
+ </div>
418
+ <div class="clear"></div>
419
+ </div><!--userSection-->
420
+
421
+ <a name="comment3904"></a>
422
+ <div class="commentItem" id="comment-2">
423
+ <div class="userSection">
424
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=e4c1ca4600322a8eab58c74c3431f8ba&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
425
+ <div class="messageBox">
426
+ <div class="body"><strong>
427
+ <a href="http://webstandard.kulando.de" rel="external nofollow">Webstandard-Team</a></strong> on 25 May 2010 says:<br/>
428
+ <div class="desc">
429
+ Very nice collection of CSS3 stuff, but if you want some more, dont' miss &lt;a href=&quot;http://webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial&quot;&gt;Sliding Image Gallery&lt;/a&gt; based on CSS Transition (Step-by-Step Tutorial ). </div>
430
+ </div>
431
+ <div class="footer"></div>
432
+ </div>
433
+ </div>
434
+ <div class="clear"></div>
435
+ </div><!--userSection-->
436
+
437
+ <a name="comment2876"></a>
438
+ <div class="commentItem" id="comment-3">
439
+ <div class="userSection">
440
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=30e138995b6151381fe3b6c05046275c&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
441
+ <div class="messageBox">
442
+ <div class="body"><strong>
443
+ <a href="http://www.nbajs.com" rel="external nofollow">NBA Jerseys</a></strong> on 26 Feb 2010 says:<br/>
444
+ <div class="desc">
445
+ http://www.nbajs.com NBA Jerseys </div>
446
+ </div>
447
+ <div class="footer"></div>
448
+ </div>
449
+ </div>
450
+ <div class="clear"></div>
451
+ </div><!--userSection-->
452
+
453
+ <a name="comment2866"></a>
454
+ <div class="commentItem" id="comment-4">
455
+ <div class="userSection">
456
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=eb05201102235351fa75b6be6a7f5920&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
457
+ <div class="messageBox">
458
+ <div class="body"><strong>
459
+ <a href="http://2web-master.ru" rel="external nofollow">2web</a></strong> on 25 Feb 2010 says:<br/>
460
+ <div class="desc">
461
+ Cool. I like it. </div>
462
+ </div>
463
+ <div class="footer"></div>
464
+ </div>
465
+ </div>
466
+ <div class="clear"></div>
467
+ </div><!--userSection-->
468
+
469
+ <a name="comment2795"></a>
470
+ <div class="commentItem" id="comment-5">
471
+ <div class="userSection">
472
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=f53c0f3162b3a22bf667cfea9000a771&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
473
+ <div class="messageBox">
474
+ <div class="body"><strong>
475
+ <a href="http://7th-media.com" rel="external nofollow">neojohan</a></strong> on 17 Feb 2010 says:<br/>
476
+ <div class="desc">
477
+ Wow great work!!! </div>
478
+ </div>
479
+ <div class="footer"></div>
480
+ </div>
481
+ </div>
482
+ <div class="clear"></div>
483
+ </div><!--userSection-->
484
+
485
+ <a name="comment2787"></a>
486
+ <div class="commentItem" id="comment-6">
487
+ <div class="userSection">
488
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=cc5f3e98c02238e172abb6c468a31224&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
489
+ <div class="messageBox">
490
+ <div class="body"><strong>
491
+ <a href="http://www.pmedia.ir" rel="external nofollow">pouya saadeghi</a></strong> on 16 Feb 2010 says:<br/>
492
+ <div class="desc">
493
+ some were good <br />
494
+ <br />
495
+ tnx </div>
496
+ </div>
497
+ <div class="footer"></div>
498
+ </div>
499
+ </div>
500
+ <div class="clear"></div>
501
+ </div><!--userSection-->
502
+
503
+ <a name="comment2785"></a>
504
+ <div class="commentItem" id="comment-7">
505
+ <div class="userSection">
506
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=c2b6559480ae6ad3ab5e806522ddadf7&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
507
+ <div class="messageBox">
508
+ <div class="body"><strong>
509
+ janvanlysebettens</strong> on 16 Feb 2010 says:<br/>
510
+ <div class="desc">
511
+ that's strange.. I've seen ALL of those allready. With such a strong title you need to have the content to back it up... and you don't. </div>
512
+ </div>
513
+ <div class="footer"></div>
514
+ </div>
515
+ </div>
516
+ <div class="clear"></div>
517
+ </div><!--userSection-->
518
+
519
+ <a name="comment2784"></a>
520
+ <div class="commentItem" id="comment-8">
521
+ <div class="userSection">
522
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=c9cff511362b6d66aa1a97f2847d18de&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
523
+ <div class="messageBox">
524
+ <div class="body"><strong>
525
+ Ben</strong> on 16 Feb 2010 says:<br/>
526
+ <div class="desc">
527
+ Your screenshot of the CSS3 Embed Font Face Demo clearly shows Impact instead of a custom font. Did you even read that article before screenshotting it and listing it here? You'd notice that it isn't working. </div>
528
+ </div>
529
+ <div class="footer"></div>
530
+ </div>
531
+ </div>
532
+ <div class="clear"></div>
533
+ </div><!--userSection-->
534
+
535
+ <a name="comment2782"></a>
536
+ <div class="commentItem" id="comment-9">
537
+ <div class="userSection">
538
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=a7bf121ff29c67f31c4d858c81d36570&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
539
+ <div class="messageBox">
540
+ <div class="body"><strong>
541
+ <a href="http://www.jordanwalker.net/index.php" rel="external nofollow">Jordan Walker</a></strong> on 16 Feb 2010 says:<br/>
542
+ <div class="desc">
543
+ Those are all very neat effects. </div>
544
+ </div>
545
+ <div class="footer"></div>
546
+ </div>
547
+ </div>
548
+ <div class="clear"></div>
549
+ </div><!--userSection-->
550
+
551
+ <a name="comment2780"></a>
552
+ <div class="commentItem" id="comment-10">
553
+ <div class="userSection">
554
+ <div class="gravatar"><img src="http://www.gravatar.com/avatar.php?gravatar_id=461778b4a863c86afe52dfc8787685de&amp;default=http%3A%2F%2Fwww.queness.com%2Fimages%2Fdefault.gif&amp;size=80" height="80" width="80" /></div>
555
+ <div class="messageBox">
556
+ <div class="body"><strong>
557
+ Ralph</strong> on 16 Feb 2010 says:<br/>
558
+ <div class="desc">
559
+ I've seen literally all of those effects. </div>
560
+ </div>
561
+ <div class="footer"></div>
562
+ </div>
563
+ </div>
564
+ <div class="clear"></div>
565
+ </div><!--userSection-->
566
+
567
+ </div>
568
+ <div id="paging">
569
+ <ul>
570
+ <li class="count">Page : </li>
571
+ <li><a href="2025-0-10" class="paging selected" rel="http://www.queness.com/">1</a></li>
572
+ <li><a href="2025-10-10" class="paging" rel="http://www.queness.com/">2</a></li>
573
+ </ul>
574
+ </div>
575
+ <br/>
576
+
577
+
578
+ <div class="clear"></div>
579
+ <br/>
580
+
581
+ <div class="form">
582
+ <a name="leaveacomment"></a>
583
+ <h3>Leave a comment</h3>
584
+ <div class="commentform">
585
+ <form method="post" action="">
586
+
587
+
588
+ <div class="formArray">
589
+ <div class="formElement">
590
+ <label>Name*</label>
591
+ <input type="hidden" name="form[pid]" value="2025"/>
592
+ <input type="text" name="form[name]" value="" class="text size4"/>
593
+ </div><div class="clear"></div>
594
+ <div class="formElement">
595
+ <label>Email*<span>Queness support <a href="http://en.gravatar.com/" rel="external">gravatar</a>!</span></label>
596
+ <input type="text" name="form[email]" value="" class="text size4"/>
597
+ </div><div class="clear"></div>
598
+ <div class="formElement">
599
+ <label>Website</label>
600
+ <input type="text" name="form[url]" value="http://" class="text size4"/>
601
+ </div> <div class="clear"></div>
602
+ <div class="formElement">
603
+ <label>Comment*<span>Plain text only</span></label>
604
+ <textarea name="form[comment]" class="text size4" rows="5"></textarea>
605
+ </div> <div class="clear"></div>
606
+ <div class="formElement">
607
+ <label>Are you a human?*</label>
608
+ <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LeOWwUAAAAAAEpTAm10JttEcvVot1CjH6ag5orp"></script>
609
+
610
+ <noscript>
611
+ <iframe src="http://api.recaptcha.net/noscript?k=6LeOWwUAAAAAAEpTAm10JttEcvVot1CjH6ag5orp" height="300" width="500" frameborder="0"></iframe><br/>
612
+ <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
613
+ <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
614
+ </noscript>
615
+ </div> <div class="clear"></div>
616
+ <div class="formElement">
617
+ <div class="formButton">
618
+ <input type="submit" value="Submit Comment"/>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </form>
623
+ </div><!--commentform-->
624
+
625
+
626
+ </div>
627
+ </div><!-- postPage-->
628
+
629
+
630
+ </div><!--bodyLeft-->
631
+
632
+
633
+
634
+
635
+
636
+ <div class="bodyRight">
637
+
638
+
639
+ <div class="rss topMargin">
640
+ <a href="http://feeds2.feedburner.com/queness" title="Subscribe RSS"><img src="http://www.queness.com/images/subscribe.gif" width="224" height="37" alt="Subscribe RSS"/></a>
641
+ <span>Subscribe RSS, Keep yourself updated with queness latest posts!</span>
642
+ </div>
643
+
644
+ <div class="ads">
645
+
646
+
647
+ <a href="http://xhtml.pixelcrayons.com/order-now.html" rel="external" style="display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;" onClick="_gaq.push(['_trackEvent', 'Banner', 'Click', 'PixelCrayons_250x125']);"><img src="http://marketing.pixelcrayons.com/banners/xhtml/250x125.jpg" width="250" height="125" alt="Pixel Crayons" style="margin-left:-12px"/></a>
648
+
649
+ <script type="text/javascript">
650
+ Vertical1238662 = false;
651
+ ShowAdHereBanner1238662 = false;
652
+ RepeatAll1238662 = false;
653
+ NoFollowAll1238662 = false;
654
+ BannerStyles1238662 = new Array(
655
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
656
+ "img{border:0;clear:right;}",
657
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
658
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
659
+ );
660
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1238662/1238662.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
661
+ </script>
662
+
663
+
664
+
665
+
666
+ <script type="text/javascript">
667
+ Vertical1238488 = false;
668
+ ShowAdHereBanner1238488 = true;
669
+ RepeatAll1238488 = true;
670
+ NoFollowAll1238488 = false;
671
+ BannerStyles1238488 = new Array(
672
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left}",
673
+ "img{border:0;clear:right;}",
674
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
675
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
676
+ );
677
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1238488/1238488.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
678
+ </script>
679
+
680
+ </div>
681
+
682
+ <div class="clear"></div>
683
+
684
+
685
+ <div class="textads">
686
+
687
+ <p>
688
+ <label>Text Ads:</label>
689
+ Buy <a href="http://www.dhgate.com/wholesale/computers-networking/dcp.html" style="display:inline" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '1_dhgate']);">wholesale computers</a> directly from China at DHgate.com
690
+ <br/><br/>
691
+ Discover the tools to build your <a href="http://www.netfirms.ca" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '2_netfirm']);">e-Commerce Site</a> with Netfirms
692
+ <br/><br/>
693
+ Buy China Products from <a href="http://www.made-in-china.com" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '3_madeinchina']);">Made-in-China.com</a>
694
+ <br/><br/>
695
+ <a href="http://www.lightinthebox.com/wholesale-Cocktail-Dresses_c2049" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '4_cocktail']);">Cocktail Dresses</a>
696
+ <br/><br/>
697
+ <a href="http://www.dinodirect.com/china-mobile-phone/" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '5_cellphone']);">Cell Phones</a>
698
+ <br/><br/>
699
+ <a href="http://www.tradetang.com/wholesale_electronics.html" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '6_welectronic']);">Wholesale electronics</a>
700
+ <br/><br/>
701
+ <a href="http://www.hostcolor.com" rel="external" onClick="_gaq.push(['_trackEvent', 'Textlink', 'Click', '7_vpshosting']);">VPS Hosting</a> - cPanel virtual servers from Host Color
702
+ </p>
703
+ </div>
704
+
705
+
706
+
707
+ <div class="clear"></div>
708
+
709
+
710
+ <div class="news">
711
+ <br/>
712
+ <div class="item"><a href="http://www.queness.com/post/1616/10-javascript-plugins-that-skin-and-beautify-web-forms"><img src="http://www.queness.com/resources/images/1616.gif" height="32" width="50" alt="10 Javascript Plugins that Skin and Beautify Web Forms"/>10 Javascript Plugins that Skin and Beautify Web Forms</a></div><div class="clear"></div><div class="item"><a href="http://www.queness.com/post/856/8-javascript-plugin-effects-and-tools-to-beautify-and-control-web-text"><img src="http://www.queness.com/resources/images/856.gif" height="32" width="50" alt="8 Javascript Plugin Effects and Tools to Beautify and Control Web Text"/>8 Javascript Plugin Effects and Tools to Beautify and Control Web Text</a></div><div class="clear"></div><div class="item"><a href="http://www.queness.com/post/714/30-beautiful-and-inspiring-website-headers"><img src="http://www.queness.com/resources/images/714.gif" height="32" width="50" alt=" 30 Beautiful and Inspiring Website Headers"/> 30 Beautiful and Inspiring Website Headers</a></div><div class="clear"></div><div class="item"><a href="http://www.queness.com/post/1430/8-online-screen-capture-services-for-consistent-html-css-layout"><img src="http://www.queness.com/resources/images/1430.gif" height="32" width="50" alt="8 Online Screen Capture Services for Consistent HTML CSS Layout"/>8 Online Screen Capture Services for Consistent HTML CSS Layout</a></div><div class="clear"></div><div class="item"><a href="http://www.queness.com/post/1074/10-pretty-useful-and-cool-jquery-plugins"><img src="http://www.queness.com/resources/images/1074.gif" height="32" width="50" alt="10 Pretty Useful and Cool jQuery Plugins"/>10 Pretty Useful and Cool jQuery Plugins</a></div><div class="clear"></div><br/>
713
+ </div>
714
+
715
+
716
+
717
+
718
+
719
+ <div class="box">
720
+ <ul id="tabMenu">
721
+ <li class="posts">&nbsp;</li>
722
+ <li class="comments">&nbsp;</li>
723
+ <li class="category">&nbsp;</li>
724
+ <li class="famous">&nbsp;</li>
725
+ <li class="random selected">&nbsp;</li>
726
+ </ul>
727
+ <div class="boxTop"></div>
728
+
729
+ <div class="boxBody">
730
+
731
+ <div id="posts">
732
+ <h2 class="communityNews"><a href="http://www.queness.com/view-all">Community News</a></h2>
733
+ <ul>
734
+ <li><a href="http://www.queness.com/post/3732/top-15-photography-website-designs">Top 15+ Photography Website Designs<span> - Photographers have always the best portfolios and websites. There are thousands of online Portfolios around and it’s r... - zlwo.com on 12 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3731/50-amazing-black-and-white-photography-examples">50 Amazing Black and White Photography examples <span> - Black and White photos have a “classic” photography look. You have to imagine the colors inside them to solve the pu... - Marked Lines on 12 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3730/5-open-source-html5-video-players-for-web-developers">5 Open Source HTML5 Video Players for Web Developers<span> - In this post I am sharing five open source HTML5 video players to help web designer and developers. This list includes V... - Tutorialfeed on 12 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3728/70-attractive-examples-of-big-typography-in-web-design">70 Attractive Examples Of Big Typography In Web Design<span> - Last week i published a post ”50 Inspirational ”Live” Typography Examples From New York ” and as a fan of huge t... - Designbeep on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3727/inspirational-websites-of-the-week">Inspirational websites of the week<span> - From today we are starting a new weekly series called “Inspirational websites of the week”. Main intention will be t... - webanddesigners on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3724/how-to-create-a-clean-business-layout-for-drupal">How to create a clean business layout for Drupal<span> - This tutorial will teach you how to create in just a few steps a clean business layout suitable for a Drupal theme.... - Graphstock on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3723/mayas-best-resources-for-css3">May’s Best Resources for CSS3<span> - Here are the best CSS3 coding techniques and tutorials of May 2010, 42 fresh resources to test and implement in your fut... - Net-Kit.com on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3722/4-x-5-star-rating-tutorial-with-jquery-in-the-hot-seat">4 x 5 Star Rating Tutorial With jQuery In The Hot Seat<span> - Sometimes logical steps, which we use every day to find solutions for our problems, fail us without a single word of war... - jqueryfun.com on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3720/spectacular-use-of-black-color-in-business-card-design">Spectacular Use of Black Color in Business Card Design<span> - The dark side of these cards looks so creative and shiny that we find these business cards worth to share with you peopl... - http://lava360. on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3719/hellingly-asylum-mental-hospital-photos">Hellingly Asylum Mental Hospital Photos <span> - Here you will find stunning photos from Hellingly Asylum Mental Hospital. Hellingly Hospital was a very large mental hos... - smashingshare on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3718/20-stunning-photos-using-selective-color-technique">20 Stunning Photos Using Selective Color Technique <span> - Last time we ran a Photoshop tutorial on how to apply a selective color effect to a photo. This time, we want to showcas... - photoble on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3717/25-handy-tools-to-paste-and-share-your-code-snippets">25 Handy Tools To Paste And Share Your Code Snippets<span> - Paste tools are web applications that allow users to upload snippets of text, usually samples of source code for public ... - 1stwebdesigner on 11 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3707/super-macro-photos-of-ladybugs">Super Macro Photos Of Ladybugs <span> - In this post, we will showcase super macro photos of ladybugs. Macro photos are the close-up pictures of small things. H... - smashingshare on 10 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3706/7-habits-you-as-a-freelancer-need-to-ditch">7 Habits You As A Freelancer Need To Ditch <span> - Freelancers accumulate a lot of things and habits that get in the way of their work. Here are 7 Things You As A Freelanc... - smashingshare on 10 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3705/intelligent-manipulationedward-bernays">Intelligent Manipulation - Edward Bernays<span> - “The conscious and intelligent manipulation of the organized habits and opinions of the masses is an important element... - Doc4 on 10 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3704/10-ipad-apps-every-designer-will-love">10+ iPad Apps Every Designer Will Love<span> - This is a collection of the 10+ best apps for designers and developers which make them move more freely either on the ca... - zlwo.com on 10 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3702/simple-css3-dropdown-menu">Simple CSS3 Dropdown Menu<span> - As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it he... - Webstuffshare on 10 Jun 10</span></a></li><li class="last"><a href="http://www.queness.com/post/3701/150-wonderful-logo-designs-categorised-by-color">150 Wonderful Logo Designs categorised by color<span> - Logos, logos, logos. I love logo design and I decided to collect lots of logos here for you. You will find 30 Blue, 40 R... - Marked Lines on 10 Jun 10</span></a></li> </ul>
735
+ </div>
736
+
737
+ <div id="comments">
738
+ <h2 class="recentComment">Recent Comments</h2>
739
+ <ul>
740
+ <li><a href="http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery#comment4207">We used this code on our website, thanks...<span> - car transport on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/320/22-beautiful-icon-packs-for-web-design-and-development#comment4206">high quality low price&lt;a href=&quot; http://www.gojerseyshop.com/&quot;&gt...<span> - Youth NFL Jerseys on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3674/21-useful-and-practical-jquery-tutorials-you-might-have-missed#comment4205">good blog ,i will come here every day,...<span> - Youth NFL Jerseys on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery#comment4204">high quality low price&lt;a href=&quot; http://www.gojerseyshop.com/&quot;&gt...<span> - Youth NFL Jerseys on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial#comment4203">Hi.
741
+ Great tutorial, works great except for 1 thing. When I've clicked the link ...<span> - Michael on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1146/42-multi-blogging-website-powered-by-wordpress-mu#comment4202">Greta info guys... ilooking for this multi bloging by WpMu...<span> - internet marketing on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1146/42-multi-blogging-website-powered-by-wordpress-mu#comment4201">Great info about multiblogging, this i looking for...<span> - internet marketing on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3548/12-useful-mac-dashboard-widgets-for-web-designers-and-developers#comment4200">Ooh, didn't realise you could get widgets like this for the dashboard. Nice one!...<span> - Rob on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1513/14-outstanding-jquery-navigation-menu-tutorials#comment4199">The tutorial was very nice and cool......<span> - vitasmata on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited#comment4198">@blueMist, sorry I should update the article.
742
+
743
+ I will update the script with f...<span> - kevin on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited#comment4197">The IE8 fix below did not work. I spent all this time installing this script, bu...<span> - BlueMist on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery#comment4196">Is there anyway to have the #wrapper start at the bottom when the page loads. Th...<span> - Nick02 on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/2959/13-simple-but-useful-online-tools-for-web-development#comment4195">nice work thanks you very mutch...<span> - mugiwara on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1146/42-multi-blogging-website-powered-by-wordpress-mu#comment4194">Thanks for great layout...<span> - laptopBatteries on 15 Jun 10</span></a></li><li><a href="http://www.queness.com/post/3383/8-extremely-beautiful-flash-and-javascript-image-sliders#comment4193">Hi,
744
+ Good Post! There are heaps of image sliders out there. This time, my search...<span> - ciera on 14 Jun 10</span></a></li><li><a href="http://www.queness.com/post/1378/20-jquery-introduction-tutorials-and-resources-for-beginners#comment4192">Great collection thanks for sharing, queness is really informative and full of r...<span> - Acne Scar Cream on 14 Jun 10</span></a></li><li class="last"><a href="http://www.queness.com/post/3674/21-useful-and-practical-jquery-tutorials-you-might-have-missed#comment4191">great post, I'm new to jquery. thanks for the insight.
745
+ ...<span> - website design on 14 Jun 10</span></a></li> </ul>
746
+ </div>
747
+
748
+ <div id="category">
749
+ <h2 class="postTag">Post Tags</h2>
750
+ <ul>
751
+ <li><a href="http://www.queness.com/tag/ajax" id="lnk-29">ajax - (131)</a> </li><li><a href="http://www.queness.com/tag/browser" id="lnk-21">browser - (80)</a> </li><li><a href="http://www.queness.com/tag/cms" id="lnk-23">cms - (92)</a> </li><li><a href="http://www.queness.com/tag/css-html" id="lnk-1">css-html - (596)</a> </li><li><a href="http://www.queness.com/tag/design" id="lnk-2">design - (1792)</a> </li><li><a href="http://www.queness.com/tag/flash" id="lnk-25">flash - (76)</a> </li><li><a href="http://www.queness.com/tag/font" id="lnk-17">font - (85)</a> </li><li><a href="http://www.queness.com/tag/freebies" id="lnk-3">freebies - (425)</a> </li><li><a href="http://www.queness.com/tag/gadget" id="lnk-24">gadget - (43)</a> </li><li><a href="http://www.queness.com/tag/graphic" id="lnk-28">graphic - (1026)</a> </li><li><a href="http://www.queness.com/tag/icon" id="lnk-15">icon - (69)</a> </li><li><a href="http://www.queness.com/tag/inspiration" id="lnk-4">inspiration - (948)</a> </li><li><a href="http://www.queness.com/tag/javascript" id="lnk-5">javascript - (478)</a> </li><li><a href="http://www.queness.com/tag/logo" id="lnk-31">logo - (79)</a> </li><li><a href="http://www.queness.com/tag/misc" id="lnk-32">misc - (268)</a> </li><li><a href="http://www.queness.com/tag/mysql" id="lnk-6">mysql - (22)</a> </li><li><a href="http://www.queness.com/tag/os" id="lnk-22">os - (12)</a> </li><li><a href="http://www.queness.com/tag/photography" id="lnk-7">photography - (300)</a> </li><li><a href="http://www.queness.com/tag/photoshop" id="lnk-19">photoshop - (434)</a> </li><li><a href="http://www.queness.com/tag/php" id="lnk-8">php - (168)</a> </li><li><a href="http://www.queness.com/tag/seo" id="lnk-9">seo - (120)</a> </li><li><a href="http://www.queness.com/tag/template" id="lnk-20">template - (120)</a> </li><li><a href="http://www.queness.com/tag/tips" id="lnk-11">tips - (431)</a> </li><li><a href="http://www.queness.com/tag/tools" id="lnk-10">tools - (374)</a> </li><li><a href="http://www.queness.com/tag/trend" id="lnk-30">trend - (222)</a> </li><li><a href="http://www.queness.com/tag/tutorial" id="lnk-12">tutorial - (784)</a> </li><li><a href="http://www.queness.com/tag/usability" id="lnk-26">usability - (231)</a> </li><li><a href="http://www.queness.com/tag/video" id="lnk-18">video - (35)</a> </li><li><a href="http://www.queness.com/tag/wallpaper" id="lnk-13">wallpaper - (118)</a> </li><li class="last"><a href="http://www.queness.com/tag/wordpress" id="lnk-14">wordpress - (370)</a> </li> </ul>
752
+ </div>
753
+
754
+ <div id="famous">
755
+ <h2 class="famousPost">Famous Posts</h2>
756
+ <ul>
757
+ <li><a href="http://www.queness.com/post/222/10-jquery-photo-gallery-and-slider-plugins">10+ jQuery photo gallery and slider plugins<span> - 375297</span></a></li><li><a href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial">Simple jQuery Modal Window Tutorial <span> - 337036</span></a></li><li><a href="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption">Simple JQuery Image Slide Show with Semi-Transparent Caption<span> - 282982</span></a></li><li><a href="http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements">25+ jQuery Plugins that enhance and beautify HTML form elements<span> - 232298</span></a></li><li><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial<span> - 182496</span></a></li><li><a href="http://www.queness.com/post/256/vertical-scroll-menu-with-jquery-tutorial">Vertical Scroll Menu with jQuery Tutorial<span> - 157357</span></a></li><li><a href="http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery">Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery<span> - 129811</span></a></li><li><a href="http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial">jQuery Image Gallery/News Slider with Caption Tutorial<span> - 125978</span></a></li><li><a href="http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors">10 jQuery and non-jQuery javascript Rich Text Editors<span> - 124091</span></a></li><li><a href="http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery">Create a Ajax based Form Submission with jQuery<span> - 93331</span></a></li><li><a href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial">jQuery Sliding Tab Menu for Sidebar Tutorial<span> - 89385</span></a></li><li><a href="http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery">Create a Stunning Sliding Door Effect with jQuery<span> - 81422</span></a></li><li><a href="http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial">jQuery Thumbnail with Zooming Image and Fading Caption Tutorial<span> - 80288</span></a></li><li><a href="http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect">Create an Attractive jQuery Menu with Fadein and Fadeout Effect<span> - 72919</span></a></li><li><a href="http://www.queness.com/post/656/10-beautiful-jquery-and-mootool-calendar-plugins">10 Beautiful jQuery and MooTool Calendar Plugins<span> - 71529</span></a></li><li><a href="http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery">Simple Lava Lamp Menu Tutorial with jQuery<span> - 64961</span></a></li><li><a href="http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery">Create a Simple CSS + Javascript Tooltip with jQuery<span> - 62032</span></a></li><li><a href="http://www.queness.com/post/456/16-impressive-flash-like-javascript-animation-inspirations-tutorials-and-plugins">16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins<span> - 61174</span></a></li><li><a href="http://www.queness.com/post/126/useful-and-handy-jquery-tips-and-tricks">Useful and Handy jQuery Tips and Tricks<span> - 58552</span></a></li><li class="last"><a href="http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery">Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery<span> - 58451</span></a></li> </ul>
758
+ </div>
759
+
760
+ <div id="random" class="show">
761
+ <h2 class="randomPost">Random Posts</h2>
762
+ <ul>
763
+ <li><a href="http://www.queness.com/post/2946/8-ways-to-increase-the-readibility-and-beautify-your-html-code">8 Ways to Increase the Readibility and Beautify your HTML Code<span> - Learn how to tidy up your html code with these methods. These are the methods I have been using, and it will able to gui... - queness.com</span></a></li><li><a href="http://www.queness.com/post/1388/give-away-20-google-wave-invitations-from-queness">Give Away 20 Google Wave Invitations from Queness<span> - Google has released Google Wave few months ago, Google stated that Wave will change and impact the way we manage or use ... - queness</span></a></li><li><a href="http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited">jQuery Photo Slide Show with Slick Caption Tutorial Revisited<span> - A revisit from my previous famous Image slide show with semi-transparent caption jQuery tutorial. I have fixed bugs and ... - queness</span></a></li><li><a href="http://www.queness.com/post/2746/10-fresh-and-useful-web-design-and-development-blogs">10 Fresh and Useful Web Design and Development Blogs<span> - Now, a lot of new web design and development blogs have emerged, and there are tones of resources out there to feed our ... - queness</span></a></li><li><a href="http://www.queness.com/post/685/jquery-flipping-menu-tutorial-using-backgroundposition-plugin">jQuery Flipping Menu Tutorial using backgroundPosition Plugin<span> - Learn how to create a simple, but elegant menu by animating background with jquery backgroundPosition plugin. It&#039;s ... - queness</span></a></li><li><a href="http://www.queness.com/post/2291/20-gorgeous-free-fonts-for-your-headlines">20 Gorgeous Free Fonts for Your Headlines<span> - Headlines are very important. One thing is they need to inform, the other they have to draw attention. And there is no b... - queness</span></a></li><li><a href="http://www.queness.com/post/320/22-beautiful-icon-packs-for-web-design-and-development">22 Beautiful Icon Packs for Web Design and Development<span> - Icons are very important to web design and development. I have collected a list of beautifully crafted icons for your ne... - queness</span></a></li><li><a href="http://www.queness.com/post/1138/10-javascriptcss-treeview-and-sitemap-plugins-and-tutorials">10 Javascript &amp; CSS TreeView and Sitemap Plugins and Tutorials<span> - Javascript Tree view and sitemap are good tools to display the structure of your website. I have collected 10 plugins an... - queness</span></a></li><li><a href="http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial">A Simple and Beautiful jQuery Accordion Tutorial<span> - Learn how to create the well-known javascript accordion with the most minimal amount of html, css, javascript code and o... - queness</span></a></li><li><a href="http://www.queness.com/post/742/100-jquery-tutorial-and-plugin-collections-on-september">100++ jQuery Tutorial and Plugin Collections on September<span> - All sort of tutorials and plugins. Tooltips, carousal, image slider, gallery, calendar, clock, rich text editors, tab in... - queness</span></a></li><li><a href="http://www.queness.com/post/2025/18-incredible-css3-effects-you-have-never-seen-before">18 Incredible CSS3 Effects You Have Never Seen Before<span> - I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It&#039;... - queness</span></a></li><li><a href="http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery">Create a Simple Infinite Carousel with jQuery<span> - This tutorial will show you how to create a infinite carousel script with jQuery. It also have a simple autorotate scrip... - queness</span></a></li><li class="last"><a href="http://www.queness.com/post/545/10-handycool-jquery-plugins">10 Handy &amp; Cool jQuery Plugins<span> - I have collected 10 jQuery that will make your life easier. Some of them are new, and create really cool effects. Some o... - queness</span></a></li> </ul>
764
+ </div>
765
+
766
+
767
+ </div>
768
+
769
+ <div class="boxBottom"></div>
770
+
771
+ </div>
772
+ <div class="clear"></div>
773
+
774
+ <br/>
775
+
776
+ <script type="text/javascript" src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&amp;cwrun=200&amp;cwadformat=300X250&amp;cwpid=516497&amp;cwwidth=300&amp;cwheight=250&amp;cwpnet=1&amp;cwtagid=59676"></script>
777
+
778
+
779
+ </div><!--bodyRight-->
780
+
781
+
782
+
783
+
784
+
785
+
786
+
787
+ <div class="clear"></div>
788
+ </div><!--body-->
789
+ </div><!--container-->
790
+ <div class="top"><a id="view" href="http://www.queness.com/view-all">View all posts and news</a> <a id="top" onclick='$(document).scrollTo(0,500);'>Back to top</a></div>
791
+ </div><!--bottomSection-->
792
+
793
+ <div class="qfooter">
794
+
795
+ <div class="content">
796
+
797
+
798
+ <div class="author">
799
+ <h3>About the Author</h3>
800
+ <img src="http://www.queness.com//images/kevin-photo.png" width="230" height="176" alt="" />
801
+ <p>A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to <a href="http://www.queness.com/contact">say hi</a> to me, or <a href="http://www.twitter.com/quenesswebblog">follow me</a> on twitter. </p>
802
+ <h4>Kevin Liew</h4>
803
+ </div>
804
+ <div class="twitter">
805
+ <h3>Twitter</h3>
806
+ <ul id="twitter">
807
+ <li><a href=http://twitter.com/quenesswebblog/statuses/16217813958>10 Awesome HTML5, CSS and Javascript Demonstrations - http://bit.ly/bolPBy</a>... <span>9 hours ago</span></li><li><a href=http://twitter.com/quenesswebblog/statuses/16137127653>May?s Best Resources for CSS3 http://bit.ly/9Iz1IP</a>... <span>1 day ago</span></li>
808
+ <li class="last"><a href="http://www.twitter.com/quenesswebblog">Follow me</a></li>
809
+ </ul>
810
+
811
+ <div class="donation"><br/>
812
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
813
+ <fieldset style="border:none">
814
+ <input type="hidden" name="cmd" value="_s-xclick" />
815
+ <input type="hidden" name="hosted_button_id" value="6723376" />
816
+ <input type="image" src="http://www.queness.com/images/buymedrink.png" name="submit" style="border:none"/>
817
+ <img alt="" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1" />
818
+ </fieldset>
819
+ </form>
820
+
821
+ </div>
822
+
823
+
824
+ </div>
825
+ <div class="partner">
826
+ <h3>Partner</h3>
827
+ <ul id="partner">
828
+ <li><a href="http://www.webanddesigners.com/" rel="external">Web and Designers</a></li>
829
+ <li><a href="http://www.cssstyle.me/" rel="external">CSS Style</a></li>
830
+ <li><a href="http://www.pvmgarage.com/en/" rel="external">PV.M Garage Blogzine</a> - (<a href="http://www.pvmgarage.com/" rel="external">Italian</a>)</li>
831
+ <li><a href="http://www.wpcanyon.com/" rel="external">WP Canyon</a></li>
832
+ <li><a href="http://designrfix.com/" rel="external">Designrfix</a></li>
833
+ <li><a href="http://coolvibe.com/" rel="external">CoolVibe</a></li>
834
+ <li><a href="http://www.webdeveloperjuice.com/" rel="external">Web Developer Juice</a></li>
835
+ <li><a href="http://www.denbagus.net/" rel="external">Denbagus</a></li>
836
+ <li><a href="http://www.webhostingsecretrevealed.com" rel="external">Web Hosting Secret Revealed</a></li> <li><a href="http://www.seo-semantic-xhtml.com/" rel="external">PSD to HTML Conversion</a></li> <li class="last"><a href="http://www.10-cheapwebhosting.com/hosts/BlueHost.php" rel="external">BlueHost</a></li> <li class="adslink">
837
+ <script type="text/javascript">
838
+ Vertical1243395 = false;
839
+ ShowAdHereBanner1243395 = true;
840
+ RepeatAll1243395 = true;
841
+ NoFollowAll1243395 = false;
842
+ BannerStyles1243395 = new Array(
843
+ "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
844
+ "img{border:0;clear:right;}",
845
+ "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
846
+ "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
847
+ );
848
+ document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1243395/1243395.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
849
+ </script>
850
+ <div class="clear"></div>
851
+ </li>
852
+ </ul>
853
+
854
+
855
+ </div>
856
+
857
+
858
+ <div class="clear"></div>
859
+ </div><!--content-->
860
+ </div><!--footer-->
861
+
862
+
863
+ <div style="display:none" id="login" class="loginBox">
864
+ <form method="post" action="http://www.queness.com/login.php">
865
+
866
+ <div class="formElement">
867
+ <label>Username</label>
868
+ <input type="text" value="" class="text size3" id="username" name="login[username]" />
869
+ </div>
870
+ <div class="clear"></div>
871
+ <div class="formElement">
872
+ <label>Password</label>
873
+ <input type="password" value="" class="text size3" id="password" name="login[password]" />
874
+ </div>
875
+ <div class="submitBut">
876
+ <input type="checkbox" value="1" name="login[remember]"/><span class="small">Remember me</span>
877
+ <input type="submit" value="Login" />
878
+ </div>
879
+
880
+ <div class="clear"></div>
881
+ <div class="displayText">
882
+ <a href="http://www.queness.com/register">Register Now</a><br/>
883
+ <!--<a href="http://www.queness.com/password">Reset Password</a>-->
884
+ </div>
885
+ </form>
886
+ <div class="separator"></div>
887
+
888
+ </div><!--login-->
889
+
890
+ <script type="text/javascript" src="http://www.queness.com/js/shCore.js"></script>
891
+ <script type="text/javascript" src="http://www.queness.com/js/shBrushPhp.js"></script>
892
+ <script type="text/javascript" src="http://www.queness.com/js/shBrushXml.js"></script>
893
+ <script type="text/javascript" src="http://www.queness.com/js/shBrushCss.js"></script>
894
+ <script type="text/javascript" src="http://www.queness.com/js/shBrushJScript.js"></script>
895
+ <script type="text/javascript" src="http://www.queness.com/js/shBrushSql.js"></script>
896
+ <script type="text/javascript">
897
+ window.onload = function () {
898
+ dp.SyntaxHighlighter.ClipboardSwf = 'http://www.queness.com/flash/clipboard.swf';
899
+ dp.SyntaxHighlighter.HighlightAll('code');
900
+ }
901
+
902
+ </script>
903
+
904
+
905
+
906
+ <!-- Start Quantcast tag -->
907
+ <script type="text/javascript">
908
+ _qoptions={
909
+ qacct:"p-12rx1-VMLQ-uI"
910
+ };
911
+ </script>
912
+ <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
913
+ <noscript>
914
+ <img src="http://pixel.quantserve.com/pixel/p-12rx1-VMLQ-uI.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
915
+ </noscript>
916
+ <!-- End Quantcast tag -->
917
+
918
+ </body>
919
+ </html>