9 Web CSS Tools You Must Know

Long time no see! :)

Voici un lien intéressant vers des outils CSS en ligne

http://www.queness.com/post/3220/9-web-css-tools-you-must-know

13 simple but useful online tools for web development

http://www.queness.com/post/2959/13-simple-but-useful-online-tools-for-web-development

AjaxLoad

Generates custom Ajax-style "loading" images

http://www.ajaxload.info/

Shutup.css Silences Web Site Comments [CSS]

While we happen to love comments and the lively discussion that occurs in them, we understand that not everybody wants to see the comments left by other internet users. Shutup.css lets you apply a custom stylesheet and eradicate comments across the web.
It's as simple as it sounds. Download the Shutup.css file at the link below and apply it to your custom styles in your web browser. For most browsers you can find custom style sheets under the advanced settings. If you're a Firefox user you can download Stylish to manage styles and give you finer control over which sites the Shutup.css file is applied to—it also makes toggling it on and off easier.

Once you have the style applied to your browser nearly all web sites with comments will no longer be displaying them. The screenshot above shows the end of a Lifehacker article with the style sheet not applied and then applied, removing the comments. Easy but effective.

Have a favorite user style hack? Prefer just to silence YouTube comments? Share it in the comments below.

Shutup.css [via Make]

Introduction to reCAPTCHA

Location in iPhone Web Apps

http://mobiforge.com/developing/story/location-iphone-web-apps

Sexy bookmark like effect using pure css

http://www.webdeveloperjuice.com/2009/12/15/sexy-bookmark-like-effect-using-pure-css/

Introducing Google Browser Size

When I started work at Google, I visited the Google Earth team, hoping to find a 20% project on my favorite Google product. There I met Bruno Bowden, who introduced me to a problem I had never thought much about: how to take browser sizes into account when designing a page.

Bruno had noticed that many people who visit the “Download Google Earth” page never actually download, even though, as you can see, the button is pretty hard to miss:



He wondered if a significant number of users might have their browser windows too small to see the button:



To analyze this, Bruno looked at how large people's browser windows were when they visited this page. His first key idea was to measure not the entire browser window, but just the client area -- no toolbars, status bars, or other chrome.

Bruno's second key idea was to render several weeks' worth of page visitor browser sizes in a contour visualization:



Using this visualization, Bruno confirmed that about 10% of users couldn't see the download button without scrolling, and thus never noticed it. 10% may not sound like a lot, but in this context it turns out to mean a significant number of people weren't downloading Google Earth. Using this data, the team was able to redesign the page to good effect.

Bruno and I realized that Web designers might benefit from this information if it could be made more generally available. We constructed a page that could overlay a DIV containing the contour visualization atop an IFRAME containing any other Web page:



This turned out to be a good way to see which controls were and weren't visible at typical browser sizes. The only problem was, the overlay DIV prevented mouse events from getting to the page IFRAME, so it wasn't possible to interact with the page.

To solve this, we split the overlay DIV into four:



Each of the outlines above (red, yellow, blue, green) represents a separate DIV. As the mouse pointer moves, we resize and reposition the DIVs to leave a small window of blank space around the pointer, and adjust background offsets for each DIV to make the overlay look like one seamless graphic. (We originally did this on a timer, but we found a simpler way: when the mouse touches any of the DIVs, resize/reposition all of the DIVs.) End result: a designer can click and otherwise interact with the page with the mouse, and thus interact with the site normally instead of repeatedly typing in URLs.

We are now making this tool available to the public on Google Labs. To try it, simply visit browsersize.googlelabs.com and enter the URL of a page you'd like to examine. The size overlay you see is using latest data from visitors to google.com, so this should give you a pretty good indication of what parts of your UI are generally visible and what aren't.

We look forward to receiving your comments at browser-size-external-feedback!

By Arthur Blume on behalf of the Google Browser Size team

Faster apps for a faster web: introducing Speed Tracer

Do you ever wonder what's going on inside the browser when a webpage doesn't load or respond as quickly as it should? Many developers do, especially when trying to build powerful web applications for their users.

But up until now, it's been difficult for developers to identify problems in a slow-to-respond application. So, tonight at Google Campfire One, we're happy to announce that we're adding a new tool to Google Web Toolkit called Speed Tracer.

Speed Tracer is a Google Chrome extension that enables developers to identify performance problems in their web apps using a "Sluggishness Graph," in combination with many other metrics. In the spirit of clean, simple design, developers need only look at the Y-Axis of their application's Sluggishness Graph to see how they're doing:

