Building the Hancock Tower in CSS

Hancock Tower built using CCS3 transforms

CSS Hancock Tower Demo

Still feeling inspired by Building a CSS City, I recreated another Boston building using CSS transforms this weekend: the Hancock Tower. This one was a bit tougher than building the Prudential Tower because it is more than just a few different size boxes stacked on top of each other.

Creating the main body of the building wasn’t too hard, except for the inset parts on the thin sides. The base, on the other hand, was a pretty big pain. Fitting the sides together and sizing a top was a bit of a struggle (and probably mostly unnecessary because no one really notices that part of the building), but I think it turned out pretty well. The roof of the base flickers when spinning around the back of the building in Chrome for some reason, but appears perfectly in Safari.

After getting the building shape together I added the glass window texture and the darker row on the top of the building. Also, I think the coolest part of the Hancock Tower is how it reflects whatever is around it, so I added a cloud photo that rotates as the building moves around.

Originally I though there would be way less DOM elements on this model, but it turned out to be around the same as the Prudential Tower because of all the details:

<div class="wrapper">
            <div class="block floors">
                <div class="side1">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side2">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side3">
                    <div class="windows"></div>
                </div>
                <div class="side4">
                    <div class="windows"></div>
                </div>
                <div class="top"></div>
            </div>
            <div class="block base">
                <div class="side1">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side2">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side3"></div>
                <div class="side4"></div>
                <div class="top"></div>
            </div>
        </div>

Take a look at the Hancock Tower demo in a webkit browser (Safari looks better than Chrome if you have the option).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>