Superdit.com » Design

50 Search Field Design From Various Search Engine

aditia rahman — Wed, 21 Jul 2010 08:37:52 +0000

The search feature is one of the must have feature when creating a website, when we designing a search field, it has to match our site theme or look and feel. Here I listed the 50 search field design from various search engine that I found on internet, there are some with classic design, some with fancy image, etc. Just check it out.

Ask

Bing

Snap

Cuil

Exalead

Omgili

Yahoo! Search

Findicons

Thefind

Oihoi

Webcrawler

AOL Search

Guruji

Ansearch Australia

Accoona

Infospace

Powerset

Answers

Lycos

Home UK

Kelkoo

Price Grabber

Shopzilla

Viewzi

Eyeplorer

Quintura

Zortit

Teoma

Dogpile

Truveo

Stockphotofinder

Veezzle

Myjobsearch

Flipdog

Twitjobsearch

Nachofoto

Docjax

Corbis Images

Scoopler

Spokeo

Domainsbot

Domize

Scour

Gravee

Zakta

Jayde

Yell

Globrix

Findaproperty

Google

World Cup 2010: A Collection of Infographic

aditia rahman — Tue, 13 Jul 2010 14:46:23 +0000

Even though the 2010 World Cup already end, there’s so many great story and data behind it, here I compile to a post the infographic during the biggest football party on earth, many great artist has describe the data in the interesting way and congrats to Spain fans.

Productivity 2010 World Cup Infographic ( link )

2010 FIFA World Cup Higest Winner ( link )

World Cup 2010 Final Result ( link )

Carbon Footprint of the 2010 World Cup ( link )

2010 World Cup Infrastructure ( link )

World Cup Prediction ( link )

Final da Copa do Mundo 2010 ( link )

South Africa 2010 Fixture Chart ( link )

Vuvuzela VS Sombred ( link )

Football VS Soccer Terminology ( link )

What’s A Player Worth? (on World Cup 2010) ( link )

Internet Meets 2010 FIFA World Cup ( link )

Penalties ( link )

2010 FIFA World Cup South Africa finals ( link )

2010 World Cup by the numbers ( link )

Jabulani ( link )

South Africa 2010 Stadium ( link )

Infographia Mundialista ( link )

Vuvuzela Infographic ( link )

2010 World Cup Calendar in Flash ( link )

Twitter & World Cup ( link )

120 Black and White Logo For Inspiration

aditia rahman — Wed, 16 Jun 2010 03:26:11 +0000

In my previous post, I showcasing about website to finding Logo inspiration, now I want to share my finding exploring all that websites, I only pick the black and white one, well not all, some got grayscale font color or background. I just need inspiration to create my blog logo, and I want it in black and white color, my imagination is simple logo with clear meaning, some of logo in this list have clear meaning, so it easy for the costumers to get the messages, so here they are:

Twitter Like Login Screen

aditia rahman — Mon, 07 Jun 2010 13:19:08 +0000

I like twitter, almost everyday I connected to twitter, in this post I created the Twitter Like Login Screen, not really the same but at least as similar as Twitter (without server side processing). Let’s start, first we have to prepare the folder, you can see the image on the right, that how my folder look like and as usual I’m using Netbeans so not to worry about the nbproject folder, the html, javascript and css code will be posted here, and you don’t worry about the image because I include it in downloadable source code and then create the html code first




    Twitter Like Login Screen
    
    



    
        Have an account?
        
            
                Sign In
            
        
    

    

    
        
            Username or Email
            
            Password
            
            
                
                
                Remember Me
            
            
                Forgot Password?
                 
                Forgot Username?
            
            
                Already using Twitter on your phone?

To separate the div Sign In link and the div login i’m using another div with css style clear:both because I want to put the login screen exactly on the bottom of div Sign In, the real twitter is using absolute position for login form, because they have the content to show, but not here. So the complete css file look like this

* { font-family: "Arial" }
body {
    background: #dbe9ed;
}
#divcontent {
    width: 800px;
    margin: 0 auto;
}
#divlink {
    text-align: left;
    float: right;
    font-size: 11px;
    background: #fff;
    padding: 5px 0 5px 8px;
    color: #666;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
