Superdit.com » android

Creating Basic Android Logo With CSS

aditia rahman — Sun, 10 Apr 2011 10:11:44 +0000

CSS3 bring us more advanced feature to styling the html element, this sort example show how to create a very basic android logo based on CSS. It must be very easy to create it, if I sketch it may look something like this picture below.

Yup all with div element, we just have to manipulating the width, height, background color, rounded corner, position and the angle for the antenna part. I am not explaining and not showing the screen capturen since we all already familiar with android, by the way here are the demo and the source code.

View Demo

The HTML

is

The CSS

#android_eye_left {
    position: relative;
    top: 50px;
    left: 40px;
    background: #fff;
    height: 20px;
    width: 20px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
}
#android_eye_right {
    position: relative;
    top: 30px;
    left: 140px;
    background: #fff;
    height: 20px;
    width: 20px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
}

#android_antenna_left {
    position: relative;
    top: 35px;
    left: 100px;
    background: #95c03b;
    height: 50px;
    width: 7px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
    -moz-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    float:left;
}
#android_antenna_right {
    position: relative;
    top: 35px;
    left: 210px;
    background: #95c03b;
    height: 50px;
    width: 7px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
    -moz-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    float:left;
}
#android_head {
    background: #95c03b;
    height: 100px;
    width: 200px;
    -webkit-border-radius: 1.0em 1.0em 0 0;
    -moz-border-radius: 1.0em 1.0em 0 0;
    border-radius: 6.0em 6.0em 0 0;
    margin: 15px 0 15px 65px;
}
#android_body {
    background: #95c03b;
    height: 200px;
    width: 200px;
    -webkit-border-radius: 0 0 1.0em 1.0em;
    -moz-border-radius: 0 0 1.0em 1.0em;
    border-radius: 0 0 1.0em 1.0em;
    float: left;
    margin: 0 15px;
}
#android_hand_left {
    background: #95c03b;
    height: 150px;
    width: 50px;
    float: left;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
}
#android_hand_right {
    background: #95c03b;
    height: 150px;
    width: 50px;
    float: left;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
}
#android_leg_left {
    background: #95c03b;
    height: 80px;
    width: 50px;
    float: left;
    margin-left: 95px;
    -webkit-border-radius: 0 0 1.5em 1.5em;
    -moz-border-radius: 0 0 1.5em 1.5em;
    border-radius: 0 0 1.5em 1.5em;
}
#android_leg_right {
    background: #95c03b;
    height: 80px;
    width: 50px;
    float: left;
    margin-left: 40px;
    -webkit-border-radius: 0 0 1.5em 1.5em;
    -moz-border-radius: 0 0 1.5em 1.5em;
    border-radius: 0 0 1.5em 1.5em;
}
.clear {
    clear: both;
}

View Demo

20 High Quality Android Device PSD Resources

aditia rahman — Thu, 13 Jan 2011 11:36:23 +0000

Maybe this resources absolutely for Android fanboy, here are the great quality of PSD mostly designed by Alexander Gillis (zandog) from Deviant Art, when I browse through many web resources, forum, and other blogs, some of them has been featured before, and I compiled all of this in case you never seen before. Here they are…

1. Sony Ericsson Xperia X10

2. Samsung Nexus S .PSD

3. HTC EVO 4G .PSD

4. HTC G1 Dream Smartphone .PSD

5. HTC G2 .PSD

6. HTC Desire HD .PSD

7. Motorola Droid X .PSD

8. Motorola Droid 2 .PSD

9. Samsung i9000 Galaxy S .PSD

10. HTC Wildfire .PSD

11. Google Nexus One Redux .PSD

12. Motorola Droid .PSD

13. Samsung Galaxy Tab P1000 .PSD

14. HTC SABER HD Tablet .PSD

15. HTC Incredible Smartphone .PSD

16. HTC Aurora Concept

17. HTC HD2 Android. v1

18. Android Music App Mockup PSD

19. HTC Hero Free Android UI

20. Android GUI 2.0

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.

Google Maps Navigation

Google Goggles

Filmscore

Retro Defense

Meebo