YSlow CSS3 Logo

Imageless YSlow logo

by Umar

HTML

<img src="http://d.yimg.com/jc/ydn/speedometer.png">
<div class="ys" style="width:250px">
    <div class="a">
        <div class="b">
            <div class="c">
                <div class="d">
                    <div class="e">
                        <div class="f"></div>
                        <div class="g"></div>
                        <div class="t t1"></div>
                        <div class="t t2"></div>
                        <div class="t t3"></div>
                        <div class="t t4"></div>
                        <div class="t t5"></div>
                        <div class="t t6"></div>
                        <div class="t t7"></div>
                        <div class="p">
                            <div class="pw">
                                <div class="pi">
                                    <div class="pl"></div>
                                </div>
                                <div class="pi">
                                    <div class="pr"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

<div class="ys" style="width:50%">
    <div class="a">
        <div class="b">
            <div class="c">
                <div class="d">
                    <div class="e">
                        <div class="f"></div>
                        <div class="g"></div>
                        <div class="t t1"></div>
                        <div class="t t2"></div>
                        <div class="t t3"></div>
                        <div class="t t4"></div>
                        <div class="t t5"></div>
                        <div class="t t6"></div>
                        <div class="t t7"></div>
                        <div class="p">
                            <div class="pw">
                                <div class="pi">
                                   ...

CSS

/* borders and background */
.ys .a {padding:1.5%;
    -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0;
    -webkit-border-top-left-radius:1000em;
    -webkit-border-top-right-radius:1000em;
    border-radius:100% 100% 0 0 / 166% 166% 0 0;
    background: #b0b4b7;
    background: -moz-linear-gradient(left, #b0b4b7 8%, #3f3f40 54%);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%,#b0b4b7), color-stop(54%,#3f3f40));
    background: -webkit-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%);
    background: -o-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%);
    background: -ms-linear-gradient(left, #b0b4b7 8%,#3f3f40 54%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0b4b7',endColorstr='#3f3f40',GradientType=1);
    background: linear-gradient(left, #b0b4b7 8%,#3f3f40 54%);
}

.ys .b {padding:5% 5% 0 5%;
    -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0;
    -webkit-border-top-left-radius:1000em;
    -webkit-border-top-right-radius:1000em;
    border-radius:100% 100% 0 0 / 166% 166% 0 0;
    background: #dadadc;
    background: -moz-linear-gradient(left, #dadadc 8%, #3a3a3c 54%);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%,#dadadc), color-stop(54%,#3a3a3c));
    background: -webkit-linear-gradient(left, #dadadc 8%,#3a3a3c 54%);
    background: -o-linear-gradient(left, #dadadc 8%,#3a3a3c 54%);
    background: -ms-linear-gradient(left, #dadadc 8%,#3a3a3c 54%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadadc', endColorstr='#3a3a3c',GradientType=1 );
    background: linear-gradient(left, #dadadc 8%,#3a3a3c 54%);
}

.ys .c {padding:2.5% 2.5% 0 2.5%;
    -moz-border-radius:100% 100% 0 0 / 166% 166% 0 0;
    -webkit-border-top-left-radius:1000em;
    -webkit-border-top-right-radius:1000em;
    border-radius:100% 100% 0 0 / 166% 166% 0 0;
    background: #e1e4e5;
    background: -moz-linear-gradient(left, #e1e4e5 8%, #010204 54%);
    background:...

JavaScript

/**
* NO JAVASCRIPTs WERE HARMED IN THE MAKING OF THIS IMAGE
* GO AHEAD AND CHECK OUT THE HTML, CSS AND RESULT TABS
*/