Ajax Loader
×
HTML 
<div id="censorship">
1
<div id="censorship">
2
<div id="censorship-title">Censorship</div>
3
<div id="censorship-spikes">
4
<div id="censorship-spike-four"></div>
5
<div id="censorship-spikes-one">
6
<div id="censorship-spike-one"></div>
7
<div id="censorship-spike-seven"></div>
8
</div>
9
<div id="censorship-spikes-two">
10
<div id="censorship-spike-two"></div>
11
<div id="censorship-spike-six"></div>
12
</div>
13
<div id="censorship-spikes-three">
14
<div id="censorship-spike-three"></div>
15
<div id="censorship-spike-five"></div>
16
</div>
17
</div>
18
<div id="censorship-head"></div>
19
<div id="censorship-quiet"></div>
20
</div>
 
CSS 
/* More at http://vuild.com  */
1
/* More at http://vuild.com  */
2
 
3
 
4
#censorship {
5
background: #000;
6
height: 950px;
7
width:900px;
8
text-align: center;
9
padding-top: 50px;
10
padding-bottom: 300px;
11
}
12
 
13
#censorship-title {
14
font-size: 5em;
15
font-family:WebfontBold, Arial Black, sans-serif;
16
color: #fff;
17
padding-top: 160px;
18
padding-bottom: 50px;
19
text-transform: uppercase;
20
}
21
 
22
#censorship-head {
23
background: white;
24
margin-left:auto;
25
margin-right:auto;
26
width:250px;
27
margin-top:-200px;
28
height:375px;
29
-webkit-border-radius:98px 98px 98px 98px/
30
112px 112px  168px 168px ;
31
border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
32
}
33
 
34
#censorship-quiet {
35
width:160px;
36
height:50px;
37
z-index:999999;
38
margin-right:auto;
39
margin-left:auto;
40
background: red;
41
margin-top:-121px;
42
-moz-transform: rotate(-13deg);
43
-webkit-transform: rotate(-13deg);
44
-o-transform: rotate(-13deg);
45
-ms-transform: rotate(-13deg);
46
transform: rotate(-13deg);
47
}
48
 
49
 
50
#censorship-spikes {
51
height: 400px;
52
width: 800px;
53
margin-top: 80px;
54
margin-left:auto;
55
margin-right:auto;
56
}
57
 
58
#censorship-spike-four {
59
width: 0;
60
height: 0;
61
border-left: 15px solid transparent;
62
border-bottom: 150px solid #fff;
63
border-right: 15px solid transparent;
64
margin-left:auto;
65
margin-right:auto;
66
margin-bottom: -100px;
67
}
68
 
69
#censorship-spikes-one {
70
height: 150px;
71
width: 650px;
72
margin-left:auto;
73
margin-right:auto;
74
}
75
 
76
#censorship-spike-one {
77
float: left;
78
width: 0;
79
height: 0;
80
margin-top:-19px;
81
margin-left: 190px;
82
border-left: 15px solid transparent;
83
border-bottom: 150px solid #fff;
84
border-right: 15px solid transparent;
85
-moz-transform: rotate(-30deg);
86
-webkit-transform: rotate(-30deg);
87
-o-transform: rotate(-30deg);
88
-ms-transform: rotate(-30deg);
89
transform: rotate(-30deg);
90
}
91
 
92
#censorship-spike-seven {
93
float: right;
94
width: 0;
95
height: 0;
96
margin-top:-19px;
97
margin-right: 190px;
98
border-left: 15px solid transparent;
99
border-bottom: 150px solid #fff;
100
border-right: 15px solid transparent;
101
-moz-transform: rotate(30deg);
102
-webkit-transform: rotate(30deg);
103
-o-transform: rotate(30deg);
104
-ms-transform: rotate(30deg);
105
transform: rotate(30deg);
106
}
107
 
108
#censorship-spikes-two {
109
height: 150px;
110
width: 600px;
111
margin-left:auto;
112
margin-right:auto;
113
}
114
 
115
#censorship-spike-two {
116
float: left;
117
width: 0;
118
height: 0;
119
margin-left: 90px;
120
margin-top: -100px;
121
border-left: 15px solid transparent;
122
border-bottom: 150px solid #fff;
123
border-right: 15px solid transparent;
124
-moz-transform: rotate(-57deg);
125
-webkit-transform: rotate(-57deg);
126
-o-transform: rotate(-57deg);
127
-ms-transform: rotate(-57deg);
128
transform: rotate(-57deg);
129
}
130
 
131
#censorship-spike-six {
132
float: right;
133
width: 0;
134
height: 0;
135
margin-right: 90px;
136
margin-top: -100px;
137
border-left: 15px solid transparent;
138
border-bottom: 150px solid #fff;
139
border-right: 15px solid transparent;
140
-moz-transform: rotate(57deg);
141
-webkit-transform: rotate(57deg);
142
-o-transform: rotate(57deg);
143
-ms-transform: rotate(57deg);
144
transform: rotate(57deg);
145
}
146
 
147
#censorship-spikes-three {
148
height: 100px;
149
width: 600px;
150
margin-left:auto;
151
margin-right:auto;
152
}
153
 
154
#censorship-spike-three {
155
float: left;
156
width: 0;
157
height: 0;
158
margin-top: -170px;
159
margin-left: 60px;
160
border-left: 15px solid transparent;
161
border-bottom: 150px solid #fff;
162
border-right: 15px solid transparent;
163
-moz-transform: rotate(-80deg);
164
-webkit-transform: rotate(-80deg);
165
-o-transform: rotate(-80deg);
166
-ms-transform: rotate(-80deg);
167
transform: rotate(-80deg);
168
}
169
 
170
#censorship-spike-five {
171
float: right;
172
width: 0;
173
height: 0;
174
margin-top: -170px;
175
margin-right: 60px;
176
border-left: 15px solid transparent;
177
border-bottom: 150px solid #fff;
178
border-right: 15px solid transparent;
179
-moz-transform: rotate(80deg);
180
-webkit-transform: rotate(80deg);
181
-o-transform: rotate(80deg);
182
-ms-transform: rotate(80deg);
183
transform: rotate(80deg);
184
}
185
 
186
/* Thanks for looking. More at http://enrappture.com   */
187
 
 

CSS3 Censorship Poster

CSSDeck G+