Hey guys,

I was bored today, and decided to play around with the checkbox "hack".

For those who don't know what that is, it's basically creating CSS click events with checkboxes and it doesn't involve any javascript.

This is how it's done:

input[type=checkbox]:checked ~ div { } 

So here's my code, let me know what you all think. It's not really meant to be UI/UX friendly, but just a neat little demo.

Thanks all!

Landing Page

codepen

GitHub

I want to learn CSS3 and HTML5 that i found teach you like today was the first day you ever touched a computer. I know HTML and CSS VERY well, i dont need to relearn it. Anyone have any good online tutorials?

Want to get the group talking about what JS they have thrown away in favor of CSS3 effects.

Dear Designers/Front-End Web Developers,

Some of my favorite CSS3 selectors are lacking support in IE6, IE7, and FF3.

While it may be easy to ignore this by deciding to not support these browsers, in some cases this may just be lazy, and... if designing for a business, this may not even an option.

Recently I used CSS Expressions to "extend" compatibility to IE7 for the ::before & ::after selectors, similar to what's described in Styling Elements With Glyphs, Sprites and Pseudo-Elements by Thierry Koblentz.

With all the different workarounds out now, including jQuery plugins.. I'm wondering, what is your method?

..

...

Edit: So far I've only gotten 2 responses to the actual question above.
I'm still holding out hope!

Edit: As mentioned above, dropping support for browsers isn't always an option. Additionally, it's not really a best practice.

Edit: How do so many of you just not support inconvenient browsers? Do you do freelance/in-house design? What type of clients do you have? Is this your practice because you don't know how to workaround the lack of support or to plan for it ahead of time, out of principle, or just because it's easier that way?

When I got out, you were awesome if you knew how to install a gem. border-radius and box-shadow were the only real parts of CSS3 being used. jQuery was hip and new. Ruby on Rails was a budding platform.

I've been looking into it again recently, and I'm finding things like Coffeescript, wider acceptance of HTML5 and CSS3, CSS pre-processors (less/sass), HTML pre-processors (haml/mustache), some sort of cult following behind both Node.js and Ruby on Rails (and a seeming war between the two), lots of cool new stuff being distributed as "npm"s instead of software binaries or even gems... It's amazing how fast it's changed--and how quickly I've fallen out of the loop.

Does anybody want to fill me in on what this all means and what I've missed in the past few years? Are all these technologies actually being used in production, or are they proof-of-concepts?

Live Demo

Created a interactive Calendar using CSS3. Selectors were heavily used to remember the state between dates.

Threw this together in a few hours to show my first year web design students: http://studentweb.infotech.monash.edu/~wlay/FIT1012/muse-demo/

And for reference, here's Adobe's original: http://muse.adobe.com/

Last week I did a lecture explaining the advantages of HTML/CSS over older techniques (presentational HTML, table layouts, imagemaps, etc). Adobe's Muse release makes ignores many of the advantages of CSS. All I see is ImageReady for a new generation.

Please take a look and view the source. 105 lines of neatly formatted HTML source. 41 lines of poorly formatted CSS (sorry).

A few notes:

• This is XHTML/CSS2 only (what my students are currently studying). As you can see HTML5 and CSS3 are not necessary for a site like this.
• No JS, though there is basic slideshow nav using HTML/CSS.
• Mostly working in older versions of IE, no browser specific tricks.
• Tried to keep content is good source order.
• Most of the measurements/color/type was just eyeballed. Some it may be a little different to Adobe's original.
• Relies on the Segoe UI family of fonts. Otherwise defaults to sans-serif and looks a little worse.

Ideas for further improvement/optimization are most welcome.

Yesterday, reddit started running ads for a new sponsor. While we normally don't introduce new campaigns [insert joke about never having a campaign to announce], this one is notable because the advertiser actually seems to understand what reddit can offer that traditional advertising (even traditional web advertising) cannot.

See, Microsoft is getting ready to release Internet Explorer 9, and they reached out to us because they genuinely want to start a dialog with the reddit community. In fact, they've taken the unprecedented step of putting the reddit team in charge of this entire campaign. This is a great deal of trust for an advertiser to offer, and we should both take it as a huge compliment.

So, how should we do this? If there's one thing I've learned in my five-plus years at reddit, it's that the direct and open approach works best, so instead of marketspeak, I'm going to paste a quote from Wikipedia:

IE9 will have complete or nearly complete support for all CSS 3 selectors, border-radius CSS 3 property, faster JavaScript, and embedded ICC v2 or v4 color profiles support via Windows Color System. IE9 will feature hardware-accelerated graphics rendering using Direct2D, hardware accelerated text rendering using DirectWrite, hardware accelerated video rendering using Media Foundation, imaging support provided by Windows Imaging Component, and high fidelity printing powered by the XPS print pipeline. IE9 also supports the HTML5 video and audio tags and the Web Open Font Format.

If you have a computer that can run IE9, we'd really like you to try it out and post a review. The actual IE9 programmers are going to read what you have to say, and if you compliment their work, it'll totally make their day. But they also need to hear your complaints. Ideally, in the form of constructive criticism, but we warned them that reddit can sometimes be a little... brisk, so they're prepared for that, too.

One last thing: Microsoft's not the only ones who want your feedback. We at team reddit are interested in hearing what you think of this campaign in a general sense: do you find this kind of advertising more appealing than sidebar ads? Do you have any suggestions as to how it could be even better? (Especially things that could never happen in a magazine.)

Oh, and stay tuned for a Microsoft IamA next week. We're not sure who it will be with yet, but we've been assured it won't just be with flack.

Maybe it's just a personal pet peeve, but I really think it's a problem. HTML5, as a term, already means something. HTML5 will not revolutionize the web on its own. You can't animate things using solely HTML5 - and with very few exceptions, even HTML5+CSS3 alone won't do much in the way of animation (yes, some transitions do exist)...

Will the combination of these 3 technologies revolutionize the web? Probably. But a semantic markup specification, by itself, isn't anything remotely close to a "Flash killer", or even a tool for building usable websites. HTML5 without CSS3 is useless.

Do we need a shorter name than "HTML5 Canvas + CSS3 + Javascript" when we're talking about what will compete with Flash? Sure. Maybe "Dynamic Canvas", or "Canvas animations", or something... but HTML5 all by itself is not a competitor to anything but HTML4.

Some of you may remember a page I made a few months ago that used fixed-height css3 multicols. Here's the post. It didn't go over great, but I still loved the concept.

This weekend, I figured it all out. Fixed height columns work really well with the pretty output that Readability produces. So, I created some JavaScript that makes it happen.

The result: Horizontability

Works the same way as Readability. The arrows in the top left (or PgUp and PgDown) scroll the page by column. Arrow keys and mouse wheel scroll the usual way, sort of. It works for me in Firefox, Chrome, and Safari. It should work at any resolution and be most beneficial on wide screens. Many karmas to someone with a ridiculous resolution who posts a screenshot of the entire first chapter of Metamorphosis (the text in the background) in a single window.

edit: No more mousewheel control because it messes up trackpads and all the arrow keys now perform full column jumps; also, there're buttons.

and I forgot to mention a link of a rebuttal of my original idea: here