45 Examples Yellow Website Design

aditia rahman — Sat, 23 Jul 2011 23:58:57 +0000

Yellow color can give the feel about cheerful, brightness and help stimulating eyes, today I captured some of yellow colored website design in many variety, like company profile, blogs, personal page. Hope these post give some inspiration for your next design.

1. Jonathan Penn

2. Above The Mark

3. Benny Roth

4. Subtotal

5. Roome

6. Postography

7. Unprotector

8. Bemobile

9. Affectia

10. Click.pt

11. Postmark

12. Caffeine Creative

13. Rs Mehra

14. Santosh Kumar

15. Helveticons

16. Dennys

17. Mooze Design

18. Espira

19. Cello

20. Kim The Movie

21. Fontshop

22. Creative Spark

23. Elless

24. Little Yellow Jacket

25. Attract

26. Phil Thompson

27. The Firework Man

28. Stuffed Cupcakes

29. Made By Analogue

30. Byliner

31. Web Species

32. Strong House media

33. They Creative

34. Sullivan NYC

35. Jacob O’Neal

36. Carp Vlad

37. Style And Conscience

38. Hover Kraft

39. EBSL

40. Strange Native

41. Okay Yellow

42. Michael Grinstead

43. Typography Served

44. Paralotna

45. MADD

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.

Superdit.com » web design