Wednesday, March 10th, 2010

CSS3 Please! Instant results… Thank You

Category: CSS, Examples


Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

  • border-radius
  • box shadow
  • gradients
  • rgba support in backgrounds
  • transforms
  • font-face

Really nice way to make tweaks inline in the page….. nicely done. Hope to see some other examples out there :)

Posted by Dion Almaer at 8:39 am

3.5 rating from 37 votes


Comments feed TrackBack URI

I knew I should have sped up the development of my version of this! :) I started something very similar last weekend & just didn’t have time to add the live feature. Great job guys!

Comment by randyjensen — March 10, 2010

I can already do this with my Firebug ;)
However, great hob !

Comment by fabienmenager — March 10, 2010

Randy, great one. Yeah I think we were all feeling the need for a tool.

Blepore, good catch. The post says it’s should be fixed by IE8 final, so the issue should be moot, but I’ll switch them anyway. :)

The @font-face declaration is a bit of a hack, but it certainly doesn’t necessitate two rules. On my bulletproof @font-face syntax post I detail how exactly we got there and whats up with compatibility.

Comment by PaulIrish — March 10, 2010

Yes, that’s a cool idea about showing the new CSS3 stuff. Even if I like this stuff coming into the browsers and I appreciate that browser programmers are working on that stuff, this examples shows the mess and some failings of nowadays inter-browser-vendor-communication. CSS3 provides so many new things and all browser vendors start working on that snippets across everywhere, they all work on different constructions. Instead of focussing one, agree with one naming-convention, fixing leaks within the specs, they all show up with different solutions. Hooray :(. Whereas box-shadow and border-radius (IE lacks here) looking pretty consistent and the -browser prefixes could be reduced, others like gradient look different each engine. At what cost? Even browser programmers need to look twice in their code until they could wait for the -browser prefix to be reused. At what cost?

Comment by gossi — March 10, 2010

@randy: nice, but I am missing seeing changes on-the-fly. Also, the fonts are a bit too much :)
@PaulIrish: it would be more usable for my use case if it used a more “traditional” color scheme (black background is exactly the opposite of what I use in 90% of our webites)

Both tools look good, perhaps randy has a more usable interface.

Comment by icoloma — March 12, 2010

Leave a comment

You must be logged in to post a comment.