What is new in CSS3?

Introduction

CSS stands for Cascading Style Sheets, it is a styling sheet which is used for controlling the page layout, design and page content. Using CSS, you can apply different styles via styling properties to the HTML elements for single, multiple elements, whole document or multiple at single time. CSS3 is a latest version of CSS. CSS3 has been split into modules including old specification of CSS and added modules.

Some of CSS3 new modules are:

• Animation
• Backgrounds
• Border images.
• Box-sizing
• Colors
• Fonts
• Flexbox
• Gradients
• Media queries
• Multiple column layout
• Rounded corners
• Shadows
• Text effects
• Transitions
• User interface
• 2D/3D transforms.

New Features in Css3

1. Animations

CSS3 animation allows to change the shape of an element from one style to another and creating a motion of an element. For using CSS3 animation one must define keyframes which specifies or control the style or animation steps in CSS3. Animation property is a shorthand property for all animation properties.

• animation-name: Defines a list of animations and each name is used to select @keyframes rule that provides value for property.
• animation-duration: Indicates the time (seconds or milliseconds) that animation will take to complete a cycle.
• animation-timing-function: Specifies the speed curve of animation i.e. ease, ease-in, ease-out, ease- in-out, linear and cubic Bezier.
• animation-delay: Defines a delay for start of an animation.

• animation-iteration-count: Describes how many numbers an animation should run.
• animation-direction: Specifies the direction of animation i.e. in reverse direction or alternate cycles.
• animation-fill-mode: Specifies a style for an element, when animation is either delayed or finished.
• animation-play-state: Defines whether the animation is playing or paused.

2. Backgrounds

Background property defines how to set the background of various HTML elements using background properties.

• background: It a shorthand property for all background properties.
• background-image: Specifies the multiple images for an element.
• background-clip: Defines the painting area of the background.
• background-size: Specifies the size of the background images.
• background-origin: Indicates the position of the background images.

3. Border Images

This element of CSS3 is used to add image border, to set image as border around some element instead of normal border using border-image. Border-image is a shorthand property for all border image property i.e. border-image-slice, border-image-source, border-image-width, border-image-outset and border-image-repeat.

• border-image: Used as shorthand property for all border-image properties.
• border-image-slice: Used to slice the border-image.
• border-image-source: Specifies the image path.
• border-image-width: Defines the width of the border image.
• border-image-outset: Indicates the amount by which border image expand above border box.
• border-image-repeat: Defines border image as stretched, rounded and repeated.

4. Colors

Unlike CSS, CSS3 support many new color properties like:

• RGBA colors: It stands for Red Green Blue Alpha. RGBA is an extension of old CSS2 RGB color value with alpha. Alpha specifies the opacity of a color and parameter number between 0.0 (fully transparent) to 1.0 (fully opaque).
• HSL colors: It stands for Hue, Saturation and Lightness, Hue indicates a degree on a color wheel (i.e. from 0 to 360), Saturation and lightness are the percentage values (i.e. from 0 to 100%).
• HSLA colors: It stands for Hue, Saturation, Lightness and Alpha, HSL colors is an extension of old CSS2 with Alpha. Alpha specifies the opacity of a color and parameter number between 0.0 (fully transparent) to 1.0 (fully opaque).
• Opacity: It sets the opacity for a whole element. It specifies the parameter number between 0.0 (fully transparent) to 1.0 (fully opaque).

5. Web Fonts

Web fonts allow user to use the fonts that are not installed on their computer. User can add file in CSS3 with @font-face rule.

Different Web font formats are:

• TTF (TrueType Fonts)
• OTF (OpenType Fonts)
• WOFF (The Web Open Font Format)
• SVG fonts/shapes (Scalable Vector Graphics fonts/shapes)
• EOT (Embedded Open Type Fonts)

6. Flexbox

It is a new layout in CSS3, improvement over box-model. Flexbox provides a flexible layout of a page and ensures that when a page layout renders on a different display devices or different screen sizes, it adapts the viewports automatically.

7. Gradients

Gradients is a blend of two or more specified colors. There are two types of gradients in CSS3. Linear gradient (up/down/left/right/diagonally) and radial gradient (defined by their center).

• linear-gradient: Defines the combination of two or more colors in linear manner e.g. from top to bottom.
• radial-gradient: It appears at center or defined by their center.
• repeating-linear-gradient: Used to repeat linear gradients.
• repeating-radial-gradient: Used to repeat radial gradients.

8. Media Queries

Media queries in CSS3 allow to aim device display density and screen size or screen resolution. It means you can use CSS for iPad, tablet, iPhone and can also use to build a responsive website. It simply use @media rule to add CSS. It provides a readymade stylesheet for iPhone and other Android devices.

9. Multi Column Layout

Multi column layout allows to set the text as newspaper structure. Multiple column layout creates number of column within a page using multi column properties.

