CSS3 Instead of Images and Flash

CSS3 Instead of Images and Flash

Why do we at MODassic Marketing prefer CSS3 over images and flash?

The answer is easy: “faster loading times and support for mobile devices”. A web browser takes less time loading a stylesheet with CSS code than loading graphics and mobile devices can view CSS3 animations but not Flash animations.

WHAT IS CSS AND CSS3?

CSS (Cascading Style Sheets) is a stylesheet language used to define the look and format of a website. It’s the colors, layout and style of the site whereas the HTML markup is the structure and content. It’s what makes your site look good. CSS3 is simply the third level of CSS. Drafts of CSS3 were first published in 1999 and became W3C recommended in 2011.

WHAT MAKES CSS3 STAND OUT FROM CSS AND CSS2?

CSS3 also has the ability to create animations, 3D effects and much more. Agencies can develop websites with animations without using Flash, that means if users visit websites with their tablet or mobile phone they will be able to see the animations. This is a must in today’s mobile world!

CSS BUTTONS INSTEAD OF IMAGES

Traditionally, to create a good looking button you had to create the graphic in photoshop and upload the button image to your website. However, these images can slow down your site, aren’t indexable by search engines and are difficult to update. With CSS3, a good CSS developer/designer can turn any graphic (like a button) into a great looking CSS3 object.

1. BUTTON GRAPHIC

 

This button is simply an graphic. The pro about a button graphic is that every browser will render the graphic the same way so it’s cross browser compatible. However, search engines like Google won’t be able to read the text inside the button and images can slow down your site. Also, small changes such as changing the color of the button or changing the text inside of it become difficult. To change a button that is an image requires finding and opening the original psd file in Photoshop, changing the color or text and exporting and re-uploading the new graphic.

2. CSS3 BUTTON

 

This button is created purely with CSS code, no graphics. With a CSS3 button you can quickly and easily change the color and text inside of the button just by editing a couple of lines of code. Also search engines like Google are able to read the text inside the button – that will cause that your site will rank better in search results and it loads much faster. Also, those with disabilities can use software to make their computer read hard coded text which wouldn’t be possible if the text was embedded in a flattened image.

3. IE BUTTON

 

It should be noted that there are subtle difference in how browsers render CSS3 code. For example, Apple’s Safari browser renders shadows slightly differently than Mozilla’s Firefox would. And there’s is every developer’s nightmare, Microsoft’s Internet Explorer, which doesn’t support CSS3 until version 9. But be aware that version IE9 is not available for operating systems older than Windows 7 and most CSS3 properties won’t be available until version 10. On the other hand Firefox, Safari, Chrome and Opera are available for Windows OS users and support CSS3.

WHICH BROWSERS SUPPORT CSS3?

 

For more specific browser support information, please visit: WC3 Schools CSS3 Browser Support.

CSS3 PROPERTIES

 

For more specific browser support information, please visit: WC3 Schools CSS3 Browser Support.