Amazing CSS3 Techniques That You Probably Don't Know About
WMT Section: Webmaster Tips - WMT Category: Tips for Webmasters
Written by Webmaster-tips.net

Email
amazingcss3tr_hed.png
As a Web designer or developer you’re required to keep up with all of the latest updates. So you probably already know that the latest released version of CSS (CSS3) has really changed the game with tons of new features. 

However, do you know just what amazing things you can do with CSS3? With so many newly added techniques and abilities, it’s rather hard to keep up; you definitely need to know about these amazing features so that you can implement them on your website.

So we’re going to showcase some of the most awesome and amazing CSS3 tricks and techniques out there that you probably don’t know about yet!

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.
image01asdasdadad.png
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!
image04sdasdasdasdasdasd.png
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.
image00_copy_copy.png
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.
image03asdas.png
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.
image05_copy_copy.png
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.
image023e334e.png
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?

Email
 
< Prev   Next >

Social Media Links

rss-cube.png
WMT Rss Feeds
twitter-bird3-square.png
@WMT_Joomla
TwitterCounter for @wmt_joomla
mail-square.png WMT Newsletter newsletterkaofeed123.png  
Advertisement

Joomla Templates

Advertisement

Webmaster-tips Useful Resources - Hosting

Researching the top hosting providers for your new website? Try webhostingreviewboard.com's comparison charts.
Recommendation to newbies: Always start small and get a shared hosting first if you are new. Have a look at iPage shared hosting service to begin.
Best shared hosting to support your website.

Webmaster-Tips

Contact Us!
Site Map

Write for webmaster-tips.net

Do you have any Joomla custom work either on template, component, module or plugin to show off?
Or do you offer free tips and resources for webmasters?

Submit News to WMT...

About Webmaster-tips.net

Webmaster-tips.net is a Joomla CMS related portal that publishes authentic Joomla Extensions, tips and resources for webmasters. Follow wmt_joomla on Twitter
Joomla Components | Joomla Modules | Joomla Plugins | Joomla Templates | Flash Stuff | Icons | Graphics | Wallpapers
Copyright © 2006 - 2014 Webmaster-Tips.net. All Rights Reserved.