CSS3 Innovations鈥擣unky Shapes and Animation
Cascading Style Sheets. Nope, they aren鈥檛 spring-scented laundry implements for removing static cling from your wardrobe. Regularly referred to as CSS, it鈥檚 a long-established, behind-the-screen language used to code the look and formatting of web pages. Most recently, CSS3 has been boosting the power and flexibility of our websites, eye-catchingly visible in various browsers, more than ever before.
If you鈥檙e anything like me, you鈥檝e admired and played around with the results鈥攖hose aforementioned funky shapes and animations it generates鈥攂ut never got too far in examining the voodoo behind it. It all seems so complicated, especially for someone whose job description does not include the acronyms 鈥淗TML,鈥 鈥淴HTML鈥 or even plain old 鈥淴ML.鈥
As the Dana Interactive department evolves over the years, our developers constantly hone their skills and learn new tricks, all rooted in CSS3. They find themselves getting pretty funky with it, always looking for fresh approaches to how we showcase our clients online. This type of work is not for the detail phobic or the faint of technology. Each case is unique, and it鈥檚 crucial to create good designs that employ correct techniques. Still, CSS3 really smoothes the process for them, in the form of what appears to be hieroglyphics to us.
Here we鈥檙e going to give you a glimpse between our sheets to show you some of the popular things CSS3 can do. One peek, and you鈥檒l never take the simplest element on a web page for granted again. We know we鈥檙e in the dog days of summer, so don鈥檛 worry, we鈥檒l keep it easy breezy.
Border Radius
Who knew that programming rounded corners used to be so difficult? Whether you prefer your corners equal or asymmetrical, today, with a few keystrokes, groovy shapes are at our developers鈥 command.
Box Shadows
Think outside the box. Add a little dimension to boxes without using images. Incorporate more, and you鈥檒l up the ante on designer cyber-flair.
Multiple Background Images
Set the stage for a visually creative online experience by placing interesting, relevant images on your page. No muss, no fuss.
Text Shadows
Be textually active. Colorful opportunities abound, thanks to CSS3. But keep it clean. Don鈥檛 go throwing every effect you find into the mix, just because you can.
Custom Web Fonts
Stray from the pre-packaged fonts on your own and your visitors鈥 computers. CSS3 makes it possible to upload all sorts of fancy fonts and ensure they鈥檙e readable.
Gradients
Fun with graphics. Unleash your inner artist with CSS-based gradients. The web page becomes the canvas and lines of code your paint.
See CSS3 in Action
I dug up a clever online CSS3 tool, and I can鈥檛 stop playing around with it. The gives you the chance to pretend you鈥檙e a web-design guru. Pick your favorite features. Plug in some values. Watch your code unfold, and see what you鈥檝e concocted with the instant onscreen demo. But be forewarned. While only an expert can pull it off with flawless functionality, CSS3 sure is addictively amusing for us amateurs.
My advice鈥攍eave it to the pros.
Reach out to Lynn Kaniper at lkaniper@danacommunications.com. He鈥檒l decipher this puzzling programming language and help you produce some funky code of your own.