In our daily HTML design,  it is an easy job to horizontally center align an element with known width.<div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>！</div>  .element{width:960px;margin:0 auto;}  The above codes set the width of the div block and horizontally center align it. It's very easy to implement. However, if we have some elements we don;t know their width and we still want to center align them. What should we do? The above code is not useful if we don't know the width before we center...

Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation.I used Chrome's Timeline tab to see the duration of paint events on the page. Before each test I forced a garbage collection and scrolled to the same window position using window.scroll(0, 140). Then I clicked the down arrow i...

Many of us want to add cool features to our websites to make our websites user friendly ad more attractive. Especially in Web2.0 era. Today we are talking about adding speech balloon feature to our webpage so that we can display beautiful help windows while users mouse over some help icons on our page.First, let me introduce one post written by Umar Ashfaq named "How to create a speech balloon with pure CSS". He also explains how this works. You can also refer Magic CSS shape for more information. This is a brilliant idea. He uses the border property to construct the triangle without using any...

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in you...

LESS,SASS and Stylus are more and more popular among developers. More and more people are using these three tools now. Here we introduce some development and testing tools which can make our development process simpler.SublimeTextMany front-end developers are now using Sublime Text 2 as their main text editor, there are many plugins in Sublime Text as well. We can use Ctrl+Shift+P –> install package to search relative plugins.Less SublimeLess build SublimeLess2cssLess snippetsSublime text haml sassSASS-Build-SublimeText2StylusEmmet--Integrated with less、sass、scss etc，...

CSS filter effects in action Ever since CSS filter effects landed in WebKit, I thought about theirs practical implementation. How will they fit with the current web design trends? At this time, my initial impressions are that the best way to showcase the power of CSS filters is something like an image gallery.With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :not selector.View demoWhilst at the beginning we had just WebKit nightlies sup...

As web designers, we all seem obsessed by HTML5 and CSS3 at the moment. Endless posts, tutorials and discussion about them dominate the blogosphere. But how much are we learning that can be applied today?Don’t get me wrong. We all need to understand HTML5 and CSS3. And a lot of it can be used today.My point is that we seem to be spending a disproportionate about of time reading up on the subject when so many other areas deserve our attention.While others are reading yet another tutorial on CSS animation, why not broaden your horizons by researching subjects that will allow you to offer ...

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.View demoHere’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited...