Showing posts with label Exact Age Calculator. Show all posts
Showing posts with label Exact Age Calculator. Show all posts

Sunday, January 12, 2014

Exact Age Calculator: Behind The Scene - Button With Pure CSS

Topic:
So I was trying to make the button to calculate more apparent. I thought about it for a while and was reminded of what the button in NUS ModCrasher looks like. So I tried to make that using CSS only. Apparently, I could achieve similar result!

Here is the sample code snippet:

<!DOCTYPE html>
<html>
<head>
    <style>
    #button {
        cursor: pointer;
        text-align: center;
        width: 200px;
        padding: 5px;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #999;
        border-radius: 10px;
        background: #FFD119;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
        background: -moz-linear-gradient(top, #FFD119, #E6B800);
        font-weight: bold;
        height: 28px;
        box-shadow: 0 -8px inset;
    }

    #button:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
        background: -moz-linear-gradient(top, #E6B800, #FFD119);
        margin-top: 13px;
        height: 25px;
        box-shadow: 0 -5px inset;
    }

    #button:active {
        background: #403300;
        padding-top: 10px;
        height: 20px;
        box-shadow: 0 5px #000 inset;
    }
    </style>
</head>
<body>
    <div id="button">This is the button</div>
</body>
</html>

To see it in action, you could go to my Codebits at http://www.codecademy.com/HansNewbie/codebits/PmVTjH.
No comments:

Exact Age Calculator

Topic:
Exact Age Calculator
on Codebits by Codecademy

I don't know how I came up with the idea, but I was wondering it would be cool to know exactly how old are you. The calculations are pretty rough (I don't count by birthday, but by year as 365 days and month as 30 days) and it has not been up to hour and minutes, but it is kind of working.

I was thinking it would be cool if it could be improved to prompt which country you are from then pull the data of the country's life expectancy, then we do a countdown how long do you have to live and make your dreams come true.

I am quite satisfied with it, though, especially with the button since that was actually an 'accident'; I didn't plan for it, but I thought it was hard to differentiate between the button and the Age box and I just did it on the fly.

Many thanks to Build A Calculator! track on Codecademy for helping in making this Codebits!

Have fun!
No comments:
Subscribe to: Posts (Atom)