Awesome photos from this guy! Make sure you check “The Unbelievable and Impossible photos of Li Wei”.
Wilkinson Residence
Portland , Oregon
Designed: 1997
Completed: 2004
Located on a flag lot, a steep sloping grade provided the opportunity to bring the main level of the house into the tree canopy to evoke the feeling of being in a tree house. A lover of music, the client wanted a house that not only became part of the natural landscape but also addressed the flow of music. This house evades the mechanics of the camera; it is difficult to capture the way the interior space flows seamlessly through to the exterior. One must actually stroll through the house to grasp its complexities and its connection to the exterior. One example is a natural wood ceiling, floating on curved laminated wood beams, passing through a generous glass wall which wraps around the main living room. (source)
Remembers me of another house in the midst of nature, the Faillingwater by Frank Wright. With one twist: Frank’s one is from 1934.
The Int Divide - The Daily WTF →
Because you need a SQL server to divide integers.
Drawing with CSS3
So, today I was playing with some CSS, as I wanted to implement a reusable style for buttons and other UI controls with minimum use of images. It turns out that with text-shadow and box-shadow properties, you can do some pretty refined graphics, while keeping everything simple and easy to maintain.
Disclaimer: as usual, the examples will look better on a decent browser (try latest Firefox, Chrome or Safari).
A simple yummy button:
Tabs with different hover/active states:
How many images did I used here? Four, each for one button state? Two, with different colours?
One. Just a PNG with alpha for the gradient, and only because I can’t do it with CSS yet. 1
The magic is shown below:
a.button {
display: table-cell;
outline: none;
padding: 0 15px;
line-height: 24px;
border: 1px solid #484;
border-bottom-color: #7b7;
color: #fff;
text-shadow: #242 0 1px 1px;
text-decoration: none;
font-weight: bold;
font-family: Helvetica, sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: #666 0 2px 2px;
-moz-box-shadow: #666 0 2px 2px;
background: url('http://14.media.tumblr.com/tumblr_ksf06dPia91qa4vtlo1_100.png') #8e0 repeat-x;
}
a.button:hover {
text-shadow: #121 0 1px 2px;
}
a.tab {
display: table-cell;
outline: none;
padding: 0 15px;
line-height: 24px;
border: 1px solid #999;
border-bottom-color: #aaa;
color: #444;
text-shadow: #fff 0 1px 1px;
text-decoration: none;
font-family: Helvetica, sans-serif;
-webkit-box-shadow: #666 0 3px 2px;
-moz-box-shadow: #666 0 3px 2px;
background: url('http://14.media.tumblr.com/tumblr_ksf06dPia91qa4vtlo1_100.png') #eee repeat-x;
}
a.tab:hover {
color: #fff;
text-shadow: #0cf 0 0 4px;
border-bottom-color: #9ef;
}
a.tab:active {
background-position: 0 1px;
background-color: #888;
-webkit-box-shadow: #333 0 1px 2px;
-moz-box-shadow: #333 0 1px 2px;
}
Usually, I prefer to build the most I can out the UI with CSS, as it is way easier to evolve and maintain than a bunch of tiny images (let alone Flash movies… if you ever did that, please die in a fire). Even if the reason was just to be independent from the slacker designer and his Adobe suite, that’s reason enough for me.
Still, it doesn’t mean it should lack eye-candy - in fact, you can do Apple-grade graphics with CSS alone.
1Well, not really: Webkit does support -webkit-gradient, but then it’s browser-specific, so it doesn’t cut for me.
The $300 Million Button →
How Amazon increased its sales by $300 million by changing one button in its checkout process.
