Wednesday, March 10th, 2010

CSS3 Please! Instant results… Thank You

Category: CSS, Examples

<p>css3please

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 :)

Related Content:

  • Instant grouping!
    I have a table with two columns, C1 and C2. I want to create a report so that on grouping C1 it should retrieve as follows. Please help me with the...
  • E-mail: It's worse than you think
    According to a 2003 study by Meta Group, 80% of businesspeople say e-mail is more essential than the telephone. However, storage managers are...
  • What you need to do for MA 201 CMR 17 compliance
    In this video, expert Richard Mackey outlines the steps that every organization must take to comply with Massachusetts 201 CMR 17 data protection...
  • Mobile IP networks: An overview
    With more people in the workforce moving mobile, thanks to road warriors and telecommuters, the demand for mobile IP is growing. In this chapter...
  • Evaluating communication systems for disaster recovery
    In a disaster, there is no substitute for instant, reliable communications with those who can help. This tip provides a checklist of considerations...

Posted by Dion Almaer at 8:39 am
5 Comments

+++--
3.5 rating from 37 votes

5 Comments »

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!

http://css3generator.com/

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.