iOS battery

by Lucas Krause

HTML

<table><tbody><tr>
    <td>
        <div class="a">
            <div class="b"></div>
        </div>
    </td>
    <td>
        <div class="c"></div>
    </td>
</tr></tbody></table>

CSS

body {
    background-color:rgba(0, 0, 0, 0.6);
    padding:10px;
}
table {
    table-layout:fixed;
    border-spacing:0px;
}
table td {
    padding:0px;
    vertical-align:middle;
}
.a {
    width:16px;
    height:6px;
    border:solid rgba(255, 255, 255, 0.75) 1px;
    border-radius:1px;
    padding:1px;
    box-shadow:0px -1px 0px rgba(0, 0, 0, 0.75);
}
.a > .b {
    background-color:rgba(255, 255, 255, 0.75);
    height:100%;
    box-shadow:0px -1px 0px rgba(0, 0, 0, 0.75);
}
.c {
    height:2px;
    width:1px;
    border:solid rgba(255, 255, 255, 0.75) 1px;
    border-left:none;
    border-top-right-radius:1px;
    border-bottom-right-radius:1px;
    box-shadow:0px -1px 0px rgba(0, 0, 0, 0.75);
}

JavaScript

/*
    iOS battery in the top right corner of the display.
    Done with: border-radius, border and rgba.
    Colors and sizes were taken from the iPhone GUI PSD v4 by teehan+lax
    (http://www.teehanlax.com/blog/iphone-gui-psd-v4/)  
*/