Skip to content

Commit 9b27abd

Browse files
MamataAgrawalMamataAgrawal
authored
Create styles.css
1 parent 20a752e commit 9b27abd

File tree

1 file changed

+268
-0
lines changed

1 file changed

+268
-0
lines changed

‎Vampire with CSS/styles.css

+268
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
body {
2+
background: black;
3+
}
4+
5+
article {
6+
width: 80vmin;
7+
aspect-ratio: 1;
8+
position: absolute;
9+
bottom: 0;
10+
left: 50%;
11+
transform: translateX(-50%);
12+
filter: drop-shadow(0 0 20vmin #feea)
13+
}
14+
15+
article *,
16+
article *::before,
17+
article *::after {
18+
position: absolute;
19+
box-sizing: border-box;
20+
}
21+
22+
.face {
23+
width: 50%;
24+
height: 20%;
25+
border-radius: 30% / 100%;
26+
border: 0.7vmin solid;
27+
top: 52%;
28+
left: 50%;
29+
transform: translate(-50%, -50%);
30+
background: white;
31+
box-shadow: inset -1.5vmin 0 #0002;
32+
}
33+
34+
.face::before {
35+
content: "";
36+
width: 120%;
37+
height: 270%;
38+
border: 0.75vmin solid;
39+
border-bottom: 0.25vmin solid #0000;
40+
border-top: 1vmin solid;
41+
top: 35%;
42+
left: 50%;
43+
transform: translate(-50%, -100%);
44+
border-radius: 100% / 100% 100% 100% 100%;
45+
border-bottom-color: white;
46+
background:
47+
/* radial-gradient(200% 150% at 40% 100%, #0000 50%, #000 51% 55%, #0000 56%) 33.33% 66% / 25.5% 10% no-repeat,
48+
radial-gradient(200% 150% at 60% 100%, #0000 50%, #000 51% 55%, #0000 56%) 66.66% 66% / 25.5% 10% no-repeat, */
49+
radial-gradient(#0000 40%, #fff 0),
50+
51+
radial-gradient(200% 150% at 40% 100%, #fff 50%, #0000 51%) 33.33% 66% / 25.5% 10% no-repeat,
52+
radial-gradient(200% 150% at 60% 100%, #fff 50%, #0000 51%) 66.66% 66% / 25.5% 10% no-repeat,
53+
radial-gradient(200% 150% at 55% 100%, #000 50%, #0000 51%) 35% 65% / 25.5% 10% no-repeat,
54+
radial-gradient(200% 150% at 45% 100%, #000 50%, #0000 51%) 65% 65% / 25.5% 10% no-repeat,
55+
56+
radial-gradient(200% 150% at 40% 100%, #fff 50%, #0000 51%) 33.33% 59% / 25.5% 10% no-repeat,
57+
radial-gradient(200% 150% at 60% 100%, #fff 50%, #0000 51%) 66.66% 59% / 25.5% 10% no-repeat,
58+
radial-gradient(200% 150% at 50% 100%, #000 50%, #0000 51%) 40% 58% / 20% 10% no-repeat,
59+
radial-gradient(200% 150% at 50% 100%, #000 50%, #0000 51%) 60% 58% / 20% 10% no-repeat,
60+
61+
white;
62+
z-index: 1;
63+
background-clip: content-box;
64+
clip-path: polygon(0 0, 100% 0, 100% 87.5%, 0 87.5%);
65+
box-shadow: inset -1.5vmin 0 #0002;
66+
}
67+
68+
.face::after {
69+
content: "";
70+
z-index: 1;
71+
width: 55%;
72+
height: 210%;
73+
top: 60%;
74+
right: 37%;
75+
transform: translate(50%, 0%);
76+
border-radius: 100% / 80% 75% 120% 130%;
77+
background:
78+
#fff;
79+
box-shadow:
80+
inset -1.5vmin 0 #0002,
81+
-10vmin 0 #fff,
82+
0.1vmin 0.25vmin 0 0.75vmin #000,
83+
-10vmin 0.25vmin 0 0.75vmin #000;
84+
clip-path: polygon(110% 18.75%, -100% 18.75%, -100% 150%, 110% 150%)
85+
}
86+
87+
.face * {
88+
z-index: 2;
89+
}
90+
91+
.eye {
92+
--pos: 20%;
93+
--shade:0.3vmin 0.6vmin 0 -0.1vmin;
94+
width: 20%;
95+
aspect-ratio: 1.2;
96+
background:
97+
radial-gradient(circle at 25% 25%, #fff 10%, #0000 0),
98+
black;
99+
border-radius: 50%;
100+
left: var(--pos);
101+
box-shadow:
102+
0 0 0 0.4vmin #fff,
103+
-0.3vmin -0.6vmin 0 -0.1vmin,
104+
var(--shade),
105+
-0.5vmin -0.8vmin 0 -0.1vmin #fff,
106+
-0.8vmin -1.25vmin 0 -0.5vmin
107+
;
108+
}
109+
110+
.eye + .eye {
111+
--shade: 0vmin 0.66vmin 0 -0.1vmin;
112+
left: auto;
113+
right: var(--pos);
114+
background:
115+
radial-gradient(circle at 75% 25%, #fff 10%, #0000 0),
116+
black;
117+
transform: scaleX(-1);
118+
}
119+
120+
.chin {
121+
width: 1vmin;
122+
height: 1.5vmin;
123+
clip-path: polygon(0 0, 100% 0, 50% 100%);
124+
top: 220%;
125+
left: 50%;
126+
transform: translate(-50%, -50%);
127+
background: black;
128+
}
129+
130+
.ear {
131+
--pos: 17%;
132+
--transform: translateY(-50%) rotate(-15deg);
133+
width: 20%;
134+
height: 30%;
135+
border: 0.75vmin solid;
136+
border-bottom-width: 0.6vmin;
137+
border-top-width: 0.8vmin;
138+
background:
139+
radial-gradient(140% 100% at 55% 80%, #0000 10%, #000 0 13%, #0000 0),
140+
radial-gradient(farthest-side at 20% 100%, #0000 89%, #000 0 92%, #0000 0),
141+
white;
142+
border-radius: 100% / 30% 80% 100% 120%;
143+
top: 53%;
144+
left: 17%;
145+
transform: var(--transform);
146+
box-shadow:
147+
inset -1vmin 1vmin #0002,
148+
inset 1vmin 0 #fff;
149+
}
150+
151+
.ear + .ear {
152+
left: auto;
153+
right: var(--pos);
154+
transform: scaleX(-1) var(--transform) ;
155+
box-shadow:
156+
inset 1vmin 1vmin #0002,
157+
inset 1vmin 0 #fff;
158+
}
159+
160+
.mouth {
161+
width: 55%;
162+
height: 70%;
163+
background:
164+
/* fangs */
165+
conic-gradient(at 50% 100%, #fff 8deg, #0000 0 352deg, #fff 0) 15.25% 9% / 9% 50% no-repeat,
166+
conic-gradient(at 50% 100%, #000 9deg, #0000 0 351deg, #000 0) 15.25% 12% / 9% 70% no-repeat,
167+
conic-gradient(at 50% 100%, #fff 8deg, #0000 0 352deg, #fff 0) 84.25% 14% / 9% 50% no-repeat,
168+
conic-gradient(at 50% 100%, #000 9deg, #0000 0 351deg, #000 0) 84.25% 14% / 9% 70% no-repeat,
169+
/* random teeth */
170+
linear-gradient(90deg, #0000 40%, #fff 40.2% 42%, #0000 42.2%) 100% 0 / 100% 49% no-repeat,
171+
linear-gradient(90deg, #0000 49%, #fff 49.2% 51%, #0000 51.2%) 100% 0 / 100% 48% no-repeat,
172+
173+
linear-gradient(90deg, #0000 28%, #fff 28.2% 30%, #0000 30.2%) 100% 0 / 100% 47% no-repeat,
174+
linear-gradient(90deg, #0000 55%, #fff 55.2% 57%, #0000 57.2%) 100% 0 / 100% 47% no-repeat,
175+
176+
linear-gradient(90deg, #0000 67%, #fff 67.2% 69%, #0000 69.2%) 100% 0 / 100% 48.5% no-repeat,
177+
linear-gradient(90deg, #0000 73%, #fff 73.2% 75%, #0000 75.2%) 100% 0 / 100% 46.5% no-repeat,
178+
/* teeth line */
179+
radial-gradient(370% 200% at 50% 0, #0000 22.75%, #000 23% 28%, #0000 28.25%),
180+
/* teeth */
181+
repeating-linear-gradient(90deg, #000 1%, #fff 1.2% 3%, #000 3.2% 4%) 100% 0 / 100% 45% no-repeat,
182+
/* tongue */
183+
radial-gradient(at 36% 100%, #fdd 20%, #0000 20.25%),
184+
radial-gradient(at 64% 100%, #fdd 22%, #0000 22.25%),
185+
radial-gradient(at 36% 100%, #000 22%, #0000 0),
186+
radial-gradient(at 64% 100%, #000 24%, #0000 0)
187+
#000;
188+
top: 110%;
189+
left: 50%;
190+
transform: translateX(-50%) rotate(1.5deg);
191+
border-radius: 50% / 0 0 95% 105%;
192+
border: 0.55vmin solid;
193+
border-bottom: 0.7vmin solid;
194+
border-top: 0;
195+
overflow: hidden;
196+
197+
}
198+
199+
.mouth::after {
200+
content: "";
201+
width: 105%;
202+
height: 40%;
203+
border-radius: 50%;
204+
border: 0.5vmin solid;
205+
border-bottom: 0.7vmin solid;
206+
background: #fff;
207+
top: 0;
208+
left: 50%;
209+
transform: translate(-50%, -50%);
210+
}
211+
212+
.correction {
213+
width: 55%;
214+
height: 30%;
215+
background: #fff;
216+
border-radius: 50%;
217+
top: 105%;
218+
left: 50%;
219+
transform: translate(-50%, -50%) rotate(2deg);
220+
}
221+
222+
.correction::before {
223+
content: "";
224+
transform: rotate(-2deg);
225+
width: 100%;
226+
height: 50%;
227+
background: #fff;
228+
left: -17%;
229+
}
230+
231+
.nose {
232+
width: 2%;
233+
height: 10%;
234+
background: #000;
235+
border-radius: 100% 20% 50% 50%;
236+
top: 70%;
237+
left: 50%;
238+
transform: translate(-100%, 0)
239+
}
240+
241+
.nose::before {
242+
content: "";
243+
width: 100%;
244+
height: 100%;
245+
border-radius: 20% 100% 50% 50%;
246+
background: black;
247+
left: 200%;
248+
}
249+
250+
.nose::after {
251+
content: "";
252+
width: 300%;
253+
height: 100%;
254+
border-top: 0.35vmin solid;
255+
border-radius: 50%;
256+
transform: translate(0, -80%);
257+
}
258+
259+
.clothes {
260+
width: 100%;
261+
height: 50%;
262+
background:
263+
radial-gradient(farthest-side at 50% 0, #0000 97%, #000 97.1%),
264+
conic-gradient(at 50% 200%, #fff 10deg, #000 0 350deg, #fff 0);
265+
bottom: 0;
266+
border-radius: 100% 100% 0 0;
267+
clip-path: polygon(0 0, 100% 0, 100% 30%, 71% 89%, 95% 100%, 2% 100%, 30% 90%, 0 30%)
268+
}

0 commit comments

Comments
 (0)