Ajax Loader
×
HTML
<!-- We are going to create the Apple iPhone 4s using CSS3 but with only a single element! But before we do it, I'll show you the advanced use of box-shadows that will help you to create anything you like with minimum markup -->
1
<!-- We are going to create the Apple iPhone 4s using CSS3 but with only a single element! But before we do it, I'll show you the advanced use of box-shadows that will help you to create anything you like with minimum markup -->
2
 
3
<div class="iphone"></div>
 
CSS
body {background: #111;}
1
body {background: #111;}
2
 
3
/* First, we'll make the body. After that we'll use :after and :before elements to make other things like buttons */
4
 
5
.iphone {
6
  position: relative;
7
  height: 495px;
8
  width: 250px;
9
  border-radius: 35px;
10
  margin: 50px auto;
11
  
12
  /* We are going to use multiple background images (linear-gradients) here to create the main background, the shine and the screen */
13
  /* This is our first gradient, to draw more, we'll have to write them before this one separated by a comma */
14
  /* Now, we'll draw the screen */
15
  /* The screen should be below the shine, right? */
16
  background: 
17
    linear-gradient(-165deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15) 35%, transparent 35%),
18
    linear-gradient(top, transparent 85px, #222222 85px, #151515 410px, transparent 410px),
19
    linear-gradient(top, #000, #0a0a0a);
20
  
21
  /* Something isn't right... */
22
  /* Now, it's perfect. Try playing with the values below to get a better understanding */
23
  background-repeat: no-repeat;
24
  background-size: 100% 100%, 220px 100%, 100% 100%;
25
  background-position: 0 0, 15px 0, 0 0;
26
  
27
  /* Now we need the aluminium borders and the top button */
28
  /* We'll use box shadows for that */
29
  box-shadow: 0 0 0 3px black,
30
              /* A small divider */
31
              -40px -128px 0 -123px black,
32
              0 0 0 5px #a09f9d,
33
              /* Some metallic shine on the button */
34
              49px -130px 3px -123px #777,
35
              46px -130px 2px -123px #ddd,
36
              /* Top button from here */
37
              62px -111px 0 -105px #8e8d8b,
38
              62px -112px 0 -105px #b4b3b1,
39
              62px -113px 0 -105px #666;
40
}
41
 
42
/* Our phone's body is complete! Now we'll move onto the home button, front cam and the speaker.. */
43
/* We are going to use :after pseudo element for that and a lot of box-shadow awesomeness */
44
.iphone:after {
45
  content: '▢';
46
  line-height: 46px;
47
  text-align: center;
48
  font-size: 28px;
49
  color: #666;
50
  position: absolute;
51
  width: 46px;
52
  height: 46px;
53
  border-radius: 50%;
54
  background: white;
55
  bottom: 18px;
56
  left: 100px;
57
  border: 2px solid #0a0a0a;
58
  
59
  /* We'll use gradients for the depth */
60
  background-image:
61
    linear-gradient(left, rgba(0, 0, 0, 0.85), black); /* Looking good */
62
 
63
  /* Now some box-shadow magic to create speaker and front cam */
64
  box-shadow:
65
    /* Front Cam: looking good */
66
    -39px -410px 0 -23px #000f31,
67
    -39px -410px 0 -22px #0a1c5a,
68
    -40px -410px 0 -21px #0d1216,
69
    -40px -410px 0 -19px #1b191a,
70
  
71
    /* Speaker, it's a mess. Really. */ 
72
    /* now the outer covering of speaker, another mess */
73
    -12px -410px 0 -22px #333,
74
    -8px -410px 0 -22px #333,
75
    -4px -410px 0 -22px #333,
76
    -0px -410px 0 -22px #333,
77
    4px -410px 0 -22px #333,
78
    8px -410px 0 -22px #333,
79
    12px -410px 0 -22px #333,
80
    16px -410px 0 -22px #333,
81
    20px -410px 0 -22px #333,
82
    24px -410px 0 -22px #333,
83
    
84
    -12px -410px 0 -18px #0a0a0a,
85
    -9px -410px 0 -18px #0a0a0a,
86
    -6px -410px 0 -18px #0a0a0a,
87
    -3px -410px 0 -18px #0a0a0a,
88
    0px -410px 0 -18px #0a0a0a,
89
    3px -410px 0 -18px #0a0a0a,
90
    6px -410px 0 -18px #0a0a0a,
91
    9px -410px 0 -18px #0a0a0a,
92
    12px -410px 0 -18px #0a0a0a,
93
    15px -410px 0 -18px #0a0a0a,
94
    18px -410px 0 -18px #0a0a0a,
95
    21px -410px 0 -18px #0a0a0a,
96
    24px -410px 0 -18px #0a0a0a;
97
}
98
 
99
/* Looks good till now. But we are still missing the side buttons and those are pretty easy to make. We'll only use gradient for that ;) */
100
.iphone:before {
101
  position: absolute;
102
  content: '';
103
  width: 2px;
104
  height: 117px;
105
  background: transparent;
106
  top: 40px;
107
  left: -7px;
108
  
109
  /* The shape is building up */
110
  background-image:
111
    /* This is going to be a long top to bottom linear gradient so see the output and code */
112
    /* A final touch ;) */
113
    linear-gradient(left, transparent 0px, transparent 1px, #7a7879 2px),
114
    linear-gradient(top, #383838 1px, #b9b9b9 3px, #b9b9b9 10px, #383838 19px, #b9b9b9 23px, transparent 23px, transparent 53px, #383838 53px, #b9b9b9 54px, #dadada 58px, #383838 62px, black 62px, black 66px, #383838 66px, #b9b9b9 67px, #dadada 68px, #383838 70px, transparent 70px, transparent 100px, #383838 100px, #b9b9b9 101px, #dadada 105px, #383838 109px, black 109px, black 113px, #383838 113px, #b9b9b9 114px, #dadada 115px, #383838 117px);
115
}
116
 
117
/* Thanks for watching the codecast! Now amaze me by creating some cool new single element things :D */
118
/* Buh-bye */
119
/* WAIT! THE IMPOSSIBLE THINGS CANT REMAIN IMPOSSIBLE FOR TOO LONG */
120
 
121
/* I found the solution for the square in the home button, thanks to gondo (http://cssdeck.com/user/gondo). We'll use an ASCII character '▢' as the content */
122
 
123
/* That's it! Now you can go :P */
124
 
125
 
126
 
127
 
128
 
129
 
130
 
131
 
132
 
 

Untitled

CSSDeck G+