В этой очередной новогодней статье хотелось бы рассказать о том, как делается снеговик на CSS, надеюсь вам эта статья пригодится и понравится.
Также стоит сказать что в конце статьи вы сможете скачать весь код этой программы.
Основное:
Для начала сделаем основу, это HTML страница.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="snowman"> <div class="hat"></div> <div class="ball head"> <div class="eyes"> <div class="eye"></div> <div class="eye"></div> </div> <div class="carrot"></div> <div class="small"></div> </div> <div class="ball body"> <div class="buttons"> <div class="button"></div> <div class="button"></div> <div class="button"></div> </div> </div> <div class="ball bottom"></div> </div> |
Как можете заметить, если прочитать названия классов, то узнаете, что у снеговика есть шапка, два глаза, морковь и улыбка, также он состоит из трёх шариков.
Теперь можно начать делать CSS.
1 2 3 | body { background-color: blue; } |
Сначала мы делаем синего цвета весь экран браузера, потом используя flexbox делаем так, чтобы шапка и снежные камки построился ровно столбцом, ну и все снежные комки сделаем круглыми, белыми и добавим не большую тень.
Остальная вёрстка:
Делаем шапку и голову, пожалуй это будет самая сложная часть.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | #snowman { display: flex; flex-direction: column; align-items: center; } #snowman .hat { height: 0; width: 40px; border-bottom: 40px solid rgb(109, 109, 109); border-left: 20px solid transparent; border-right: 20px solid transparent; z-index: 1000; margin-bottom: -15px; } #snowman .ball{ border-radius: 50%; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.5); } #snowman .head { height: 75px; width: 75px; margin-bottom: -20px; z-index: 100; } #snowman .head .eyes { display: flex; justify-content: space-between; width: 40px; position: relative; top: 20px; margin: auto; } #snowman .head .eyes .eye { height: 10px; width: 10px; border-radius: 50%; background-color: black; } #snowman .head .carrot { width: 0; height: 0; position: relative; top: 25px; left: -15px; border-top: 5px solid transparent; border-right: 50px solid orange; border-bottom: 5px solid transparent; } #snowman .head .small { position: relative; top: 20px; left: 30px; height: 25px; width: 10px; border-radius: 50px 0 0 50px; border-top: 5px solid #000; border-left: 5px solid #000; border-bottom: 5px solid #000; transform: rotate(-90deg); } |
Как можете заметить морковка и шапка будут сделанные не обычной формы, это делается благодаря грамотной настройки границ, как делать фигуры на CSS, расскажу в другой раз.
В остальном в этой вёрстке нет не чего интересного, это было самое сложное, дальше всё просто.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | #snowman .body { height: 125px; width: 125px; margin-bottom: -60px; z-index: 10; } #snowman .body .buttons { display: flex; flex-direction: column; align-items: center; height: 90px; position: relative; top: 30px; } #snowman .body .button { height: 10px; width: 10px; border-radius: 50%; background-color: brown; margin-bottom: 20px; } #snowman .bottom { height: 175px; width: 175px; z-index: 1; } |
Это всё что нужно было написать для снеговика, вот что получилось.
Также можно добавить снежок из предыдущей статьи, где делали падающий снег на JavaScript (Ссылка на статью).
Вот что получается.
Вывод:
Как видите снеговик на CSS не очень сложно сделать, самое сложное здесь это шапка, морковь и улыбка, в остальном всё понятно и не сложно.
Также можете скачать файлы этой программы, а точнее её вёрстки.
Подписываетесь на соц-сети:
Оценка:
Загрузка...