Monkey Place

Как рисовать граффити в CSS

Граффити – это вид уличного искусства, который отличается яркостью и неповторимостью. Но что, если вы хотите добавить граффити-стиль на свой сайт? В этой статье мы рассмотрим, как рисовать граффити в CSS.

Организация файлов

Для начала, создайте папку «граффити» в своем проекте. Создайте файлы HTML и CSS в этой папке. Обычно эти файлы называются index.html и style.css.

Использование шрифтов

Чтобы добавить в ваш сайт граффити-стиль, вам нужно использовать соответствующий шрифт. Возможно, вы уже знаете такие шрифты, как Graffiti и Wildstyle. Если нет, вы можете найти множество подходящих шрифтов в Интернете или же создать свой собственный. Шрифты можно загрузить с помощью тега @font-face в вашем файле CSS.

@font-face {
  font-family: 'Graffiti';
  src: url('Graffiti.ttf');
}

@font-face {
  font-family: 'Wildstyle';
  src: url('Wildstyle.otf');
}

Рисование текста

Теперь, когда наш шрифт настроен, можно начать рисовать граффити-текст. Для этого используется CSS-свойство text-shadow. Вы можете выбрать цвет фона и цвет текста, а также размер и положение тени.

h1 {
  font-family: 'Graffiti', cursive;
  font-size: 6rem;
  color: #fff;
  text-shadow: 0 0 10px #000, 0 0 20px #000,
    0 0 30px #000, 0 0 40px #FF00FF,
    0 0 70px #FF00FF, 0 0 80px #FF00FF,
    0 0 100px #FF00FF, 0 0 150px #FF00FF;
}

Рисование фигур

Чтобы добиться большей сложности, вы можете использовать свойство border. Это свойство позволяет вам рисовать различные формы и линии. Например, чтобы создать овал, используйте следующий код:

.oval {
  border-radius: 50%;
  width: 100px;
  height: 150px;
  background-color: #FF00FF;
}

Рисование градиентов

Еще один способ добавить интересный граффити-стиль – использование градиентов. Вы можете создать градиенты с помощью свойства background. Вот пример:

.bg {
  background: linear-gradient(to bottom, #444444, #999999);
}

Заключение

Рисование граффити в CSS – это простой и увлекательный способ, чтобы добавить в ваш сайт уникальный стиль. С помощью этих простых техник вы можете создавать разные фигуры, линии и тексты, которые будут впечатлять ваших пользователей.