Рождественские графика в виде смайлов для сайта на Новый год

Танцуй так, как будто на тебя никто не смотрит. Пой, как будто тебя никто не слышит. Люби так, как будто тебя никогда не предавали, и живи так, как будто земля — это рай.

Эти рождественские элементы в виде простых смайлов оформленных при помощи CSS помогут вам создать праздничное настроение на вашем веб-ресурсе в преддверии новогодних праздников. Тень добавляет эффект глубины. Вы можете изменить их размер и непрозрачность. Так же можно сменить позиционирование. Это быстрый способ добавить рождественскую графику с помощью смайлов, таких как ёлка, дед Мороз (Санта Клаус) и коробка с подарком. Неоспоримым преимуществом является то, что вам не нужно рисовать никаких дополнительных значков.

HTML



<div class="text">🎅</div>
<div class="text">🎄</div>
<div class="text">🎁</div>

CSS

:root {
  --background: #c0c0c0;
  --backgroundShadow: -6px 6px 15px rgba(0,0,0,0.5);
  --textshadow: 6px -6px 15px rgba(255,255,255,0.8);
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
}
.text {
  color: var(--background);
  font-size: 8em;
  font-weight: bold;
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  text-shadow: var(--backgroundShadow), 
               var(--textshadow);
 }