Tag Archives: CSS3

What is New in CSS3

Border radius

What is CSS?

CSS stands for Cascading Style Sheet which is a style sheet language applied to change the presentation or look and formatting of a web page written in HTML or XML. CSS uses easy to understand English words for different style properties. CSS can be considered as a list of rules and each of the rules contains one or more selectors.

What is CSS3?

CSS3 is the most recent version of CSS which is completely backwards compatible that means all the browsers support the previous versions of CSS.  CSS3 was created to make Web designer’s life easier but it became a much discussed topic for a while since most browsers did not support it. However, trends have been changed rapidly in web technology and all browser designers presently are including complete CSS3 support in the browsers. Now all the modern browsers including Google Chrome, Firefox, Safari, Opera Mini and latest version of Internet explorer support CSS3. CSS3 comes with a lot of awesome new features and excitements. Today we will discuss about some exiting new features that are included in CSS3.

CSS3 Module: Unlike the prior versions of CSS, CSS3 has divided the specification into small “modules”. Every module either represents the new functionality or modifications to the earlier specification.

There are more than 50 CSS modules are available. Some of the most important modules are Selectors, Box Model, Text Effects, Background and Borders, Image Values and Replaced Content, 2D/3D Transformations, Multiple Column Layout, Animations, User Interface etc.

CSS3 Borders: With CSS3, you can easily add rounded borders to any HTML element. You can also give shadows to the boxes, and use images as a border – without having any design program, like Photoshop or illustrator.

There are three border properties are available in CSS3, They are:

border-radius: Used to make rounded corners

moz-border-radius

box-shadow: used to add shadows to different elements

css3 box shadow

border-image: With border-image property you can easily use an image as a border of the boxes

CSS3 Animations: Using this feature, you can animate most of the HTML elements without any help of Flash or JavaScript! CSS animation is supported by majority of the browsers, even in Internet Explorer (since version 10). You will find two techniques to make CSS3 animations. The first method is relatively simple; it is performed via animating CSS properties with the transition effect. Using transitions, you can make hover or mouse down effects. You can also bring in the animation by altering the style of the HTML element using JavaScript.

The second method of creating animations is a little bit difficult – it entails the outline of particular times of the animation with the @keyframes rule. Keyframes maintain what styles the HTML element will have at particular times.

Calculating Values With calc(): This is another cool feature of CSS3 that allows web developers to perform basic math calculations in CSS. This feature can be used anywhere when a length, size, angel, percentage or pixels is needed.

CSS3 gradients: CSS3 gradients allow you to show simple transitions among two or more specific colors. Previously, we needed to use images to bring in this kind of effects. But, by applying CSS3 gradients we can easily minimize the downloading time and the usage of bandwidth. Additionally, if you zoom any element it looks much better if you use CSS3 gradient

There are two kinds of gradients in CSS3: Linear Gradients and Radial Gradients.