Henrique Carvalho Alves

Web developer from São Paulo, Brazil

About software, design, people and the things in between.

4 days ago
comments

Awesome photos from this guy! Make sure you check “The Unbelievable and Impossible photos of Li Wei”.

Awesome photos from this guy! Make sure you check “The Unbelievable and Impossible photos of Li Wei”.

6 days ago
comments
reblogged from borgomani

design architecture wow
borgomani:

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.

borgomani:

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.

1 week ago
comments

Do it yourself first - (37signals) →

Big tip for startups out there.

1 week ago
comments

The Int Divide - The Daily WTF →

Because you need a SQL server to divide integers.

1 week ago
comments

css design trick

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:

Click for Rave

Tabs with different hover/active states:

Pizza Sandwich Pasta

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.

1 week ago
comments

The $300 Million Button →

How Amazon increased its sales by $300 million by changing one button in its checkout process.

1 week ago
comments

funny
So true.

So true.

1 week ago
comments
reblogged from xoai

entrepreneur lesson talk

xoai:

If you had 5 dollars and 2 hours, how would you make as much money as possible?