Category: 2. CSS

Creating CSS3 Animations In the previous chapter you’ve seen how to do simple animations like animating a property from one value to another via CSS3 transitions feature. However, the CSS3 transitions provide little control on how the animation progresses over time. The CSS3 animations take it a step further with keyframe-based animations that allow you…

Understanding CSS3 Transitions Normally when the value of a CSS property changes, the rendered result is instantly updated. A common example is changing the background color of a button on mouse hover. In a normal scenario the background color of the button is changes immediately from the old property value to the new property value…

3D Transformation of Elements With CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space. A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements. However, the transformed element still takes space in the…

2D Transformation of Elements With CSS3 2D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a two-dimensional space. A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements. However, the transformed element still takes space in the…

Using CSS3 Drop Shadows The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop without using any images. Prior to CSS3, sliced images are used for creating the shadows around the elements that was quite annoying. The following section will describe you how to apply the shadow…

Handling Text Overflow in CSS3 CSS3 introduced several new property properties for modifing the text contents, however some of these properties are existed from a long time. These properties give you precise control over the rendering of text on the web browser. Hiding Overflow Text Text can overflow, when it is prevented from wrapping, for…

Using CSS3 Gradients The CSS3 gradient feature provides a flexible solution to generate smooth transitions between two or more colors. Earlier, to achieve such effect we had to use the images. Using CSS3 gradients you can reduce the download time and saves the bandwidth usages. The elements with gradients can be scaled up or down…

Using CSS3 Backgrounds The CSS3 provides several new properties to manipulate the background of an element like background clipping, multiple backgrounds, and the option to adjust the background size. The following section will describe you all the new background features of CSS3, for other background related properties please check out the CSS background tutorial. CSS3 background-size Property The background-size property can…

Defining Colors in CSS3 In the previous section you’ve learnt how to define colors using the color keywords and RGB notations. In addition to that CSS3 adds some new functional notations for setting color values for the elements which are rgba(), hsl() and hsla(). In the following section we’ll discuss about these color model one by one. RGBA Color Values…

Using CSS3 Borders The CSS3 provides two new properties for styling the borders of an element in a more elegant way — the border-image property for adding the images to borders, and the border-radius property for making the rounded corners without using any images. The following section will describe you these new border properties of CSS3, for other border…