Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is:@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}Now we are entering the modern web browser age, the WOFF format of font is supported extensively, so now we usually...

Each website has a color scheme which identifies itself. By looking at one color, we can know which website it is for. These color schemes can be identified from their logos, nav-bars, background etc. We collect some color schemes for some famous Chinese websites.Alibaba (#f90) Baidu (#0000cc) Huawei (#e30a12) HTC (#69b40f) JD (#c91623) Renren (#105ba3) Sina (#e4351e) Sohu (#fdd000) Taobao (#ff4400) Tencent (#0397de) Tmall (#b10000) WeChat (#5ba607) Xiami (#f39200) Zhihu (#0078d8) 163 (#333) 36Kr (#146fb9) 360 (#48...

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...

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，...

When using CSS to set the position of DIV, we may often get confused with the 4 position properties : static, relative, absolute and fixed. If we don't understand them correctly, we may often get unexpected result. Here we make some analysis to them.The definitions of these 4 properties:static : The default position property. It has no position actually. The element will appear where it should be (top, bottom, left, right or z-index has no use here)relative : This one will position relative its normal position. We can use top, bottom, left and right to position relative to its normal position....

Sass is one kind of CSS Preprocessor, it can make CSS development simple and maintainable. But to show its real power we may need to have Compass.This article is to introduce Compass. Once you learn Compass, your CSS development efficiency will be largely improved.Here we assume you have mastered the major uses of CSS, if you know Sass, then it's better. It's still ok if you don't know Sass.1. What is Compass?In simple, Compass it the toolkit of Sass.Sass itself is only a compiler, Compass encapsulates some templates and modules based on Sass. The relationship between Sass and Compass is simil...

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...

If you learned CSS before, you should know that CSS is not a programming language. You can use it to design webpage style, but you cannot use it for programming, i.e, CSS is what designer uses, not what programmer uses. Programmer may think that CSS is very troublesome, it has no variables, no conditional statements, it just allows line-by-line description of HTML elementsLuckily, CSS preprocessor appear which makes CSS programmable. The general idea of CSS preprocessor is using a programming language to design the website style, and then convert it to CSS files.Among different CSS preprocesso...