Douglas Marketing Group Logo

More CSS3 Please!

  • January 3rd, 2013 at 7:06 pm
  • |
  • Andrew Siracki
  • |
  • No Comments

Websites of today contain a lot of user interactivity. A tool to keep the user on your website for more than 20 seconds and to give them what they’re looking for at the same time. For someone who is a web designer the ideas and designs are limitless. There are no boundaries to those ideas and no limits to what you can do or what you think you can do. As a web developer/coder there are limits and boundaries, not to what you can do but to how you can do it. Tools such as jQuery, Javascript, CSS, and Flash have all been around to help developers achieve the look and feel that designers want.

For sometime user interaction with websites was limited to Flash. Flash was the standard in objects moving, users clicking buttons, forms filling automatically, sprites/icons moving across the page etc. Now, we have CSS3 and jQuery, which are taking over when it comes to user interactivity. Both combined have the ability to do everything Flash can do but more efficiently.

There are still some slight limitations to jQuery as well as Flash. If a user has them turned off in their browser or not installed, then the animations/interactions won’t work. This is where CSS3 comes in. All websites have some type of CSS controlling them, whether it’s changing the colors, changing the font size, positioning elements, positioning buttons, or the customization of forms. Where tables once ruled CSS has now taken over to limit the code one views and to have one centralized area that controls the entire framework of a website.

CSS3 is considered the new guy on the block for some and the new web standard for others. It is revolutionizing what the web can do. It can do everything jQuery can do but it keeps it in one style sheet. There is no need to load multiple files in a header, just one. CSS3 now allows us to re-create what designers do with images but now only with code. Want that cool gradient that only Photoshop could create? What about rounded corners? How about shadows behind text or boxes or images? How about layered text? It can even do media queries allowing you to create responsive websites! The list of cool things CSS3 can do is huge and these few listed here only begin to scratch the surface.

The unfortunate part regarding CSS3 is the browser support mentioned earlier. Most browsers have adopted the CSS3 structure and coding queries, however, Internet Explorer is still lagging behind. Chrome, FireFox, and Safari all continue to evolve and adopt the new techniques to make web building slightly easier, but IE is there to make things extremely hard. I have to admit though, Internet Explorer’s latest version IE10 may finally be taking strides in the right direction. Most versions of Internet Explorer use CSS2 standards and only some CSS3 standards. Because of this, we must make use of IE-only code or resort to using some combination of CSS2+jQuery+Javascript to get our desired result.

As a web programmer you always have to be on top of your game and always be willing to learn the “new” way to do things. Even though Internet Explorer is taking its time to catch up to the CSS3 standards, it’s still a good idea to start using some CSS3 in your new websites. I know I am!

Some examples of just CSS animations (Keep in mind that some of these only work on WebKit broswers such as; Google Chrome, Safari, and Firefox).

Text Shadow Spotlight
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

Colorful Clock
http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

Sliding Vinyl
http://www.zurb.com/playground/sliding-vinyl

Pure CSS at-at Walker
http://anthonycalzadilla.com/css3-ATAT/index-bones.html

Original Hover
http://tympanus.net/Tutorials/OriginalHoverEffects/

There are also some really cool frameworks that you can download FREE and use in your personal or commercial projects. As mentioned in the link CSS frameworks are there to help make things easier and using a framework is always a good idea if it achieves a desired goal.

http://learnlayout.com/frameworks.html

Andrew Siracki

About Andrew Siracki

Andrew is our Director of Web Development was recruited by DMG for his unique ability to manifest a client’s vision into reality, through the collaboration of ideas in web development and design.

Leave a Reply

Your email address will not be published. Required fields are marked *