Ajax Loader
×

Untitled

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
 
3
<html>
4
  <head>
5
    <title>TouK weekly workshop - Shapes</title>
6
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
7
    <link rel="stylesheet" type="text/css" href="reset.css"/>
8
    <style>
9
10
    </style>
11
  </head>
12
  <body>
13
    <div class="panelWrapper">
14
      <div class="santa">
15
        <div class="face"></div>
16
        <div class="hat"></div>
17
        <div class="hatFur"></div>
18
        <div class="eyeLeft"></div>
19
        <div class="eyeRight"></div>
20
        <div class="beard_left"></div>
21
        <div class="beard_right"></div>
22
        <div class="nose"></div>
23
        <div class="mouth"></div>
24
      </div>
25
    </div>
26
  </body>
27
</html>
 
CSS 
html {
1
html {
2
        height: 100%;
3
      }
4
      body {
5
        background-image: url('background.png');
6
        display: table;
7
        margin: 0;
8
        height: 100%;
9
        width: 100%;
10
        background-color: #eee;
11
      }
12
      .panelWrapper {
13
        display: table-cell;
14
        vertical-align: middle;
15
      }
16
17
      .face {
18
        background-color: #FFC4A7;
19
        border-radius: 60px 60px 60px 60px;
20
        height: 102px;
21
        left: 50px;
22
        position: absolute;
23
        top: 105px;
24
        width: 100px;
25
      }
26
 
27
      .santa {
28
        height: 300px;
29
        width: 200px;
30
        position: relative;
31
        margin: 50px auto 0;
32
        cursor: pointer;
33
      }
34
 
35
      .santa .hat {
36
        position: absolute;
37
        left: 50%;
38
        margin: 0 0 0 -50px;
39
        width: 0px;
40
        height: 0px;
41
        border-style: solid;
42
        border-width: 0 50px 110px 50px;
43
        border-color: transparent transparent #a40000 transparent;
44
        line-height: 0px;
45
        _border-color: #000000 #000000 #a40000 #000000;
46
        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
47
      }
48
 
49
      .santa .hat:after {
50
        content: '';
51
        position: absolute;
52
        width: 0px;
53
        height: 0px;
54
        border-style: solid;
55
        border-width: 40px 0 0 100px;
56
        border-color: transparent transparent transparent #a40000;
57
58
        -webkit-transform: rotate(15deg);
59
        -webkit-transform-origin: top left;
60
61
        -moz-transform: rotate(15deg);
62
        -moz-transform-origin: top left;
63
64
        -ms-transform: rotate(15deg);
65
        -ms-transform-origin: top left;
66
67
        -o-transform: rotate(15deg);
68
        -o-transform-origin: top left;
69
70
        transform: rotate(15deg);
71
        transform-origin: top left;
72
      }
73
 
74
      .santa .hat:before {
75
        content: '';
76
        position: absolute;
77
        width: 16px;
78
        height: 16px;
79
        background: #fff;
80
        left: 75px;
81
        top: 55px;
82
        -webkit-border-radius: 50%;
83
        -moz-border-radius: 50%;
84
        border-radius: 50%;
85
        z-index: 1;
86
      }
87
 
88
      .santa .hatFur {
89
        background: none repeat scroll 0 0 #FFFFFF;
90
        border-radius: 50px 50px 50px 50px;
91
        box-shadow: 0 6px 2px -6px #000000;
92
        height: 24px;
93
        left: 50%;
94
        margin: 0 0 0 -55px;
95
        position: absolute;
96
        top: 100px;
97
        width: 110px;
98
      }
99
100
      .santa .eyeLeft {
101
        background: none repeat scroll 0 0 #FFFFFF;
102
        border-radius: 50% 50% 50% 50%;
103
        content: "";
104
        height: 16px;
105
        left: 65px;
106
        position: absolute;
107
        top: 135px;
108
        width: 20px;
109
      }
110
111
      .santa .eyeRight {
112
        background: none repeat scroll 0 0 #FFFFFF;
113
        border-radius: 50% 50% 50% 50%;
114
        content: "";
115
        height: 16px;
116
        position: absolute;
117
        right: 65px;
118
        top: 135px;
119
        width: 20px;
120
      }
121
122
      .eyeLeft:after, .eyeRight:after {
123
        background-color: #000099;
124
        border-radius: 5px 5px 5px 5px;
125
        content: "";
126
        height: 10px;
127
        left: 6px;
128
        opacity: 0.75;
129
        position: absolute;
130
        top: 4px;
131
        width: 10px;
132
      }
133
134
      .santa:hover .eyeLeft:after, .santa:hover .eyeRight:after {
135
        opacity: 0.05;
136
      }
137
138
      .santa:hover .eyeLeft, .santa:hover .eyeRight {
139
        background-color: #FFB391;
140
        border-bottom: 1px solid #FF7D55;
141
        height: 14px;
142
      }
143
144
      .santa .beard_left, .santa .beard_right {
145
        position: absolute;
146
        height: 120px;
147
        width: 60px;
148
        bottom: 0;
149
        left: 50%;
150
        margin: 0 0 0 -60px;
151
        overflow: hidden;
152
      }
153
 
154
      .santa .beard_right {
155
        margin: 0;
156
      }
157
 
158
      .santa .beard_left:after {
159
        content: '';
160
        position: absolute;
161
        background: white;
162
        width: 150px;
163
        height: 150px;
164
        -webkit-border-radius: 50%;
165
        -moz-border-radius: 50%;
166
        border-radius: 50%;
167
        bottom: 0px;
168
        left: 0;
169
      }
170
 
171
      .santa .beard_left:before {
172
        content: '';
173
        position: absolute;
174
        background-color: #FFC4A7;
175
        width: 73px;
176
        height: 50px;
177
        border-radius: 50%;
178
        top: -45px;
179
        left: 2px;
180
        z-index: 5;
181
      }
182
 
183
      .santa .beard_right:after {
184
        content: '';
185
        position: absolute;
186
        background-color: #FFC4A7;
187
        width: 73px;
188
        height: 50px;
189
        border-radius: 50%;
190
        top: -45px;
191
        right: 2px;
192
        z-index: 5;
193
      }
194
 
195
      .santa .beard_right:before {
196
        content: '';
197
        position: absolute;
198
        background: white;
199
        width: 150px;
200
        height: 150px;
201
        -webkit-border-radius: 50%;
202
        -moz-border-radius: 50%;
203
        border-radius: 50%;
204
        bottom: 0px;
205
        right: 0
206
      }
207
      .nose {
208
        background-color: #FFB391;
209
        border: 1px solid #FFB391;
210
        border-radius: 10px 10px 5px 5px;
211
        box-shadow: 0 3px 2px #666666;
212
        height: 20px;
213
        left: 93px;
214
        position: absolute;
215
        top: 162px;
216
        width: 15px;
217
        z-index: 100;
218
      }
219
220
      .mouth {
221
        background-color: #FFB391;
222
        border-radius: 0 0 15px 15px;
223
        height: 10px;
224
        left: 87px;
225
        position: absolute;
226
        top: 200px;
227
        width: 30px;
228
      }
 

Untitled

CSSDeck G+