Awesome New CSS3 Features

If you’ve discovered some new CSS3 features and are craving to know how to use them, you can, but only if you have browser capability of IE 9 or above. Latest browsers are compatible with some of the new features, and you can now use them.

css 3

So, here is what the new browsers can enable you to use:

  • CSS Animations and Transitions

With new features you can make CSS animations in IE 10 in two ways. First, you can create animations by changing the CSS properties by declaring transition, enabling you to create hover or mouse down effects. You can also create animation by changing element style with Java Script. Another way to define animations is by describing those specific points in the animation with the @keyframe rule. Animations can be automatically repeated without you having to repeat the process every time.

·         Calculating Values With calc()

You can apply the calc() function in the new CSS feature for simple arithmetic, in any length or size. More so, it also allows freely mixing different units, viz. percentages, pixels, etc. rendering earlier layout hacks redundant. All of this works in IE9 and higher.

·         Advanced Selectors

You no longer need to assign IDs to elements for styling them. New selectors in CSS 2.1 and CSS3 enable you to cleanup layouts, and make your stylesheets more powerful. This is supported in all major browsers starting IE9 upwards.

·         Generated Content and Counters

Generated content is supported everywhere, starting from IE9 up, and uses less HTML to develop the same layouts, a resourceful tool for developers, through ::before and ::after pseudo elements. It is very handy when extra box shadows or other visual elements are required which would otherwise require extra spans or divs. This way a smaller and better semantic HTML is achieved. Pseudo Elements gives access to counters with CSS3, with increment from a CSS rule. Attributes from the parent elements can also be accessed.

·         Gradients

You can effect smoother transitions between colors without resorting to images, Linear or radial, and repeatable. Gradients enable web designs to be more creative, also appearing pleasing on retina displays. After some minor modifications Gradients are now available about everywhere.

·         Webfonts

Gone are the limitations of having only a few “web-safe” fonts. Now by including a stylesheet in your page you can embed beautiful fonts from Google Fonts, Typekit and even Fontawesome. This is possible by @font-face rule, so you can define name, characteristics and fonts source files which can be later referred in the font/font-family declarations. Webfonts can be made to work even on older browsers viz. IE6.

·         Box Sizing

The main problem for CSS beginners is the box model. With standardization bodies it is restrictive to have the CSS width and height of an element affected by its padding and borders. Now by using the box-sizing rule, setting it to border-box makes elements behave as deired.

·         Border Images

The border-image property, in a single image (sprite), enables displaying custom designed borders around elements. Borders can be made to correspond with each region of an image in a different part of the border.

·         Media Queries

Contemporary web design practice mandates using Media Queries for changing websites. Now websites can be designed to be responsive and adaptable to the type of device, orientation and resolution. All that is required is to enclose CSS styles in a block guarded by a @media rule. The media query can incorporate checks for the device resolution and orientation, color depth, pixel density and more.

·         Multiple Backgrounds

Designing for interesting effects, different images can be stacked as backgrounds of the same element, each being movable and animated independently.

·         CSS Columns

Involving use of JavaScript or server-side processing that splits the content into different elements, Column-based layouts were difficult in CSS. Now using the CSS columns rule makes life much easier.

·         CSS 3D Trans

This feature offers web developers powerful tools for impressive results.

Jim Raymond is a specialist in web design and development. He is a popular contributor to many leading IT journals across the country, writing on a wide array of subjects in his field. Visit our site for more information.

About Navin

Navin is technology addicted guy. He is interested in IM, WordPress, SEO, Blogging abd Internet marketing.

Navin has written 82 awesome articles for us.

Comments

  1. Thank you very much for sharing a nice post. Before coming to CSS HTML and HTML5 is necessary. Every element of HTML5 is represented in DOM for browsers. HTML5 and CSS3 can create an wonderful website. HTML tag called as canvas which is used for graphic representation. CSS along with Java Script can help to reduce load time of a web page. For responsive web design CSS tags are really important as it creates style sheets which are used for formatting and it is search engine friendly.

  2. I am agreed with some points of Mathew as well. CSS3 is one of the important formatting languages. CSS3 helps a lot in creating a website. For responsive web design we need follow CSS3 rules and features. I have seen that you have discussed most useful points. Nice to see an article on features of CSS3. I like to read posts on web site design. CSS plays important role in making website innovative and search engine friendly. Thank you very much for interesting and most useful tips on CSS3. Nice to read your post.

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Speak Your Mind

*

CommentLuv badge

Previous Post:
Next Post: