• 201012 Mar

    This week has seen the announcement of a couple of new online tools for generating cross-browser CSS3 rules, CSS3 Please! and CSS3 Generator.

    CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

    The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties. CSS3 Please! has been gaining a significant amount of interest around the blogosphere since its launch earlier this week.

    Another online CSS3 rule generator to brought to light this week, although perhaps not so well known, is Randy Jensen’s CSS3 Generator, which offers a drop down menu with subsequent options to generate and customise rules for a wide selection of CSS3 properties and functionality including border-radius, shadow, text-shadow, rgba colors, @font-face, multiple columns, box sizing and more.

    Whilst these are not the first online rule generators for CSS3, westciv.com for example offers several online tools for generating rules for a selection of CSS3 properties, CSS3 Please! and the CSS3 Generator do however offer two of the most comprehensive solutions to date, particularly with regard to cross-browser compatibility, and with both still being in their infancy I’m excited to see how they develop in the future.

    You can skip to the end and leave a response.

  • Comments

    • 01.

       Please, switch to full feeds.

    • 02.

      Great tools.

    • 03.

       Shitty tool for experimental implementations of an unfinished standard. Neither of them “future proofs” themselves by including the current standard draft implementation but simply relies on vendor specific experiments. (Using the current standards drafts would make many of these features work in Opera 10.50 too.)

      *sigh* Whatever happen to standards and patient adoption ones something was finalised? :P

    • 04.

      It’s pretty broken in IE8, each filter declaration resets it to the default state, so if one rule specifies a drop shadow and another specifies a gradient background, the last rule “wins”.

    • 05.

      You know what really stinks, is I had this idea for a CSS3 website for a while, with some features that I’m not going to disclose. But I proposed it to one person (Not saying who, but they are a very well known name in the CSS world), and I believe I told them the name I had for it. That name was “CSS3 Please!”. Exactly as it appears in the quotes. I’m not criticizing anyone, and I will also say it is not the creator of the css3please.com website, it just seems like more than a coincidence. I knew the “css3please.com” domain was available last I checked. So when I went to check it for purchase, it said it had been purchase THE day before I just inquired it. Really stinks, because I have a great idea for a CSS3 website. Anyway, just thought I’d vent :) If anyone is interested in partnering with me on this, email me and I’d also like to see your personal site(s).

    • 06.

      two things:
      1) you misspelled “browser” in the post title, and
      2) the link for “Add a Comment” doesn’t jump to the Leave a Comment section…


    • 07.

      @ Aaron – Thanks for pointing out the typo

    • 08.

      There’s also  http://border-radius.com/ nice interface for just border-radius

    • 09.

      @Chris: typo is still in the page title (as opposed to article title). :)

    • 10.

       @ Stifu – too late to change it now

    • 11.

       you can’t change a typo in the page title?? not very impressive.

    • 12.

      Heh, these remind me of the css transcoding I’m doing in the app I’m currently working on at work. Though, I put a little more thought and research into the properties that my transcoder outputs. I wonder if I should expand into rgba and gradients.

    • 13.

      @ lib, @ stifu – sorry, i was thinking of the url, didn’t realise the page title hadn’t updated, has now been changed.

    • 14.

      i use rapid weaver and it has css3 but in some browsers it does not work

    • 15.

      One error in the generators :-) Google chrome now support border-radius :-) 

    • 16.

      Dude, whatever happens it happens for a reason and this one is better for learning cast.. if one want to learn so why not using this tools.

      Dude i think it’s better to say whow, than you guys just spit this thing over, for you guys yes, maybe you guys are the expert one, but think about others to learn about this… it’s better if you guys help him but not to comment a things that no one would like, dont just critic but use it wise to teach others..

      Even though IE8 got problems with this tools yet is too good to learn .. :)

      Andrew Roberts: you got some skill why dont you try chris and tell him about it, dont make it annoying with some inviting to ur site, learn then teach, not teach then learn.. :)

      I’ve learnt a lot in here, so guys if you come and just want to critics the #css that has been shared with you guys, it is better to tell the microsoft about their software to learn more about CSS3..

      Be fair with others..
      I learn so much from this website, dont make it hard to others..

    • 17.

       I am shocked, coudn’t say anything good job Paul Irish

    • 18.

      what to do if we need all these box effect work on ie6/ie7?

    • 19.

       css3 generators is great

    • 20.

      Great way to learn CSS3 

    • 21.

      It kind of scares me when well known websites like this one mislead all the new kids on the block trying to learn CSS3 and the way how browsers handle it. It scares me even more when people like Jeffrey Zeldman himself link to educational websites (CSS3Generator in this case) that has not been entirely checked.

      CSS3Generator.com has been online for at least few months, mentioned everywhere tons of times. Its examples have been used to create tens (if not hundreds or even thousands) of CSS3 showcases and cheat sheets.

      Here is an example that grabbed my attention:

      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      -icab-box-sizing: border-box;
      -khtml-box-sizing: border-box;

      As far as I am concerned, Firefox and the browsers based on WebKit (Safari, Chrome and the latest version of iCab) require prefixes, indeed. However, Internet Explorer handles box-sizing just fine since version 8. Same with Opera since version 7 (not 9.6 as the generator suggests) and Konqueror since version 3.4. Also, regarding browser compatibility, according to Mozilla Developer Center, Firefox handles box-sizing since version 1 (not 3) and Safari since version 3 (build 522, not 3.1+). Chrome, presumably, has it since version 0.2 (as it was built on WebKit 522). That is a lot of inconsistency and bloated code on a website that has been linked by pretty much anyone in the industry.

      That leaves us with a much shorter version of the universal (read as: much more universal as the generator suggests) box-sizing implementation:

      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      Note the vendor-specific prefixes before the main, non-specific property.

      Please do not get me wrong: we all make mistakes and we all suffer from time shortage these days but please think about the consequences of linking sources that has not been entirely checked. We talk about what HTML5 is and what it is not, yet we miseducate others at the same time (as this example shows, let alone the extra bandwidth caused by the bloated code).

      During the pursuit of the pure, semantically correct web with all the great things that HTML5 and CSS3 provide these days it is hard to not notice the fact that we lose our grip a little bit and we should really *think* about the hype we are all in.

    • 22.

       Michał Ordon, we are encouraging IE to also use a vendor prefix.

    • 23.

      Great tools, thanks! I’d also like to add http://css3gen.com to the list.

    • 24.

       I am not happy with the suggestions because both of didn’t helpful in my case.
      Css3please don’t have ability to generate rules for transform.
      css3generator is able to do with transform but not accurate.

    • 25.

       hi i am working on css3 bt when i used pie.htc for border radius same time on same div i require opacity bt box opacity did’t work on internet explorer pls how 2 solve this problem

    • 26.

      I’m not sure why some are complaining about a few decent FREE CSS3 tools, but I would like to ask those who are bitching about someone else’s hard work and time, please post your css3 tools (that you made) for us all to see and use. I have found the two tools listed to be extremely helpful and tie saving. Thanks for all the hard work Paul!

    • 27.

      wtf…installing a headlight in a volvo is easier than trying to convince msie of anything…and this whole thing about standards is a joke. If all browsers were standards based, (they all seem to be excet msie…) it would be a one page world. Instead, we need seperate lines for ie…! I’ve only been coding a year or two, but it obvious that supporting msie is 3x’s more work than developing a css3 tool in the first place. I just want a page that conveys a message…not one that conveys 5 different messages depending on the browser. I’m going css3 and html5, and leave the rest behind. Screw it…

    • 28.

       You can not ! It is to late !

    • 29.

       A gr8 collection of cross browser testing resources. However me and all my web designing community friends most often wonder which browsers are important and which to leave out. It’s always a trade off between efforts and rendering. The 4 Main Browsers to Test Your Website Rendering In helped me understand browser traffic and also helped me save my efforts and time in avoiding unnecessary coding for lesser important browser. Hope your readers do benefit from it.

    • 30.

       No matter how many new generations of IE come along , it will still be same old browser that has its own rules and as always make a developers life as miserable as possible…

    • 31.

       Nice post here thanks for sharing with us .

    • 32.

       As one of the visitors asked
      Please explain the

    • 33.

       The only problem (developer)we are having is the old browser(mobile) which does not support css styles like(box-shadow, text-shadow and the like)

    • 34.

      Hey just wanted to give you a quick heads up. The words in
      your post seem to be running off the screen in Firefox.
      I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let
      you know. The style and design look great though!
      Hope you get the problem solved soon. Many thanks

    • 35.

      I blog quite often and I seriously appreciate your content.
      This article has truly peaked my interest. I am going to book mark your website
      and keep checking for new information about once a
      week. I opted in for your Feed as well.

    • 36.

      When someone writes an article he/she maintains the thought of a
      user in his/her brain that how a user can be
      aware of it. So that’s why this post is outstdanding.

    • 37.

      Another great css generator that does even more is http://www.generatecss.com 


Advertise here?