• If the y-axis is close to zero, then the app is fast
• If the y-axis registers around 100%, then the app is, well, sluggish

And in either case, Speed Tracer provides lots of additional data to help diagnose any particular performance issue.

More @ http://googleblog.blogspot.com/2009/12/faster-apps-for-faster-web-introducing.html

10 Useful Website Management and Testing Tools

LoadStorm

This web based load testing tool to check web performance of your website. You can create as many test plans, scenarios, and steps as you need. Tests can be built using the tool in such a way as to simulate a large number of different users with unique logins and different tasks.

SiteAnalysis

It also an important tool to test and validate critical website components. You can easily test and validate internal and external links, domain names, DNS servers and SSL certificates. It can be easily run as per your preference that can be as often as every hour, or as infrequent as once a week. This is best suited for dynamic sites requiring frequent link checking.

Avalanche

Another load testing tool specially designed to stress-test security, network, and Web application infrastructures by generating large quantities of user and network traffic. It emulates multiple Web browsers, supports Web Services testing Supports HTTP 1.0/1.1, SSL, FTP, RTSP/ RTP, MS Win Media, SMTP, POP3, DNS, Telnet, and Video on Demand over Multicast protocols.

VisualVM

This is a free tool to examine and troubleshoot Java applications. It runs seamlessly on Sun JDK 6 and also efficient in monitoring applications on JDK 1.4 and higher. Its automatically detects and lists locally and remotely running Java applications while monitoring application performance and memory consumption. It saves application configuration and runtime environment together with all taken thread dumps, heap dumps and profiler snapshots.

HTML Validator

It is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar while browsing. It allows you to validate the HTML sent by the server or the HTML in the memory (after Ajax execution). You can easily see Error details on the HTML source of the page for correction.

Fortify 360

This tool ensures security of your website along with vulnerability detection. It features integrate static source code analysis, dynamic runtime analysis, and real-time monitoring to identify and accurately prioritize the greatest number of critical security vulnerabilities. Its Program Trace Analyzer (PTA) that finds vulnerabilities that become visible only when an application is running and integrates into a QA test to find vulnerabilities while a functional test is being conducted on an application.

XenoCode Browser Sandbox

Another important testing before launching a website is Browser testing. This tool offers a series of virtual applications that can run all popular browsers simultaneously. It does not even require the installation of software.

W3C HTML Validation Service

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.

Google’s Website Optimizer

It is another testing service from Google where you can test the content and pages you want. Here you can test headlines, images, or text using our easy web-based system. The testing done through this service helps in determining impacts on conversions, user actions, traffic, or other goals.

DeviceAnywhere

This is a mobile handset testing platform allows development, deployment, and testing of content/apps on more than 2000 real handset devices in live global networks around the world using just the Internet. The mobile handset bank includes devices stationed in the United States, Canada, United Kingdom, France, Germany, Spain, Japan etc.

We hope these tools will help you in launching and maintaining user-friendly and error free website. Please share with us your suggestions and feedback as always.

From http://blog.limeexchange.com/2009/12/03/10-useful-website-management-and-testing-tools/

69 Free (or low cost) Tools to Improve Your Website

http://www.bryaneisenberg.com/2009/09/free-tools-to-improve-your-website/

11 Classic CSS Techniques Made Simple With CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We should 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, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

CSS3? What’s that?!

I’m sure you’ve heard of CSS in general. CSS3 isn’t that much different, in terms of syntax; however, the power of CSS3 is much greater. As you’ll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!
Here’s what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

What We’ll Be Covering

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember – these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

1. Rounded Corners
2. Box Shadow
3. Text Shadow
4. Fancy Font
5. Opacity
6. RGBA
7. Background Size
8. Multiple Backgrounds
9. Columns
10. Border Image
11. Animations

1. Rounded Corners

Probably my favorite on of this list, rounded corners provide a developer with so many options. You can create a rounded corner button in seconds. My favorite thing to do is set a gradient background to repeat along the x-axis and then apply rounded corners to make a very nice looking Web 2.0 button.
You can simulate rounded corners by using four extra divs or by using JavaScript. Though, a user doesn’t see these smooth corners if they have JavaScript disabled, I think that’s fine as long as the website still functions as it should. You can read up on this method if you would prefer to use pure CSS in making rounded corners.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
<!--CONTENT-->
</div>

The classical method uses jQuery along with a JavaScript plugin called Corners.

