5 Really Awesome CSS3 Tricks
“WordPress Website Builder” takes you through 5 very cool CSS3 tricks that you’ve probably never even heard of! You can find coding examples for each trick on their website.
The HSLA Colors feature allows you to tweak your Web page colors to the max by manipulating the HSLA values individually. HSLA stands for hue, saturation, light, and alpha. This feature works in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ and IE9.
Box Rotation is a 2D transform feature that lets you play with your DIVs; you’ll be able to scale, skew, and rotate them all via CSS. This feature works in Google Chrome, Safari, Firefox 3.5+, IE9, and Opera 10.5.
Transitions is an awesome feature that lets you add special affects to your page elements. This is something that at one time was only possible via Flash and JavaScript. This feature works in Google Chrome, Safari, Firefox 4, and Opera 10.5.
Text Select Color lets you change the highlight color of text whenever it is selected/highlighted on your website. This feature works in Google Chrome 2+, Safari 3.1+, Firefox 3.5+, Opera 9.5+, and IE9.
Reflections does just that: it lets you add reflections to your page elements such as images. Unfortunately, for now this feature only works in Chrome and Safari.
Animated Buttons
You may think that buttons can only be animated via JavaScript, but did you know that you can now also animate them with CSS3? Well, you can and it’s pretty simple too!
The blog “PremiumCoding” takes you through the steps of designing a button with rounded borders and shadows, and then adding the CSS code required to animate the button with mouse hover effects. This means that when you move your mouse over the button, you’ll immediately see the animation effects.
All of the required coding along with live demos can be found on their website. While the examples are simple effects, with some extensive CSS knowledge you can design some really advanced and creative animated buttons.
Pixel Perfect Subscription Box
This tutorial from “CreativityDen” will teach you how to create a stylish subscription box for your website, using simple HTML markup and a few advanced CSS3 properties.
As you can see, this subscription box gives you the illusion that it was created entirely in Photoshop, yet it is created entirely with HTML and CSS. This is definitely an amazing and impressive addition to any website.
You can find the HTML needed to create the actual subscription box and CSS used to style it all on the website. The subscription box includes a nice solid border, text shadow on the header, a background gradient, and a nice button with a shadow and hover state gradient.
Color Changing Website
This is a fun technique showcased on “Design Shack,” which shows you how to use CSS3 to change the colors of your Web page text, links, and background on mouseover. Hovering your mouse over the links will trigger another color transition as well.
You’ll start with a basic XHTML page with a background, text, and links and then use CSS transitions to change them whenever a mouse is moved over that area. The demo will give you a great idea of how this CSS3 trick works: you’ll go from the top section (in the above image) to the bottom section (on mouse over).
While the process may seem rather long and complex, the outcome is well worth it and pretty amazing. This is a great and creative way to showcase or highlight a small section your website or even an entire page.
Sexy Image Hover Effects
Image hover effects have always been nice, but not until CSS3 have you been able to create such stylish and advanced effects. With this short tutorial from “Nikesh.me” you can create image hover effects like those made with Flash and JavaScript, with just CSS.
All it takes is a small snippet of HTML and hover masks created with CSS; the final result is quite breathtaking. This technique is great for those who have image galleries or a portfolio page on their website.
It not only saves time by letting users see a larger view just by moving their mouse over the image, but it does it beautifully. You’re definitely not going to find this feature on very many websites!
Quickie CSS3 Tricks and Fallbacks
Finally we have a set of CSS3 tricks from “CSS-Tricks” that will blow your visitors minds! As the website warns, “the most cutting edge techniques are fun to play with, but since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling.” So along with the CSS3 techniques, it will show you the “fallback” version, which will be used in browsers that don’t support that CSS3 feature.
You’ll learn how to create Growing Links by applying a scale factor to your links. As you’ll see in the example above, the “growing” link will have a different background color, rounded corners, and a drop shadow upon mouseover.
You’ll learn how to create Blurred Edges by creating multiple shadows behind partially transparent text. Mouseover transitions like fading, tracking in/out, and scaling to larger/smaller can also be added.
With the Elliptical Rounding feature you’ll learn how to create a simple oval with rounded corners solely via CSS. The tutorial also shows you how to add a mouseover spin to the oval just for fun.
Finally the Multiple Backgrounds trick is sure to be useful for all because it lets you use more than one image as your background. For instance, in the tutorial you’ll see there are background images for: top right, top left, bottom left, and bottom right. All four backgrounds together make up one interesting piece that looks like a single background!
Be sure to check out the demo page for the final result of all features.
Added Bonus
As an added bonus to all of these amazing CSS tricks, check out 3D Transforms on “Surfin’ Safari” for a wild CSS3 technique. I bet you didn’t know that you could create 3D transformations such as spinning cubes and images that flip from to back purely with CSS! Well, you can and this complex tutorial will take you through the steps.
As more browsers begin to support all of these amazing features, the possibilities for Web designers and developers will be practically endless! It’s only a matter of time before CSS3 is fully supported and the creative juices are let loose on the web!
What’s your favorite CSS3 technique?