Отдельные товарищи пологают, что при капитализме будет процветание. Будет, но лишь для кучки буржуев и их лакеев. И.В.Сталин
24-ноября-2023, 20:57 0 0
Красота старинной 8-битной графики вдохновила Энрике Родригеса на создание современного, упрощенного Санты. Его проект «Счастливого Рождества» обладает мощной цифровой атмосферой, которая прекрасно сочетается с нашей компьютеризированной эпохой и онлайн-поздравлениями.
HTML
<div class="pixel"></div>
CSS
body{
background-color: #56bc66;
}
.pixel{
width: 410px;
height: 250px;
position: absolute;
top: calc(50% - 125px);
left: calc(50% - 205px);
}
.pixel:before{
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 0px;
left: 50px;
background-color: #b93600;
box-shadow: 10px 0 #b93600,
/*NOEL*/
20px 0 #b93600,
-10px 10px #b93600,
0px 10px #b93600,
10px 10px #b93600,
20px 10px #b93600,
30px 10px #b93600,
-20px 20px #FFFFFF,
-10px 20px #FFFFFF,
10px 20px #b93600,
20px 20px #b93600,
30px 20px #b93600,
40px 20px #b93600,
-20px 30px #FFFFFF,
-10px 30px #FFFFFF,
10px 30px #b93600,
20px 30px #b93600,
30px 30px #b93600,
40px 30px #b93600,
0px 40px #b93600,
10px 40px #b93600,
20px 40px #b93600,
30px 40px #b93600,
40px 40px #b93600,
50px 40px #b93600,
-10px 50px #b93600,
0px 50px #b93600,
10px 50px #b93600,
20px 50px #b93600,
30px 50px #b93600,
40px 50px #b93600,
50px 50px #b93600,
60px 50px #b93600,
-20px 60px #FFFFFF,
-10px 60px #FFFFFF,
0px 60px #FFFFFF,
10px 60px #FFFFFF,
20px 60px #FFFFFF,
30px 60px #FFFFFF,
40px 60px #FFFFFF,
50px 60px #FFFFFF,
60px 60px #FFFFFF,
70px 60px #FFFFFF,
-10px 70px #FFFFFF,
0px 70px #fdc9a1,
10px 70px #fdc9a1,
20px 70px #fdc9a1,
30px 70px #fdc9a1,
40px 70px #fdc9a1,
50px 70px #fdc9a1,
60px 70px #FFFFFF,
-10px 80px #FFFFFF,
0px 80px #fdc9a1,
10px 80px #000000,
20px 80px #fdc9a1,
30px 80px #fdc9a1,
40px 80px #000000,
50px 80px #fdc9a1,
60px 80px #FFFFFF,
-10px 90px #FFFFFF,
0px 90px #fdc9a1,
10px 90px #fdc9a1,
20px 90px #fdc9a1,
30px 90px #fdc9a1,
40px 90px #fdc9a1,
50px 90px #fdc9a1,
60px 90px #FFFFFF,
-50px 100px #FFFFFF,
-40px 100px #FFFFFF,
-10px 100px #FFFFFF,
0px 100px #fdc9a1,
10px 100px #FFFFFF,
20px 100px #FFFFFF,
30px 100px #FFFFFF,
40px 100px #FFFFFF,
50px 100px #fdc9a1,
60px 100px #FFFFFF,
90px 100px #FFFFFF,
100px 100px #FFFFFF,
-10px 110px #FFFFFF,
-50px 110px #FFFFFF,
-40px 110px #FFFFFF,
0px 110px #FFFFFF,
10px 110px #FFFFFF,
20px 110px #fa6b44,
30px 110px #fa6b44,
40px 110px #FFFFFF,
50px 110px #FFFFFF,
60px 110px #FFFFFF,
90px 110px #FFFFFF,
100px 110px #FFFFFF,
-40px 120px #b93600,
-30px 120px #b93600,
0px 120px #FFFFFF,
10px 120px #FFFFFF,
20px 120px #FFFFFF,
30px 120px #FFFFFF,
40px 120px #FFFFFF,
50px 120px #FFFFFF,
80px 120px #b93600,
90px 120px #b93600,
-40px 130px #b93600,
-30px 130px #b93600,
-20px 130px #b93600,
-10px 130px #b93600,
0px 130px #b93600,
10px 130px #FFFFFF,
20px 130px #FFFFFF,
30px 130px #FFFFFF,
40px 130px #FFFFFF,
50px 130px #b93600,
60px 130px #b93600,
70px 130px #b93600,
80px 130px #b93600,
90px 130px #b93600,
-30px 140px #b93600,
-20px 140px #b93600,
-10px 140px #b93600,
0px 140px #b93600,
10px 140px #b93600,
20px 140px #b93600,
30px 140px #b93600,
40px 140px #b93600,
50px 140px #b93600,
60px 140px #b93600,
70px 140px #b93600,
80px 140px #b93600,
-20px 150px #b93600,
-10px 150px #b93600,
0px 150px #b93600,
10px 150px #b93600,
20px 150px #b93600,
30px 150px #b93600,
40px 150px #b93600,
50px 150px #b93600,
60px 150px #b93600,
70px 150px #b93600,
-10px 160px #b93600,
0px 160px #b93600,
10px 160px #b93600,
20px 160px #b93600,
30px 160px #b93600,
40px 160px #b93600,
50px 160px #b93600,
60px 160px #b93600,
-10px 170px #5c2800,
0px 170px #5c2800,
10px 170px #5c2800,
20px 170px #fcb71a,
30px 170px #fcb71a,
40px 170px #5c2800,
50px 170px #5c2800,
60px 170px #5c2800,
-10px 180px #b93600,
0px 180px #b93600,
10px 180px #b93600,
20px 180px #b93600,
30px 180px #b93600,
40px 180px #b93600,
50px 180px #b93600,
60px 180px #b93600,
-10px 190px #b93600,
0px 190px #b93600,
10px 190px #b93600,
20px 190px #b93600,
30px 190px #b93600,
40px 190px #b93600,
50px 190px #b93600,
60px 190px #b93600,
0px 200px #b93600,
10px 200px #b93600,
40px 200px #b93600,
50px 200px #b93600,
0px 210px #b93600,
10px 210px #b93600,
40px 210px #b93600,
50px 210px #b93600,
0px 220px #000000,
10px 220px #000000,
40px 220px #000000,
50px 220px #000000,
-10px 230px #000000,
0px 230px #000000,
10px 230px #000000,
40px 230px #000000,
50px 230px #000000,
60px 230px #000000,
-10px 240px #000000,
0px 240px #000000,
10px 240px #000000,
40px 240px #000000,
50px 240px #000000,
60px 240px #000000,
/*PRESENT 1*/
120px 240px #000000,
130px 240px #000000,
140px 240px #000000,
150px 240px #000000,
160px 240px #000000,
170px 240px #000000,
180px 240px #000000,
190px 240px #000000,
200px 240px #000000,
120px 230px #000000,
130px 230px #2c5aa9,
140px 230px #2c5aa9,
150px 230px #000000,
160px 230px #fdd929,
170px 230px #000000,
180px 230px #2c5aa9,
190px 230px #2c5aa9,
200px 230px #000000,
120px 220px #000000,
130px 220px #2c5aa9,
140px 220px #2c5aa9,
150px 220px #000000,
160px 220px #fdd929,
170px 220px #000000,
180px 220px #2c5aa9,
190px 220px #2c5aa9,
200px 220px #000000,
120px 210px #000000,
130px 210px #2c5aa9,
140px 210px #2c5aa9,
150px 210px #000000,
160px 210px #fdd929,
170px 210px #000000,
180px 210px #2c5aa9,
190px 210px #2c5aa9,
200px 210px #000000,
120px 200px #000000,
130px 200px #2c5aa9,
140px 200px #2c5aa9,
150px 200px #000000,
160px 200px #fdd929,
170px 200px #000000,
180px 200px #2c5aa9,
190px 200px #2c5aa9,
200px 200px #000000,
120px 190px #000000,
130px 190px #000000,
140px 190px #000000,
150px 190px #000000,
160px 190px #000000,
170px 190px #000000,
180px 190px #000000,
190px 190px #000000,
200px 190px #000000,
130px 180px #000000,
140px 180px #fdd929,
150px 180px #000000,
160px 180px #fdd929,
170px 180px #000000,
180px 180px #fdd929,
190px 180px #000000,
130px 170px #000000,
140px 170px #fdd929,
150px 170px #000000,
160px 170px #000000,
170px 170px #000000,
180px 170px #fdd929,
190px 170px #000000,
140px 160px #000000,
180px 160px #000000,
/*PRESENT 2*/
230px 240px #000000,
240px 240px #000000,
250px 240px #000000,
260px 240px #000000,
270px 240px #000000,
280px 240px #000000,
290px 240px #000000,
300px 240px #000000,
310px 240px #000000,
230px 230px #000000,
240px 230px #cc5ea5,
250px 230px #cc5ea5,
260px 230px #000000,
270px 230px #56bc66,
280px 230px #000000,
290px 230px #cc5ea5,
300px 230px #cc5ea5,
310px 230px #000000,
230px 220px #000000,
240px 220px #cc5ea5,
250px 220px #cc5ea5,
260px 220px #000000,
270px 220px #56bc66,
280px 220px #000000,
290px 220px #cc5ea5,
300px 220px #cc5ea5,
310px 220px #000000,
230px 210px #000000,
240px 210px #cc5ea5,
250px 210px #cc5ea5,
260px 210px #000000,
270px 210px #56bc66,
280px 210px #000000,
290px 210px #cc5ea5,
300px 210px #cc5ea5,
310px 210px #000000,
230px 200px #000000,
240px 200px #cc5ea5,
250px 200px #cc5ea5,
260px 200px #000000,
270px 200px #56bc66,
280px 200px #000000,
290px 200px #cc5ea5,
300px 200px #cc5ea5,
310px 200px #000000,
230px 190px #000000,
240px 190px #000000,
250px 190px #000000,
260px 190px #000000,
270px 190px #000000,
280px 190px #000000,
290px 190px #000000,
300px 190px #000000,
310px 190px #000000,
240px 180px #000000,
250px 180px #56bc66,
260px 180px #000000,
270px 180px #56bc66,
280px 180px #000000,
290px 180px #56bc66,
300px 180px #000000,
240px 170px #000000,
250px 170px #56bc66,
260px 170px #000000,
270px 170px #000000,
280px 170px #000000,
290px 170px #56bc66,
300px 170px #000000,
250px 160px #000000,
290px 160px #000000
}
.pixel:after{
content: "";
width: 5px;
height: 5px;
position: absolute;
top: 95px;
left: 170px;
background-color: #b93600;
box-shadow: 5px 0 #b93600,
/*CHRISTMAS*/
/*C*/
10px 0 #b93600,
-5px -5px #b93600,
0px -5px #b93600,
5px -5px #b93600,
10px -5px #b93600,
15px -5px #b93600,
-5px -10px #b93600,
0px -10px #b93600,
10px -10px #b93600,
15px -10px #b93600,
-10px -15px #b93600,
-5px -15px #b93600,
-10px -20px #b93600,
-5px -20px #b93600,
-5px -25px #b93600,
0px -25px #b93600,
10px -25px #b93600,
15px -25px #b93600,
-5px -30px #b93600,
0px -30px #b93600,
5px -30px #b93600,
10px -30px #b93600,
15px -30px #b93600,
0px -35px #b93600,
5px -35px #b93600,
10px -35px #b93600,
/*H*/
25px 0px #b93600,
30px 0px #b93600,
40px 0px #b93600,
45px 0px #b93600,
25px -5px #b93600,
30px -5px #b93600,
40px -5px #b93600,
45px -5px #b93600,
25px -10px #b93600,
30px -10px #b93600,
40px -10px #b93600,
45px -10px #b93600,
25px -15px #b93600,
30px -15px #b93600,
35px -15px #b93600,
40px -15px #b93600,
45px -15px #b93600,
25px -20px #b93600,
30px -20px #b93600,
35px -20px #b93600,
40px -20px #b93600,
45px -20px #b93600,
25px -25px #b93600,
30px -25px #b93600,
40px -25px #b93600,
45px -25px #b93600,
25px -30px #b93600,
30px -30px #b93600,
40px -30px #b93600,
45px -30px #b93600,
25px -35px #b93600,
30px -35px #b93600,
40px -35px #b93600,
45px -35px #b93600,
/*R*/
55px 0 #b93600,
60px 0 #b93600,
70px 0 #b93600,
75px 0 #b93600,
55px 0 #b93600,
60px 0 #b93600,
70px 0 #b93600,
75px 0 #b93600,
55px -5px #b93600,
60px -5px #b93600,
70px -5px #b93600,
75px -5px #b93600,
55px -10px #b93600,
60px -10px #b93600,
65px -10px #b93600,
70px -10px #b93600,
55px -15px #b93600,
60px -15px #b93600,
65px -15px #b93600,
55px -20px #b93600,
60px -20px #b93600,
65px -20px #b93600,
70px -20px #b93600,
55px -25px #b93600,
60px -25px #b93600,
70px -25px #b93600,
75px -25px #b93600,
55px -30px #b93600,
60px -30px #b93600,
70px -30px #b93600,
75px -30px #b93600,
55px -35px #b93600,
60px -35px #b93600,
65px -35px #b93600,
70px -35px #b93600,
/*I*/
85px 0px #b93600,
90px 0px #b93600,
85px -5px #b93600,
90px -5px #b93600,
85px -10px #b93600,
90px -10px #b93600,
85px -15px #b93600,
90px -15px #b93600,
85px -20px #b93600,
90px -20px #b93600,
85px -25px #b93600,
90px -25px #b93600,
85px -30px #b93600,
90px -30px #b93600,
85px -35px #b93600,
90px -35px #b93600,
/*s*/
105px 0px #b93600,
110px 0px #b93600,
100px -5px #b93600,
105px -5px #b93600,
110px -5px #b93600,
115px -5px #b93600,
100px -10px #b93600,
115px -10px #b93600,
115px -15px #b93600,
110px -15px #b93600,
110px -20px #b93600,
105px -20px #b93600,
100px -20px #b93600,
100px -25px #b93600,
100px -30px #b93600,
105px -30px #b93600,
110px -30px #b93600,
115px -30px #b93600,
105px -35px #b93600,
110px -35px #b93600,
/*T*/
130px 0px #b93600,
135px 0px #b93600,
130px -5px #b93600,
135px -5px #b93600,
130px -10px #b93600,
135px -10px #b93600,
130px -15px #b93600,
135px -15px #b93600,
130px -20px #b93600,
135px -20px #b93600,
130px -25px #b93600,
135px -25px #b93600,
125px -30px #b93600,
130px -30px #b93600,
135px -30px #b93600,
140px -30px #b93600,
125px -35px #b93600,
130px -35px #b93600,
135px -35px #b93600,
140px -35px #b93600,
/*M*/
150px 0px #b93600,
155px 0px #b93600,
175px 0px #b93600,
180px 0px #b93600,
150px -5px #b93600,
155px -5px #b93600,
175px -5px #b93600,
180px -5px #b93600,
150px -10px #b93600,
155px -10px #b93600,
175px -10px #b93600,
180px -10px #b93600,
150px -15px #b93600,
155px -15px #b93600,
175px -15px #b93600,
180px -15px #b93600,
150px -20px #b93600,
155px -20px #b93600,
165px -20px #b93600,
175px -20px #b93600,
180px -20px #b93600,
150px -25px #b93600,
155px -25px #b93600,
160px -25px #b93600,
165px -25px #b93600,
170px -25px #b93600,
175px -25px #b93600,
180px -25px #b93600,
150px -30px #b93600,
155px -30px #b93600,
160px -30px #b93600,
170px -30px #b93600,
175px -30px #b93600,
180px -30px #b93600,
150px -35px #b93600,
155px -35px #b93600,
175px -35px #b93600,
180px -35px #b93600,
/*A*/
190px 0px #b93600,
195px 0px #b93600,
205px 0px #b93600,
210px 0px #b93600,
190px -5px #b93600,
195px -5px #b93600,
200px -5px #b93600,
205px -5px #b93600,
210px -5px #b93600,
190px -10px #b93600,
195px -10px #b93600,
200px -10px #b93600,
205px -10px #b93600,
210px -10px #b93600,
190px -15px #b93600,
195px -15px #b93600,
205px -15px #b93600,
210px -15px #b93600,
190px -20px #b93600,
195px -20px #b93600,
205px -20px #b93600,
210px -20px #b93600,
190px -25px #b93600,
195px -25px #b93600,
200px -25px #b93600,
205px -25px #b93600,
210px -25px #b93600,
195px -30px #b93600,
200px -30px #b93600,
205px -30px #b93600,
200px -35px #b93600,
/*S*/
225px 0px #b93600,
230px 0px #b93600,
220px -5px #b93600,
225px -5px #b93600,
230px -5px #b93600,
235px -5px #b93600,
220px -10px #b93600,
235px -10px #b93600,
235px -15px #b93600,
230px -15px #b93600,
230px -20px #b93600,
225px -20px #b93600,
220px -20px #b93600,
220px -25px #b93600,
220px -30px #b93600,
225px -30px #b93600,
230px -30px #b93600,
235px -30px #b93600,
225px -35px #b93600,
230px -35px #b93600,
/*MERRY*/
/*M*/
40px -45px #f0f526,
45px -45px #f0f526,
65px -45px #f0f526,
70px -45px #f0f526,
40px -50px #f0f526,
45px -50px #f0f526,
65px -50px #f0f526,
70px -50px #f0f526,
40px -55px #f0f526,
45px -55px #f0f526,
65px -55px #f0f526,
70px -55px #f0f526,
40px -60px #f0f526,
45px -60px #f0f526,
65px -60px #f0f526,
70px -60px #f0f526,
40px -65px #f0f526,
45px -65px #f0f526,
55px -65px #f0f526,
65px -65px #f0f526,
70px -65px #f0f526,
40px -70px #f0f526,
45px -70px #f0f526,
50px -70px #f0f526,
55px -70px #f0f526,
60px -70px #f0f526,
65px -70px #f0f526,
70px -70px #f0f526,
40px -75px #f0f526,
45px -75px #f0f526,
50px -75px #f0f526,
60px -75px #f0f526,
65px -75px #f0f526,
70px -75px #f0f526,
40px -80px #f0f526,
45px -80px #f0f526,
65px -80px #f0f526,
70px -80px #f0f526,
/*E*/
80px -45px #f0f526,
85px -45px #f0f526,
90px -45px #f0f526,
95px -45px #f0f526,
80px -50px #f0f526,
85px -50px #f0f526,
90px -50px #f0f526,
95px -50px #f0f526,
80px -55px #f0f526,
85px -55px #f0f526,
80px -60px #f0f526,
85px -60px #f0f526,
90px -60px #f0f526,
80px -65px #f0f526,
85px -65px #f0f526,
90px -65px #f0f526,
80px -70px #f0f526,
85px -70px #f0f526,
80px -75px #f0f526,
85px -75px #f0f526,
90px -75px #f0f526,
95px -75px #f0f526,
80px -80px #f0f526,
85px -80px #f0f526,
90px -80px #f0f526,
95px -80px #f0f526,
/*R*/
105px -45px #f0f526,
110px -45px #f0f526,
120px -45px #f0f526,
125px -45px #f0f526,
105px -50px #f0f526,
110px -50px #f0f526,
120px -50px #f0f526,
125px -50px #f0f526,
105px -55px #f0f526,
110px -55px #f0f526,
115px -55px #f0f526,
120px -55px #f0f526,
105px -60px #f0f526,
110px -60px #f0f526,
115px -60px #f0f526,
105px -65px #f0f526,
110px -65px #f0f526,
115px -65px #f0f526,
120px -65px #f0f526,
105px -70px #f0f526,
110px -70px #f0f526,
120px -70px #f0f526,
125px -70px #f0f526,
105px -75px #f0f526,
110px -75px #f0f526,
120px -75px #f0f526,
125px -75px #f0f526,
105px -80px #f0f526,
110px -80px #f0f526,
115px -80px #f0f526,
120px -80px #f0f526,
/*R*/
135px -45px #f0f526,
140px -45px #f0f526,
150px -45px #f0f526,
155px -45px #f0f526,
135px -50px #f0f526,
140px -50px #f0f526,
150px -50px #f0f526,
155px -50px #f0f526,
135px -55px #f0f526,
140px -55px #f0f526,
145px -55px #f0f526,
150px -55px #f0f526,
135px -60px #f0f526,
140px -60px #f0f526,
145px -60px #f0f526,
135px -65px #f0f526,
140px -65px #f0f526,
145px -65px #f0f526,
150px -65px #f0f526,
135px -70px #f0f526,
140px -70px #f0f526,
150px -70px #f0f526,
155px -70px #f0f526,
135px -75px #f0f526,
140px -75px #f0f526,
150px -75px #f0f526,
155px -75px #f0f526,
135px -80px #f0f526,
140px -80px #f0f526,
145px -80px #f0f526,
150px -80px #f0f526,
/*Y*/
175px -45px #f0f526,
180px -45px #f0f526,
175px -50px #f0f526,
180px -50px #f0f526,
175px -55px #f0f526,
180px -55px #f0f526,
175px -60px #f0f526,
180px -60px #f0f526,
170px -65px #f0f526,
175px -65px #f0f526,
180px -65px #f0f526,
185px -65px #f0f526,
170px -70px #f0f526,
185px -70px #f0f526,
165px -75px #f0f526,
170px -75px #f0f526,
185px -75px #f0f526,
190px -75px #f0f526,
165px -80px #f0f526,
170px -80px #f0f526,
185px -80px #f0f526,
190px -80px #f0f526;
opacity: 1;
animation: animateText 3s linear infinite;
}
@keyframes animateText{
0%{
opacity: .5
}
50%{
opacity: 1
}
100%{
opacity: .5
}
}