CSS3 MEDIA QUERIES

Media queries allow you to customize the presentation of your web pages for a specific range of devices like mobile phones, tablets, desktops, etc. without any change in markups. A media query consists of a media type and zero or more expressions that match the type and conditions of a particular media features such as

Categories: CSS

CSS3 BOX SIZING

Redefining Box Width with Box-Sizing By default, the actual width or height of an element’s box visible/rendered on a web page depends on its width or height, padding and border property. For example, if you apply some padding and border on a <div> element with 100% width the horizontal scrollbar will appear, as you can see in the example below. This is very common problem that web designers are facing

Categories: CSS

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 to specify the

Categories: CSS

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 when you place

Categories: CSS

CSS3 3D TRANSFORMS

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 layout at its default

Categories: CSS

CSS3 2D TRANSFORMS

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 layout at its default

Categories: CSS

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 on text and elements.

Categories: CSS