Draw iPhone with CSS3

Let’s take a sneak peek at the renderings first. (This is definitely not a picture. Well~ why are these words so weird~)

Don’t ask me how much my iPhone is, because I don’t know, I haven’t used it, so you know.

css style part

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*Set the rounded border of the div element*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*10px from top margin, left and right center*/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*When the width and height are the same, it is a circle*/ margin:10px auto; }

The /*:before selector inserts content before the content of the selected element. */ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*Even if the inserted content is empty, it needs to be written, otherwise it will not be displayed*/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML part

I’ll add some more stuff later.

Clicking the Home button will turn on the phone’s screen, and then turn off the screen again after 5 seconds.

The rendering of the screen on, of course the middle one is a picture (my mobile phone)

JavaScript part

Bind the onclick event to the div in the button part and call the following function;

var btn_obj = document.getElementById(“screen”); function btn(){ btn_obj.style.background = “url(1.jpg)”; btn_obj.style.backgroundSize = “225px 385px”; setTimeout(“black()",5000); }

function black(){ btn_obj.style.background = “none”; btn_obj.style.backgroundColor = “#0A0A0A”; }