• column-count: Defines a number of columns that an element should be divided.
• column-fill: Defines how to fill the columns.
• column-gap: Specifies the gap between the columns.
• column-rule: Indicates the number of rules.
• column-rule-color: Specifies the rule color for columns.
• column-rule-style: Describes the style rule for columns.
• column-rule-width: Specifies the width of rule for columns.
• column-span: Defines span between the columns.

10. Rounded Corners

CSS 3 rounded corners is used to create a colored rounded corners to body or text page by using border-radius property. Border-radius property is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius properties.

• border-radius: Defines border radius for all four borders.
• border-top-left-radius: Defines top-left-radius.
• border-top-right-radius: Specifies top-right-radius.
• border-bottom-left-radius: Defines bottom-left-radius.
• border-bottom-right-radius: Specifies bottom-right-radius.

11. Shadows

In CSS3, Shadow allows to add shadow to text or elements. It is divided into two parts text-shadow and box-shadow.

• text-shadow: Used to add one or more shadows to a text both horizontally and vertically. Using this property, you can add color to the shadow and blur effect to the shadow.
• box-shadow: Used to add one or more shadows to an element both horizontally and vertically. Using this property, you can add color or blur effect to the shadow.

12. Text Effects

CSS3 offers many new text features. Some of the features are:

• text-overflow: Defines how to handle the text, that does not fit into its box or text that overflows.
• word-wrap: Describes how to break the long words and wrap them into new or next line.
• word-break: Defines line breaking rules.
• text-align-last: Specifies the alignment of last line of a text.
• text-emphasis: It is a shorthand property for text-emphasis-style and text-emphasis-color.
• text-justify: Indicates how to set alignment and spacing of a justified text.

13. Transitions

CSS3 transition allows to change the value of a property from to another within a given time period. Transition property is a shorthand property for all four transition related properties.

• transition: A shorthand property for all four transition related longhand properties.
• transition-duration: Indicates the time (seconds and milliseconds) that transition will take to complete the effects.
• transition-delay: Defines a delay for a transition effect to start (in seconds or milliseconds).
• transition-timing-function: Defines the speed of a transition effect.
• transition-property: Defines the name of the CSS properties to which transition should be applied.

14. User Interface

CSS3 offers new features which allows to change or resize the elements into standard user interface elements.

• box-sizing: Allows to add padding and border in elements total width and height. Actually width of a box is calculated as sum total of width + padding + border and actual height of a box is calculated as sum total of height + padding + border.
• nav-down: Defines where to navigate, when you have pressed down on arrow button.
• nav-index: Specifies the sequence of navigation order for an element.
• nav-left: Defines where to navigate, when you have pressed on left arrow button.
• nav-right: Specifies where to navigate, when you have pressed on right arrow button.
• nav-up: Indicates where to navigate, when you have pressed on up arrow button in keypad.
• resize: Defines whether the element is resizable or not.
• outline-offset: Used to add space between an outline and border of an element.

15. 2D Transforms

Using 2D transforms, you can change the structure (shape, size and position) of an element like translating, skewing, rotating and scaling. Various methods of 2D transforms are:

1. Translate (x,y): Moves an element from its current position.
2. Rotate (angle): Rotates an element clockwise or counter clockwise.
3. Scale (x,y): Increase or decrease the size of an element.
4. Skew (x,y): Skews an element along x-axis and y-axis on a given angle.
5. Matrix (n,n,n,n,n,n): Combination of all methods mentioned above.

2D transforms properties are:

• transform: It applies 2D or 3D transforms to an element.
• transform-origin: It changes the position of transformed elements.

16. 3D Transforms

Using 3D transforms, you can move element on x-axis, y-axis and on z-axis. Methods used for 3D transforms are:

1. Rotate3D (x,y,z angle): Defines a 3D rotation, allows you to rotate an elements around its x-axis, y-axis and z-axis.
2. Scale3D (x,y,z): Defines 3D scale transformation.
3. Translate3D (x,y,z): Describes a 3D translation.
4. Matrix 3D (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Defines a 3D translation of 4*4 matrix of 16 values.
5. Perspective (n): Specifies a 3D perspective view.

3D transform properties are:

• transform: It applies 2D or 3D transforms to an element.
• transform-origin: It changes the position of transformed elements.
• transform-style: Defines how nested elements are preserved in a 3D space.
• perspective: It provides 3D view and specify how many pixels a 3D element is a placed from a view.
• perspective-origin: Indicates the position of an 3D elements.
• backface-visibility: Defines whether an element should be visible or not, when facing the viewer.

Conclusion

CSS3 is divided into different modules which enables designing to be done in lesser time and supports many browsers. It supports 2D as well 3D transitions, animations, allows use of web fonts with @font-face rule and many more features explained above. CSS3 makes web page look better and reduce the time of development. So you can use CSS3 for your website to take advantage of its new features.