CSS3 Way

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.
View the demo.

2. Box Shadow

Box shadows provide you with a very powerful tool. 99% of the time when I’m desigining, I find myself using drop shadows for something. Once again, I’ll be using a jQuery plugin to take care of the classic way because honestly, trying to figure it out with just CSS is confusing. Why should I waste my time fiddling with negative margins when there’s already something written that does the job for me? As long as my design looks fine when people have JavaScript disabled, I’m perfectly content using a jQuery plugin.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>
<div class="box">
<!--CONTENT-->
</div>

I’m using the dropShadow plugin. Simple and what I wanted; though I would prefer to use just CSS .

CSS3 Way

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

The values for the box shadow properties are: x-offset y-offset blur color. Much easier than importing two JavaScript files, and A LOT easier than messing around with background images and negative margins.
View the demo.

3. Text Shadow

If you’ve ever read a tutorial about how to make the letterpress effect in Photoshop, you’ll know that the drop shadow effect is used. It’s really simple to create letterpressed text, just follow this tutorial at Line25 by Chris Spooner.

Classic Way

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
<span class="font">The quick brown fox jumps over the lazy dog.</span>
<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Instead of using a jQuery plugin this time, I just used some simple CSS tricks to absolutely position the text behind the other copy of text. The only bad thing about not using CSS3 for this situation is that you will get two copies of the text if CSS is disabled.

CSS3 Way

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

If you’re planning on using text shadows that are blurred (the third “option” in the text-shadow property), I don’t know how you would accomplish that with pure CSS, and no images.
View the demo.

4. Fancy Font

We’ve dreamed about it for a long time now, but you can finally display “fancy fonts” on the web without relying on JavaScript. Of course this causes some issues with allowing paid fonts to be distributed over the internet. Anyhow, I present you with @font-face.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

I decided to use Cufón to replace the text. I’m not going to explain how to use it because Jeffrey has an awesome screencast already.

CSS3 Way

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

We create a font family with @font-face and then use it as a value for font-family. Michael Owens wrote an article here about a month ago which explains @font-face quite well.
View the demo.

5. Opacity

If you’ve visited the Envato website redesign lately, you might have noticed that there are a lot of transparent elements. Though this is achieved with transparent PNGs, you can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Classic Way

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

With CSS3, we just eliminated two properties that were specific to IE, isn’t that great?!
View the demo.

6. RGBA

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for? It stands for alpha, which refers to the transparency.
Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It’s much easier than creating a new image for each color; however, with a little PHP it makes things a lot easier.

Classic Way

Seeing as how this isn’t a PHP article, I won’t be going over the PHP. Just save this file as rgba.php and when you need a certain RGBA color, make the background “color” as url(rgba.php?r=R&g=G&b=B&a=A).

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

Now just apply that to a div…

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>

View the demo.

7. Background Size

The background size property is an amazing thing to have on your tool belt when you’re creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it’s like adding another background property.

Classic Way

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class="box">
<div class="content">
<!--CONTENT-->
</div>
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

CSS3 Way

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Unfortunately, this property isn’t implemented into Firefox (V3.5.2) at the time of this writing.
View the demo.

8. Multiple Backgrounds

Ah, multiple backgrounds. Now this give developers a very powerful tool. I can think of so many things that require multiple divs just to have more than one background. The most common place I can see this being helpful is in a header section of the website, but that’s just the first thing I thought of.

Classic Way

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>
<div class="box">
<div class="box2">
<!--CONTENT-->
</div>
</div>

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn’t it?

CSS3 Way

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

The syntax is really easy to pick up on this one. All you do for the multiple backgrounds is add a comma in between each one! However, once again, this is a limited property and is only in Safari.
View the demo.

9. Columns

This is the most interesting CSS3 property I’ve come by. It’s not something you see a lot in web design. Myself, I’ve only seen newspaper-like columns once or twice; however, I love how the effect looks when done correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the columns.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

I’ve added a little padding to the columns just so the text isn’t smashed up against each other.

CSS3 Way

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

There are a handful of other CSS3 column properties that you can apply, but for demonstrative purposes, I only specified the number of columns. If you’d like to learn more about these other properties, check out the multi-column page at CSS3.info.
View the demo.

10. Border Image

I had no clue about the border image property until I upgraded to Firefox 3.5 and went to Chris Spooner’s website and saw that his post images had image borders. I personally don’t have any interest in this property, but that’s not going to stop me from explaining how to achieve it.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Instead of spending the time creating multiple divs and repeating the background image around the div, I found a jQuery plugin that does the work for me. It’s called borderImage and works just like it should.

