The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS3 Example Page

  • # June 29, 2011 at 4:36 pm

    I am working on a page that showcases all of the new selectors and properties in CSS3. So far I have border-image, border-radius, transitions, 2D and 3D transforms, @font-face, general sibling selector, all the attribute selectors, nth-child, first-child, last-child and first-letter demos. Any other suggestions? Should I add in selectors level 4?

    It’s on my github repo.

    # June 30, 2011 at 12:11 am

    No suggestions?

    # June 30, 2011 at 12:26 am

    show a live example?

    # June 30, 2011 at 12:29 am

    This reply has been reported for inappropriate content.

    Have you had a look at this?

    # June 30, 2011 at 12:33 am

    @ChristopherBurton Gimme just a sec, haven’t used FileZilla in forever.

    # June 30, 2011 at 12:34 am

    @sl1der Yes, but this is all on one page and using transitions to show the change. The red and green hover effects on the selector demos look especially cool, imho.

    # June 30, 2011 at 12:59 am

    Alright, here it is.

    # June 30, 2011 at 1:01 am

    cool, but not all of those examples are CSS3.

    # June 30, 2011 at 1:03 am

    @ChristopherBurton Oops, which ones? Found the > child selector in CSS2.1, any others?

    # June 30, 2011 at 1:13 am

    New idea: should I put all the css in


    style blocks so that people can mess with it? just the relevant stuff, not the general page formatting, and break it up for each example.



    with transitions looks awesome! 0.o
    Now where’s that article on view-source buttons, I need to adapt some of that code…

    # June 30, 2011 at 1:39 am


    # June 30, 2011 at 2:03 am

    So it is. I think I’ll leave it in, as it’s only recently been a usable (at least cross browser and with common formats) tool. I’ll rename the page to something about uncommon rather than specify css3. Thhen I have an excuse to change this once or twice a week as the selectors level 4 spec changes! :D

    # June 30, 2011 at 3:48 am

    Guess what? Editing html annd css files remotely via a nook’s terminal, sshing to your laptop, then using vi remotely is a pain in the donkey. Doing that and making the code valid on a touchscreen keyboard that barely works (much less using vi without a Ctrl key) is pretty much impossible. I put all the styles in contenteditable style blocks, but I’m not going to update it on github or my website untill I check out the code on a real screen, validate the html and test it in webkit, gecko, and khtml. I’d love to try this page in the latest build of IE 10, but I don’t curently have a development machine running Windows 7 (or any other Windows for that matter). I have Fedora Core 15 on my home-server-thats-actually-used-more-as-a-desktop and on my laptop. My ACTUAL desktop is so terribly screwy right now that the Windows 7 installer bluescreens with an unnamed error, so for now I can’t laugh about the feature support of of Internet Exploder. If anyone could give me a list of all of the demos that don’t work in IE 9 and 10 it would be much appriciated. That reminds me, I need to convert that @font-face font to a few other formats. Also, I’m thinking about making a fork of this and removing all vendor prefixes just to see what supports what. I might also see if I can get all the demos working (not including 3d transforms) to work in IE. I need to learn how to do matrix math anyways.

    An hour of typing grammaticaly correct sentences on my nook is enough, I’m gonna go to bed.

    # July 1, 2011 at 3:22 pm

    Alright, it’s updated on github and on the live demo. Everything is contenteditable, but syntax highlighting doesn’t work, as it puts the css in spans, which doesn’t work very well.

    # July 1, 2011 at 4:14 pm


Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed