If your website does not using responsive web design, you may have an issue that the browser will automatically zoom in the text. Usually, it is convenient to user if the text is too small to read. However, sometimes the text zooming may break your design and make it ugly, in this way, we will want to disable the text zooming.

I think you may tried text-size-adjust: none before come into this page, actully, this property was already removed from Chrome 30. To disable text zoom, you can add the following line in your CSS:

html * {max-height:1000000px;}

Using CSS and a noise image to make a noise background
To make a image with noise pattern, we always directly using a png image to do so. However, if we have different color of noise background and want to have different opacity, we should make much more image. Here introduce a method that allow you to make a noise background with numerous different color which just use one image.

Firstly, we should create a background with some noise. Than apply a background color on it. CSS code as below:

background: url(noise.png) #F00

We have now made a red background with noise. If you need a transparent background, than we can use rgba instead:

background: url(noise.png) rgba(255,0,0,0.5)

This created a red noise background with opacity 50%
As lower version IE doesn't support rgba setting, so we need to do more:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AAFF0000', endColorstr='#AAFF0000');

On the above case, #AAFF0000, FF0000 is the color code and AA represent the transparent gradient which FF means opaque and 00 means full transparent. Note that if rgba and the filter exists together, the noise will not work, so we would need to use CSS hack to handle different case, the full supported code as below  

background: url(noise.png) rgba(255,0,0,0.5);
background: url(noise.png) transparent \\\\9;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#77FF0000', endColorstr='#77FF0000');

Below is an example:

With the growth of web 2.0, we got to use ajax much more than the past. To make ajax content loading, we always need to use loading img to cache the interval while loading, we mostly use image display the loading message, but nowaday, you have another choice.

By use of the animation and transform attribute, we can easily make a loading display with CSS3, below is the example

Share an excellent site that teach you how to create an triangle element with pure CSS only.

http://apps.eky.hk/css-triangle-generator/

I have seem a flip page effect in the dashboard of Joomla some month before, I was surprised on such effect, it was amazing and wonderful. In the first time I considered this was made by Javascript, but no idea on how to do this. My colleage using half day to investigate but still not success to get the result.

Today, when I am daydreaming, suddenly thing about this effect and consider it with CSS3, it should be made by CSS3 transition animation. I immediately try to do this and finally I get the following result ( Please use firefox or chrome )

The css code is as following: