Настоящее хобби нашего поколения - это нытье и тупая болтовня ни о чем! Неудачные отношения, проблемы с учёбой, начальник-мудак. Это всё полная фигня. Если у тебя ничего не получается, то есть только один мудак - это ты. И ты сильно удивишься, если узнаешь, как много можно изменить, просто оторвав жопу от дивана!
21-декабря-2023, 22:15 3 0
Кто сказал, что плоский дизайн(Flat) должен быть скучным? Этот милый снеговик легко добавит рождественского настроения в любой дизайн. Для снеговика не используются изображения, он полностью написан на CSS. Стоит немного взглянуть на код CSS и посмотреть, как разработчик использует псевдоселекторы :before и :after для достижения желаемого результата.
HTML
<snowman>
<div class="body">
<div class="head"></div>
<div class="hat"></div>
<div class="scarf"></div>
<div class="buttons"></div>
<div class="hands">
<div class="right-hand"></div>
<div class="left-hand"></div>
</div>
<div class="shadow"></div>
</div>
</snowman>
CSS
* {margin:0;padding:0;box-sizing:border-box;}
html,body {
background:#2c3e50;
height:100%;
}
snowman .body {
width: 200px;
height: 200px;
background: #ecf0f1;
box-shadow: -13px -8px 0px rgba(0,0,0,0.1) inset;
border-radius: 50%;
margin-top: -100px;
position: absolute;
right:0;left:0;margin:0 auto;
margin-top:270px;
}
snowman .body:before {
width: 100px;
height: 100px;
background: #ecf0f1;
box-shadow: -5px 0px 0px rgba(0,0,0,0.1) inset;
border-radius: 50%;
display: inline-block;
content: "";
position: relative;
top: -191px;
left: 46px;
z-index:30;
}
snowman .body:after {
width: 160px;
height: 160px;
background: #ecf0f1;
box-shadow: -7px -5px 0px rgba(0,0,0,0.1) inset;
border-radius: 50%;
display: inline-block;
content: "";
position: relative;
top: -203px;
left: 20px;
}
snowman .body .head {
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 41px 8px 0;
border-color: transparent #FA9A20 transparent transparent;
content: "";
position: relative;
top: -229px;
display: inline-block;
left: -50px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
box-shadow: 0px 43px rgba(0,0,0,0.2) inset;
z-index:30;
}
snowman .body .head:before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: #2c3e50;
display: inline-block;
position: absolute;
top: -23px;
left: 20px;
}
snowman .body .head:after {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: #2c3e50;
display: inline-block;
position: absolute;
top: -26px;
left: 40px;
}
.scarf {
border-bottom: 21px solid rgb(243, 77, 77);
border-left: 18px solid transparent;
border-right: 29px solid transparent;
height: 0;
width: 104px;
position: absolute;
top: -101px;
z-index: 30;
left: 50px;
border-radius: 0px 100% 5px 10px;
}
.scarf:after {
width: 74px;
height: 17px;
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
transform: rotate(86deg);
background: rgb(243, 77, 77);
display: inline-block;
content: "";
position: absolute;
top: 34px;
left: 15px;
border-radius: 50% 0% 50% 50%;
box-shadow: -4px 0px rgba(0,0,0,0.1) inset;
}
snowman .body .shadow {
background: rgba(0,0,0,0.2);
border-radius: 50%;
width: 190px;
height: 30px;
position: absolute;
bottom: -29px;
z-index: 1;
left: 30px;
}
.left-hand {
position: absolute;
top: -30px;
left: -7px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
border-bottom: 6px solid rgba(151, 102, 13, 1);
border-left: 2px solid transparent;
border-right: 0 solid transparent;
height: 0;
width: 36px;
}
.left-hand:before {
width: 81px;
left: -82px;
position: absolute;
content: "";
display: inline-block;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
top: 8px;
border-bottom: 7px solid rgba(128, 84, 6, 1);
border-left: 3px solid transparent;
border-right: 3px solid transparent;
height: 0;
z-index:30;
}
.left-hand:after {
width: 47px;
left: -88px;
position: absolute;
content: "";
display: inline-block;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
transform: rotate(17deg);
top: 3px;
border-bottom: 4px solid rgba(128, 84, 6, 1);
border-left: 3px solid transparent;
border-right: 3px solid transparent;
height: 0;
border-radius: 20px 50% 10% 20%;
}
.right-hand {
position: absolute;
top: -30px;
right: -37px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
border-bottom: 6px solid rgba(151, 102, 13, 1);
border-right: 2px solid transparent;
border-left: 0 solid transparent;
height: 0;
width: 66px;
}
.right-hand:before {
width: 80px;
right: -82px;
position: absolute;
content: "";
display: inline-block;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
top: 7px;
border-bottom: 6px solid rgba(128, 84, 6, 1);
border-right: 3px solid transparent;
border-left: 3px solid transparent;
height: 0;
z-index: 30;
}
.right-hand:after {
width: 47px;
right: -47px;
position: absolute;
content: "";
display: inline-block;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
transform: rotate(-16deg);
top: -6px;
border-bottom: 4px solid rgba(128, 84, 6, 1);
border-right: 3px solid transparent;
border-lrgy: 3px solid transparent;
height: 0;
border-radius: 20px 50% 10% 20%;
}
snowman .hat {
top: -253px;
left: 76px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
position: absolute;
border-radius: 0;
z-index: 20;
border-top: 56px solid rgb(37, 37, 37);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 60px;
border-bottom: 27px solid rgb(246, 62, 62);
}
snowman .buttons {
height: 8px;
width: 8px;
background: #2c3e50;
position: absolute;
border-radius: 50%;
left: 60px;
top: -23px;
z-index: 30;
}
snowman .buttons:before {
height: 10px;
width: 10px;
background: #2c3e50;
position: absolute;
content: "";
display: inline-block;
border-radius: 50%;
top: -30px;
left: 5px;
}
snowman .buttons:after {
height: 6px;
width: 6px;
background: #2c3e50;
position: absolute;
content: "";
display: inline-block;
border-radius: 50%;
top: 30px;
left: 5px;
}