CSS3 Way

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

As you can see, the border image property is a bit odd. W3 explains how it gets calculated MUCH better.
View the demo.

11. Animations

Alright, who doesn’t love to see some element gently slide to the left or fade in when you hover over something? Animations are great to increase user interface, but make sure that you don’t go over board! The only browsers that support CSS3 animations are Webkit based browsers. The only other way to display animations is to use JavaScript. I’ll be using jQuery because it’s my favorite JavaScript library (if you haven’t guessed by now).

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Both of these code snippets do the same thing: slide the div 20 pixels down over the course of 300 ms. Remember, the CSS3 code only works in Webkit browsers!
View the demo.

Conclusion

There you have it: 11 CSS techniques that will become much easier with CSS3 in the (hopefully near) future. Obviously, it’ll be a while before we can 100% depend on these properties across all browsers.
Don’t forget to review these other Nettuts+ tutorials that discuss CSS3:

• A Crash-Course in Advanced CSS3 Effects
• 5 Techniques to Acquaint You With CSS 3

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

Getting Started With HTML5: Part 1

http://www.devlounge.net/code/getting-started-with-html5-part-1

Konami Code: Overview, Examples and Best Practices

http://www.instantshift.com/2009/08/27/konami-code-overview-examples-and-best-practices/

The 65 Most Annoying things about the Web Today

from http://www.uxbydesign.org/2009/08/13/the-65-most-annoying-things-about-the-web-today/

We’ve come a long way on the web today. Or have we? While we’ve innovated in many areas, we’ve also continued to disregard pre-existing issues. And in some cases, we have also created new ones. Here is my list of the top 65 most annoying things about the web today. They’re in no particular order, but I have organized them into what I consider core groups.

Poor Design

1. Illegible text. I can’t read that, it’s too small. And what on earth is that font called?
2. Busy backgrounds. Oh MySpace, why do you allow users to create profiles like that? My eyes hurt.
3. Obscure links. I’m confused, can I click on that or not? Oh I get it, you don’t want me to view other pages.
4. Flyouts that are too large. Holy crap Yahoo! This is a page within a flyout!
5. Drop-down menu navigation too many levels deep. OK, if I slowly move my mouse this way first… dammit Jim, I’m a doctor not a magician!
6. Complicated navigation. I just want to get to that page, the one over there! Oh I see, you want me to complete the maze first.
7. Abused centerpieces. Aren’t centerpieces supposed to serve as mechanisms for promotion, rather than areas to cram an entire page’s worth of content into itself? Call me an idealist, I guess.
8. Poor navigation labels. Give me a clue and use labels that make sense!
9. Clutter & chaos. With no emphasis or information hierarchy, it’s difficult for me to know what to look at, and what to do next.
10. Ugly WAPs. Many companies treat their WAP sites like a deformed step-child they keep in the basement.
11. Splash screens. Nice, a road block between your user and your home page.

Unfindable Information

1. Dysfunctional site search. (Sigh) Why didn’t this site just use Google?
2. Too many blog categories. Isn’t this what tags were meant for?
3. Contact info. I just want to speak to them on the phone! And when I say “them” i mean a human.
4. Invisible sign in. OK, so I registered, but how do I sign in?
5. Hidden account closure. I guess I’m a member for life now?
6. Unscannable info. I want to quickly know if this article is relevant. But alas, huge paragraphs, long headlines and no subheadings make for an unscannable chunk of data, and an indigestible piece of gristle.

No Content Strategy

1. No focus. Yada, yada, yada. Get to the point, what’s your message and what do you offer?
2. Spelling & grammar. Spelling mistakes are hard to forgive and really hurt credibility.
3. Ineffective product pages: What am I buying? Why should I buy this? Help me understand, and I’ll move down the purchase funnel!
4. Outdated. There’s nothing more thrilling than seeing a blog frozen in time. At some point, a landfill for websites is going to be needed.
5. Small photos. Why would I buy something I cannot see?

Auto-Behavior

1. Auto-playing home page video. Take note ESPN.com: the first thing I do when coming to your site is scramble to find the video pause button. And that’s when I’m surfing from home.
2. Auto browser resizing. And you did that because?
3. Customer service nags. Ironic really. Chat pop-ups appear like genies out of a lamp when I don’t need them.
4. Theme tunes. Got to love that auto-play music, especially when it cycles over and over and over, and over.
5. Auto opt-ins. It seems like an automatic opt-in is a contradiction in terms to me. No I don’t want your newsletter, and if I did, I’d opt-in.