#divlink a {
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 18px 0 0;
}
.spLeft {
    float: left;
}
.spUnclicked {
    padding: 5px 7px 5px 5px;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
.spClicked {
    padding: 5px 7px 5px 5px;
    background: #ccc;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px 5px 0 0;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 3px 3px #666666;
}
.text_link {
    padding-right: 15px;
    color: #7fb3cc;
    background: url(../images/toggle_down_dark.png) no-repeat scroll right center;
}
.text_link_clicked {
    color: #000;
    background: #ccc;
    background: url(../images/toggle_up_dark.png) no-repeat scroll right center #ccc;
}
#divlogin {
    float:right;
    background: #fff;
    border: 5px solid #ccc;
    background-color: #ffffff;
    /* mozilla firefox */
    -moz-border-radius: 5px 0 5px 5px;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 0 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    box-shadow: 0px 3px 3px #666666;
    border-radius: 5px 0 5px 5px;
}
#divlogin form {
    margin: 0;
    padding: 5px 8px;
}
.formLabel {
    font-size: 11px;
    color: #666;
    display: block;
    padding: 10px 0 7px 0;
}
#divlogin {
    width: 245px;
    display: none;
}
#divlogin form .field {
    border: 1px solid #ddd;
    padding: 5px;
    width: 218px;
}
#signin_submit {
    background: url(../images/bg-btn-blue.png) repeat-x scroll 0 0 #3399dd;
    /* mozilla firefox */
    -moz-border-radius: 4px 4px 4px 4px;
    /* google chrome & safari*/
    -webkit-border-radius: 4px;
    /* opera */
    border: 1px solid #3399dd;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 4px 10px 5px;
    text-shadow: 0 -1px 0 #3399dd;
}
#signin_submit:focus, #signin_submit:hover {
    cursor: pointer;
    background-position: 0 -5px;
}
#signin_submit:active {
    background-image: none;
}
.submit {
    color: #666;
    font-size: 11px;
    margin: 12px 0 12px 0;
}
.submit #remember {
    position: relative;
    top: 3px;
}
.submit .labelInline {
    display: inline;
}
.link_bottom {
    color: #CC3366;
    font-size: 11px;
    text-decoration: none;
}
.link_bottom:hover {
    text-decoration: underline;
}
.forgot {
    margin-bottom: 5px;
}

As you can see on the code above the css code to creating rounded corner and shadow is different, it depend on the browser engine, but it wont work on IE, the “Sign In” button style I copied from the Twitter site it self. There are two unused css style like .spClicked and .text_link_clicked, but they will be used when we call using javascript, and here the complete javascript code

document.onclick = check;
function Flag() {
    this.init = 1;
}

flag = new Flag;

function check(e) {
    var target = (e && e.target) || (event && event.srcElement);
    var objDiv = document.getElementById('divlogin');
    var objLink = document.getElementById('textSignin');
    var objSpan = document.getElementById("spLink");
    var parent = checkParent(target);
    if (flag.init == 1) {
        if (parent) {
            objDiv.style.display = 'none';
            objLink.className = 'text_link';
            objSpan.className = 'spUnclicked';
        }
        if (target == objLink) {
            objDiv.style.display = 'block';
            objLink.className = 'text_link_clicked';
            objSpan.className = 'spClicked';
        }
    }
    flag.init = 1;
}

function checkParent(t) {
    while (t.parentNode) {
        if (t == document.getElementById('divlogin')) {
            return false;
        }
        t = t.parentNode;
    }
    return true;
}

function showHideLogin() {
    var display = document.getElementById("divlogin").style.display;
    if (display == 'none' || display == '') {
        document.getElementById("divlogin").style.display = 'block';
        document.getElementById("textSignin").className = 'text_link_clicked';
        document.getElementById("spLink").className = 'spClicked';
        flag.init = 1;
    } else {
        document.getElementById("divlogin").style.display = 'none';
        document.getElementById("textSignin").className = 'text_link';
        document.getElementById("spLink").className = 'spUnclicked';
        flag.init = 0;
    }
}

The last file is the javascript, so the javascript code have to handle the users event this is what I have try with the real twitter, the login form shows when users clicks on the sign in link (so now the login form is visible). When the login form is visible there is two event that can close the login screen, first when users click outside the form, and second when users click again the sign in link (like toggle button). Now you can see the two css class .spClicked and .text_link_clicked are used when the login form visible. Here the result

DOWNLOAD SOURCE

.spClicked.

Mac Themes For Windows 7 Desktop

aditia rahman — Mon, 07 Jun 2010 07:35:19 +0000

Recently I’ve been a Windows 7 user’s, sure Windows 7 have a lot of improvement from XP or Vista, but I want to do my daily job in Mac way, until now i’m not a Mac user yet, and that day will come soon. So I want to make my desktop look like a Mac, here the themes that I’ve been using on my Windows 7 Desktop, and i’m hoping don’t have to install all this theme someday. Thanks to ZeusOSX from deviantart this is really great work

Macos X for Windows 7 – 32bit — Macos X for Windows 7 – 64bit

And another this two themes is the same as above just some little modification by the creator, you better read the installation instruction first.

Appolon Themes for Windows 7

Zeus and Poseidon

Collection of Android Application Website Design

aditia rahman — Thu, 11 Feb 2010 06:05:27 +0000

I have read some blog posts about great mobile application web design in WebDesignDev, WebDesignerDepot, Spyrestudios, Designreviver and Djdesignerlab for iPhone and android is one of mobile operation system platform that predicted will be booming in the next 2-3 years, and becoming the iPhone threat. There are many developer who already enter the android market with building cool application, and they have great on web design too, to promote their application. Here I found some great android application web site design, if you found another that I haven’t mention please inform me.

Filmscore

Retro Defense

Meebo

Recordoid

Astrid

Evernote

Colorix

Gigbox

Photoshop Mobile

Locale

ShopSavvy

Snaptic