A kaleidoscope built using (almost) pure CSS3

Here's a kaleidoscope made using pure CSS3. Ok, almost pure CSS.
The only bit of JavaScript is used to kick off the animations. I could have done this is CSS too, but ran out of time.
The way it works is there's a 500px square div containing a triangular -webkit-mask-image (defined by the SVG file). This mask image ensures that regardless of the size and position of the background image, you only ever see a triangular shaped section. You can think of it as a 'cutout'.
This div is duplicated, flipped and rotated eight times to create the effect. We then animate the resulting 'scope by simply moving the position of the background image.
I think it's quite neat. Unfortunately this fairly simple page actually crashes iPad and iPhone devices running (at least) 5.1.1 after a while. Very frustrating!

View Demo

Source Code

Vertically Centering Multi-Line text in CSS

There are many, many blog posts on this subject already, but I've struggled to get many of the methods to work so I'm saving this for posterity.

<div class="label">
    <div class="label-inner">
        foobar<br>baz
    </div>
</div>

.label {
    display: table;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.label-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Result

Android Phonegap :active CSS pseudo class doesn't work. A workaround..

If you're building a cross-platform Phonegap app, you may well run in to the issue that your CSS :active pseudo-classes simply don't work when running on Android. They may work on your a (link) elements, but not on div or others.

Luckily there's a simple workaround. This workaround will continue using the fast, native, JavaScript-free :active class on iOS, and drops back to using the JavaScript on Android.

• First, in your CSS, find every instance of the :active class. Add another rule that maps a class called fake-active to the same style.

E.g.

.my-button:active {

 background-color: blue;

}

Becomes:

my-button:active, .my-button.fake-active {

 background-color: blue;

}

• Now, in your document ready event, when running on Android only, attach event handlers for touchstart and touchend to all the classes that have used :active. Make these add and remove the fake-active class.

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(".my-button")
    .bind("touchstart", function () {
        $(this).addClass("fake-active");
    })
   .bind("touchend", function() {
        $(this).removeClass("fake-active");
    });
    .bind("touchcancel", function() {
        // sometimes Android fires a touchcancel event rather than a touchend. Handle this too.
        $(this).removeClass("fake-active");
    });
}

Note that you can use the $(".my-button, .my-other-element, .even-more-elements") jQuery syntax to bind the events to other classes too.

Simple method of horizontally centering a DIV of unknown width

Centering in CSS is always a pain. If you are just centering text, or you are using (god forbid) IE6 then you can simply use the text-align property. If you are centering something of a known width, it's easy too, just set margin-left and margin-right to 'auto' and all is good. However, if you don't know how wide the element is going to be, for example, you have an element that expands to fit some text pulled from a database, it's a bit tricker.

There are loads of hacks around of varying reliability and complexity, but the simplest method I have found yet is the following.

• The outer div is set to text-align: center
  


• The inner div is set to display: inline-block
  

That's it. The fact that the inner div is set to inline-block means it picks up its parent's setting of text-align to center itself. Is kinda wierd, but works on all the browsers I've so far tested.

Zebra Striping Tables with Pure CSS

I've seen quite a lot of tutorials for this effect that use Javascript, particularly jquery.
You can do it with pure CSS though using the handy :nth-child(odd) and :nth-child(even) selectors in CSS3.
This is a fragment from a javascript errors dialog I created for an online code editor for Calvium.com

Syntax Highlighting in Blogger Posts

Code examples on web pages work so much better if you have syntax highlighting. Blogger.com doesn't have this feature enabled by default but it's easy to add.

Without..

 function foo(a,b,c) {
    return "Ugly!"
}

With..

function foo(a,b,c) {
    return "Good hey?"
}

Here's the tutorial I used. Thanks Luka Marinko.