Evil Forms

1. Unreadable captchas. Pure Evil. If I had a brick, why I would…
2. Too many fields. This is utterly exhausting. Oh forget it, I’m going to abandon this form.
3. Cryptic error messaging. OK, so I made a mistake. If you used English, I might be able to fix it.
4. No confirmation. Was I successful or not? I’m looking for anything here, a “thank-you”, a “job well done”, a “good boy”… anything that confirms the form was indeed a submitted form.
5. Too many constraints. I want to add my Canadian zip code, but you’re validating against the US format only!
6. Too small fields. How I’m supposed to enter my street address in that state-sized field?
7. The reset button. Do we really need this? I especially love it when I accidentally press “reset” instead of “submit”. It’s especially satisfying when it’s a long form.

Intrusive Advertising

1. Pop-ups. And that includes those fancy, flashy, moving, hard-to-close ones. Are you serious? This is 2009.
2. Interstitials. Thanks for adding another click and creating a barrier between me and your content! Give me a reason to leave, I dare you.
3. Flyouts via links in content. Oh darn, I didn’t know that was an ad! Thanks for punishing me.
4. Too many Google ads. I know there’s some content around here….
5. Long video pre-rolls. Is this ad ever going to end? Hang on; I forgot what video I clicked on.
6. The bus stop. Home pages that resemble bus stops — flyers, posters, graffiti all shouting at me. Sometimes, I swear I can even smell urine.

Accounts

1. Remembering user names and passwords. Seriously, how many do I need to keep track of? Just give me Facebook connect already!
2. Being forced to register for purchases. I just want to buy it, OK? Forget it, I’m going elsewhere.
3. Forced password reset. I just want to know my password! The one I chose but have forgotten. I know you know.
4. Getting locked out. I get the three-attempts-and-you’re-out idea, but it would be nice to know the rules before hand!
5. Password sent by “snail mail”. I’m not sure whether to laugh or cry. Should I expect a scroll to be delivered and read by a messenger?

Abuse

1. Spam. We still cannot cure this disease?
2. Viruses. If I was a conspiracy theorist, I’d say the anti-virus companies were creating these. You know, supply and demand and all.
3. Phishing. Particularly sneaky; and definitely a step beyond annoying.
4. Trolls on messageboards/blogs. Oh well, that’s life I guess – art imitating life and all.
5. Fake profiles. Am I following the real Steven Hawking on Twitter? It says here he went bowling last night.
6. Facebook app invitations. For the thousandth time, no I do not want to play Mob Wars, and no I don’t want a “pet in an egg” either.

Technology

1. Explorer 6. I speak for all developers here, if there’s a plug attached, please pull it. RIP Explorer 6.
2. Plug-ins. Not only do I have to download another plug-in, I have to keep these things current!
3. Entire sites built in flash. I don’t get it, why?
4. PDF overuse. Why couldn’t this PDF just be a web page?
5. Dell’s Netbook trackpad. Designed to be web browsing device, Dell’s Mini 10 trackpad has a trillion bells and whistles, but cannot fulfill basic tasks like moving the cursor from point A to point B without going to C first.
6. Small netbook screens. While mobile devices have optimized views for their screens, Netbooks and their 9 and 10 inch screens are caught in a weird place.
7. Inconsistent colors. Optimizing colors and contrast across both Macs and PCs is a designers nightmare.
8. Charging for Wi-Fi. Provide it free of charge, and the patrons will come!

Waiting

1. Slow page load. OK that’s it, I’ve been patient and their 3 seconds are up.
2. Comment approval. I thought, I articulated, I commented, I waited. Nothing. That will teach me to contribute.
3. Black-hole between ordering and shipping. I took me 5 minutes to order this laptop, why isn’t it getting shipped? Should I place my order again? Should I cancel this order? What’s the order status?
4. Twitter is down again. I’m starting to think this is a feature. One akin to a long line outside a trendy night club.
5. Customer service. Since I cannot get a human on the phone, a 24 hour response time to my e-mail is not acceptable. Well look at that, I guess you just quantified the value of my business.
6. Submission timers. I saw this really great article! I know, I’ll post it on Reddit. And there’s another one, I’ll post that on Reddit too. What, I have to wait 10 minutes to post another article? That will teach me to contribute.