JSDM

HTML

 
1
<body>
2
<div class="wrapper">
3
  <div class="hipster">
4
    <div class="hipster-head"></div>
5
    <div class="hipster-hair"></div>
6
    <div class="hipster-glasses"></div>
7
    <div class="hipster-glasses"></div>
8
    <div class="hipster-eyebrow"></div>
9
    <div class="hipster-body"></div>
10
    <div class="hipster-nose"></div>
11
    <div class="hipster-mouth"></div>
12
    <div class="hipster-neck"></div>
13
    <div class="hipster-beard"></div>
14
    <div class="hipster-bag"></div>
15
  </div>
16
  <div class="wrapper">
17
    <div class="speechbubble"></div>
18
  </div>
19
</div>
20
  </body>

CSS

​x
 
1
body{
2
  background:#f5f5f5;
3
}
4
.wrapper {
5
  float:left;
6
  width:270px;
7
  margin:50px 0 0 100px;
8
}
9
​
10
/* HIPSTER */
11
​
12
.hipster-head {
13
  width: 100px;
14
  height: 100px;
15
  background: #f3d2b3;
16
  -moz-border-radius: 50px;
17
  -webkit-border-radius: 50px;
18
  border-radius: 50px;
19
  position:relative;
20
  left:10px;
21
}
22
.hipster-head:before, .hipster-head:after {
23
  content:"";
24
  position:absolute;
25
  display:block;
26
  height:20px;
27
  width:15px;
28
  border-radius: 50%;
29
  background-color: #f3d2b3;
30
  top:40px;
31
  left:-10px;
32
  transition: all .1s linear;
33
}
34
.hipster-head:after {
35
  left:95px;
36
}
37
.hipster-hair {
38
  background:#e77e23;
39
  width:60px;
40
  height:35px;
41
  position:absolute;
42
  top:55px;
43
  -webkit-border-top-right-radius: 100px;
44
  -webkit-border-bottom-left-radius: 100px;
45
  -moz-border-radius-topright: 100px;
46
  -moz-border-radius-bottomleft: 100px;
47
  border-top-right-radius: 100px;
48
  border-bottom-left-radius: 100px;
49
  -webkit-transform: rotate(-45deg);
50
  -moz-transform: rotate(-45deg);
51
  -ms-transform: rotate(-45deg);
52
  -o-transform: rotate(-45deg);
53
}
54
.hipster-hair:before {
55
  content:"";
56
  background:#e77e23;
57
  width:50px;
58
  height:20px;
59
  position:absolute;
60
  top:1px;
61
  left:29px;
62
  -webkit-border-top-right-radius: 100px;
63
  -webkit-border-bottom-left-radius: 100px;
64
  -moz-border-radius-topright: 100px;
65
  -moz-border-radius-bottomleft: 100px;
66
  border-top-right-radius: 100px;
67
  border-bottom-left-radius: 100px;
68
  -webkit-transform: rotate(40deg);
69
  -moz-transform: rotate(40deg);
70
  -ms-transform: rotate(40deg);
71
  -o-transform: rotate(40deg);
72
}
73
.hipster-hair:after {
74
  content:"";
75
  background:#e77e23;
76
  width:50px;
77
  height:35px;
78
  position:absolute;
79
  top:38px;
80
  left:40px;
81
  -webkit-border-top-right-radius: 120px;
82
  -webkit-border-bottom-left-radius: 120px;
83
  -moz-border-radius-topright: 120px;
84
  -moz-border-radius-bottomleft: 120px;
85
  border-top-right-radius: 120px;
86
  border-bottom-left-radius: 120px;
87
  -webkit-transform: rotate(40deg);
88
  -moz-transform: rotate(40deg);
89
  -ms-transform: rotate(40deg);
90
  -o-transform: rotate(40deg);
91
}
92
.hipster-glasses {
93
  background:#7dcec7;
94
  width:8px;
95
  height:3px;
96
  position:relative;
97
  top:-50px;
98
  left:52px;
99
}
100
.hipster-glasses:before, .hipster-glasses:after {
101
  content:"";
102
  display:block;
103
  position:absolute;
104
  top:-10px;
105
  width:25px;
106
  height:20px;
107
  border: 3px solid #7dcec7;
108
  border-radius: 30%;
109
}
110
.hipster-glasses:before {
111
  left:-30px;
112
}
113
.hipster-glasses:after {
114
  left:8px;
115
}
116
.hipster-eyebrow {
117
  width: 12px;
118
  height: 5px;
119
  border-top-left-radius: 110px;
120
  border-top-right-radius: 110px;
121
  border: 2px solid #b19479;
122
  border-bottom: 0;
123
  position:relative;
124
  left:70px;
125
  top:-70px;
126
}
127
.hipster-eyebrow:before {
128
  content:"";
129
  width: 12px;
130
  height: 2px;
131
  border-top-left-radius: 10px;
132
  border-top-right-radius: 10px;
133
  border: 2px solid #b19479;
134
  position:relative;
135
  left:-43px;
136
  top:7px;
137
  display:block;
138
  border-bottom:0;
139
}
140
.hipster-nose {
141
  width: 0;
142
  height: 0;
143
  border-left: 10px solid transparent;
144
  border-right: 10px solid transparent;
145
  border-bottom: 27px solid #e2be9c;
146
  -moz-border-radius: 50%;
147
  -webkit-border-radius: 50%;
148
  border-radius: 50%;
149
  top:-139px;
150
  left:46px;
151
  position:relative;
152
  display:block;
153
}
154
.hipster-nose:before, .hipster-nose:after {
155
  background:#824119;
156
  width:5px;
157
  height:5px;
158
  content:"";
159
  display:block;
160
  position:relative;
161
  border-radius: 100%;
162
}
163
.hipster-nose:before {
164
  left:-23px;
165
  top:-2px;
166
}
167
.hipster-nose:after {
168
  left:16px;
169
  top:-7px;
170
}
171
.hipster-beard {
172
  width: 0;
173
  height: 0;
174
  border-left: 12px solid transparent;
175
  border-right: 12px solid transparent;
176
  border-top: 20px solid #e77e23;
177
  position:relative;
178
  top:-155px;
179
  left:45px;
180
}
181
.hipster-body {
182
  position:relative;
183
  top:-10px;
184
  left:7px;
185
  width:100px;
186
  height:80px;
187
  background-color: #9ae6e6;
188
  background-image:
189
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
190
  background-size: 32px 60px;
191
  -webkit-border-top-right-radius: 100px;
192
  -moz-border-radius-topright: 100px;
193
  border-top-right-radius: 100px;
194
  -webkit-border-top-left-radius: 100px;
195
  -moz-border-radius-topleft: 100px;
196
  border-top-left-radius: 100px;
197
}
198
.hipster-neck {
199
  background:#f3d2b3;
200
  width:30px;
201
  height:30px;
202
  position:relative;
203
  top:-122px;
204
  left:43px;
205
  -webkit-border-bottom-right-radius: 50px;
206
  -moz-border-radius-bottomright: 50px;
207
  border-bottom-right-radius: 50px;
208
  -webkit-border-bottom-left-radius: 50px;
209
  -moz-border-radius-bottomleft: 50px;
210
  border-bottom-left-radius: 50px;
211
}
212
.hipster-mouth {
213
  border: 2px solid black;
214
  border-radius: 50%;
215
  clip: rect(10px, 30px, 30px, 0px);
216
  height: 15px;
217
  left: 155px;
218
  position: absolute;
219
  top: 130px;
220
  width: 15px;
221
}
222
.hipster-bag {
223
  border-top: 15px solid #b19479;
224
  border-left: 2px solid transparent;
225
  border-right: 5px solid transparent;
226
  height: 0;
227
  width: 80px;
228
  position:absolute;
229
  -webkit-transform: rotate(58deg);
230
  -moz-transform: rotate(58deg);
231
  -ms-transform: rotate(58deg);
232
  -o-transform: rotate(58deg);
233
  top:200px;
234
}
235
.hipster-bag:before {
236
  display:block;
237
  position:relative;
238
  content:"";
239
  width:80px;
240
  height:2px;
241
  border-top:2px dashed #895b3f;
242
  top:-4px;
243
}
244
.hipster-bag:after {
245
  display:block;
246
  position:relative;
247
  content:"";
248
  width:80px;
249
  height:2px;
250
  border-top:2px dashed #895b3f;
251
  top:-17px;
252
}
253
/* Speech bubble */
254
​
255
 .speechbubble {
256
  width: 120px;
257
  height: 80px;
258
  background: #f7f3b3;
259
  position: relative;
260
  -moz-border-radius: 10px;
261
  -webkit-border-radius: 10px;
262
  border-radius: 10px;
263
   top:-280px;
264
   left:30px;
265
}
266
.speechbubble:before {
267
  content:"";
268
  position: absolute;
269
  right: 100%;
270
  top: 26px;
271
  width: 0;
272
  height: 0;
273
  border-top: 13px solid transparent;
274
  border-right: 26px solid #f7f3b3;
275
  border-bottom: 3px solid transparent;
276
}
277
​
278
.speechbubble:after{
279
  content:"I was cool before it was popular...♥ ";
280
  position: absolute;
281
  padding:5px;
282
  font-size:14px;
283
  color:#c5ab86;
284
  text-align:center;
285
  font-family: "Times New Roman", Times, serif;
286
}
287
​
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
/* Twitter @EvaTheHun */
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................