CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since 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. Let’s look at a couple of quick, simple, cheezy examples.
Growing Links
Scaling an element is really fun any easy with CSS3. We don’t need CSS3 to do this, we could use relative positioning, offset the position, increase the width, height, and font size. But wow, that’s a heck of a lot of work when we can just apply a scale factor and be done with it. These links get their corners more rounded and a bit of a drop shadow applied on hover as well.
.grower {
display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;
background: rgba(237,95,0,0.3);
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.grower:hover {
background: rgba(237,95,0,1.0);
border-color: rgba(237,95,0,1.0);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Blurred Edges
Using multiple shadows behind slightly transparent text can blurs the edges of text without the need of any images. A transition can fade the text out, track out the letters, and change the font size as well.
h3 {
height: 100px;
font: bold 80px Helvetica, Sans-Serif;
color: black; /* fallback */
color: rgba(0,0,0,0.2);
text-shadow:
0 0 2px rgba(0,0,0,0.2),
0 0 4px rgba(0,0,0,0.2),
0 0 6px rgba(0,0,0,0.2);
-webkit-transition: all 0.2s linear;
}
h3:hover {
color: rgba(28, 28, 28, 0.2);
opacity: 0.8;
letter-spacing: 15px;
font-size: 70px;
}
Elliptical Rounding
The poster child for progressive enhancement is border-radius. But did you know you don’t have to create perfectly circular rounded corners? We’ll create an oval here and give ‘er a spin just for fun (WebKit only… Mozilla has syntax for transitions but isn’t doing them yet).
.oval {
background: #fe4902;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 auto;
/* Notice the slightly different syntax */
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px 50px;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear; /* non functional just yet */
}
.oval:hover {
-webkit-transform: rotate(720deg);
}
Multiple Backgrounds
If more widely supported, multiple backgrounds would be amazing timesavers. Alas, we can only use them for optional subtle enhancements now, where a fallback of nothing at all is acceptable.
body {
background:
url(../images/top-right.png) top right fixed no-repeat,
url(../images/top-left.png) top left fixed no-repeat,
url(../images/bot-left.png) bottom left fixed no-repeat,
url(../images/bot-right.png) bottom right fixed no-repeat;
background-color: #2f2626;
}
Hey Chris!
awesome as every time. i really like the ghost font ^^ too sad that helloween is already over!
greetz from germany
timo
Very cool. Always essential to have fallbacks, but I think I’ll be trying some of these little tricks out.
Can’t everyone just upgrade their browsers, though?
sorry these effect are work working in IE 8….but looks awesome in gecko browsers :)
That’s the point, fallbacks for browsers like IE.
haha!
Hey Chris, thanks for the post – CSS3 is looking like it’s going to rock! As ever a shame about the necessary fallbacks but hey IE users just have to be catered for don’t they… do they? Nah, they should just use better browsers! Regards from a Brit in France.
Steve.
great post. How I long for multiple background support
Excellent article once again Chris.
CSS3 is gonna be awesome to play with when the time comes…
Hey Chris, nice article!
I can’t wait for CSS3 to become more widely supported (like a kid looking forward to Christmas when it’s still only January!)
I seriously cannot wait for CSS3 to be in full effect. This is going to make web development that much more fun!
Nice article, but I’d very much suggest that you first use standard CSS, and then browser vendor prefixes (-moz, -webkit, -o, -ms). As more browsers implements border-radius, and Gecko and Webkit drops their specific prefixes, your stylesheets should be future proof. This especially applies when writing example articles like this that people might copy/paste.
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
Is the way I’d suggest.
Is the a browser that is supporting just “border-radius”? As soon as there is ONE I’ll start doing that.
1. imagine you have 20x projects running that uses probably CSS3 related stuff. Would you change by every of them to use standard ways? I don’t think so, if you have a good manegment system /that takes care about CSS3 properties/ probably, but I guess you don’t have one.
2. as browsers are updated almost daily basis you can’t say when will this happen
r. Sandor
Future proofing is definitely a good way to go…
You could prepare your browser-specific CSS with a comment like:
/* REMOVE LINE BELOW */
Then search through the CSS files for “REMOVE”, then remove the line below (and the comment).
Planning ahead is a good thing.
Very nice article! I think things would be much easier and coding funnier if we had rounded corners fully supported.
Great post.
I’ve been looking into CSS3 loads recently and being able to visualise how the features look in older browsers is a great help!
Thanks very much
Great post and will try these on my current project.
Really awesome work you do.
beatuiful and inspire for me
Why don’t you use -o-transition for Opera? BTW, I really like Growing Links! Awesome.
thanks for this great tricks.
Wow! Love the growing links! I’ve been using CSS3 (corners/drop shadows) for a few months, but nothing quite so cool as the growing links. And all w/o javascript. Awesome!
I love the pop up drop down selections, in fact I stumbled across it quite by accident. Ended up using it on a site I completed recently:
http://www.allamericansupercarwash.com/
Very fun :D
hey, niiice article i have 2 say
Unfortunately, using CSS3 properties can invalidate your code.
I fully support progressive enhancement techniques, so if this is a concern, I would suggest for the interim moving your enhanced properties out to a separate CSS file. This way, your main stylesheet will remain valid for the current CSS implementation.
Name the extra stylesheet something like “enhanced.css” so that it will be obvious to whomever is checking that validity of the CSS that these styles are more advanced and may contain progressive properties.
I love that using it invalidates the CSS. Seriously, who is validating CSS? Who cares? It may be useful for discovering syntax errors, but that’s about the only reason I can think of.
You will just have to validate as CSS3 and you’re fine. Proprietary extensions are valid if prefixed properly (-moz etc) afaik.
Actually, vendor-specific extensions ARE invalid including when given the prefix(es), per the CSS2.1 spec – try the validitor yourself to see).
So until the validator is updated in some way to handle these extensions, I agree with Neil that you can put vendor-specific rules in a separate stylesheet to keep your main CSS valid. But just to qualify: in my opinion, this level of CSS validation is only important for the QA process… CSS validation is not so much a badge of honor, but a tool.
Does safari support CSS3? I would love to use this but considering a lot of my customers use IE then theres no point for the time being (this makes me sad) I wouldn’t be suprised if IE couldn’t support CSS3 for a long while yet. Reasons unknown. Wouldn’t it be great if IE just bought the rights to use the engine from firefox, what a beautiful web design world that would be! Great post though, will deff keep my eyes and ears open to it being used across multi platforms :]
Safari is leading the pack.
And also remember that a browsers isn’t just CSS3 compatible or not. CSS3 is comprised of a lot of little parts that are rolling out over time in different browsers.
The drop shadow effect is the one id most welcome for multi platform availability. Fed up of having to use images for links or nice text with shadows. Is there anything else that can be used for this effect that will keep the SEO strong?
Everyone who is saying “CSS3 will be awesome when the time comes” and “I can’t wait to use these things”: WAKE UP.
These properties can be used NOW. The whole point of Chris’s article was how do you make sure crappy browsers (e.g. Internet Explorer) will still render things at an acceptable level, but give people with good browsers an extra treat? Using progressive enhancement, that’s how.
So come out from under your rock, stop worrying that your design won’t look the exact same in every browser ever made, and start progressively enhancing your sites.
/rant
Best. Comment. Ever.
Great post! Can’t wait to start messing with it. Thank you!
there is always “good old” JQ.
Very nice effect. But the very old problem – Internet Explorer! I’d like to use these effect in my website, but IE doesn’t support (or less support) for CSS3. Can you make this works in IE 6+ using JS (like jQuery) please? That will be a complete guide :)
Love the post. Keep them coming :)
Does Opera support any of these CSS3 features?
Opera supports “zoom” css property. Can we use that to achieve Growing Links effect?
Very nice. As always your posts always have valuable quality information. Awesome.
This 3d thing is very new to me. I like the neat effects, especially the blur one :D
Really good. Thank you.
Growing Links do not work in IE6 ,7,8.neither border ,nor backgrond-color.As well as Blurred Edges also work bad in IEs.
Great post, Linked from my site WebDesignExpert.Me
Very good post. I like it. Though I don’t think that we should use CSS 3 right now as it is not official yet and is not supported by internet explorer.
Once it becomes official then I would like to use it.
One thing- the browser vendor prefixes should go and there should only be one rule for every browser.
loving it! css-tricks is such a great resource for learning and staying up to date with what’s going on in css. in many cases allowing you to stay ahead of the pack as well.
one fear i had when i was starting to learn web design, was that by the time i got a grip on the basics, that what i had learnt might be out of date and i would constantly be dragging behind, trying to play catch up.
luckily i stumbled across this website and since then have felt like i am right there with the rest of the runners!!!!
thanks for these tricks, i like making my sites interactive and these nice little tricks definitely look sweet when you roll over them.
also really appreciating “digging in to wordpress” as well.
Unfortunately IE doesn’t want to work with this. There are lots of differences in interpretation for CSS2 still, so will takes years till everything will be fine between IE and CSS3. Or maybe IE will just die as all of us want :)
God, I can’t wait until CSS3. And I detest IE; I’m glad that users in Europe at least will be allowed to choose. I wish that we could have a similar monopoly-breaker over here.
Fall-back looks seriously cool; I just hope that all browsers start adopting the border-radius property here soon so that we can stop “hacking” to get nice, rounded corners.
Here, here! I am exasperated by this on a daily basis. I understand the reasons, but it still seems absurd to me that we don’t yet have this universally supported.
border-radius is probably the most overhyped property I have ever seen, its application is moribund at best…
Check out: http://www.uiandus.com/imported-20091116110904/2009/7/26/realizations-of-rounded-rectangles.html
Particularly the paragraph:
Time for an expert: I asked Professor Jürg Nänni, author of the exemplary Visual Perception, a book detailing our best-to-date scientific understanding of the processes involved in visual cognition. “Could rounded rectangles actually take less effort to see?”
Nänni confirmed my theory: “You are absolutely right. A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”
Interesting article Chris.
If it exists then use the official CSS3 declarations.
If only for future proofing.
Though perhaps the declaration should be stated last not first.
Maybe the article should include IE fall-backs too?
Have you considered zoom for transition, and filters for blurred edges?
I’ll be happy when IE 9 is released. Although when you’re in the web business you’re not quite as worried about all the fanciness being seen on your personal site. At least I’m not. Don’t get me wrong, it still has to look good.
I will be happy when IE 6 is destroyed, been the bain of my life for a while!!!