Создание CSS-арта: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Добро пожаловать в раздел CSS-арта! Здесь вы сможете попрактиковаться в создании визуальных образов, используя только HTML и CSS. Задания построены по принципу 'от простого к сложному': начнем с базовых фигур и постепенно перейдем к более комплексным композициям. В каждом задании вам будет предоставлен HTML-код и частично заполненный CSS. Ваша задача — вписать недостающие фрагменты кода в специальные поля ввода, чтобы завершить изображение. Это отличный способ отточить навыки позиционирования, работы с псевдоэлементами, градиентами, тенями и трансформациями, применяя их в творческом ключе.

Список тем

Создание квадрата

Самая базовая фигура в CSS-арте. У нас есть div с классом 'square'. Ваша задача — задать ему фон, чтобы он стал видимым. Цвет фона уже определен, вам нужно указать правильное свойство.

CSS

.square {
  width: 100px;
  height: 100px;
  /* Задайте цвет фона */
  input1: #e74c3c;
  margin: 50px auto;
}

                     .square {
  width: 100px;
  height: 100px;
  /* Задайте цвет фона */
  input1: #e74c3c;
  margin: 50px auto;
}

HTML

<div class="square"></div>

Чтобы задать цвет фона элементу, используется свойство `background-color` или его сокращенная версия `background`. В данном случае подойдет любое из них.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Создание круга

Превратим квадрат в круг. У нас есть элемент с классом 'circle', который уже имеет размеры и фон. Используйте свойство для скругления углов, чтобы сделать его идеально круглым.

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px auto;
  /* Превратите квадрат в круг */
  input1: 50%;
}

                     .circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px auto;
  /* Превратите квадрат в круг */
  input1: 50%;
}

HTML

<div class="circle"></div>

Чтобы создать круг из квадратного элемента, используйте свойство `border-radius`. Значение `50%` сделает углы полностью скругленными.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Треугольник с помощью границ

Создадим треугольник, используя только границы элемента. У нас есть пустой div 'triangle'. Задайте ему прозрачный фон и используйте толстые границы разных цветов (одна цветная, остальные прозрачные), чтобы сформировать треугольник, указывающий вверх.

CSS

.triangle {
  width: 0;
  height: 0;
  margin: 50px auto;
  /* Задайте стиль границ */
  input1: solid;
  /* Задайте ширину границ */
  border-width: 0 50px 100px 50px;
  /* Задайте цвета границ (верхняя, правая, нижняя, левая) */
  input2: transparent transparent #f1c40f transparent;
}

                     .triangle {
  width: 0;
  height: 0;
  margin: 50px auto;
  /* Задайте стиль границ */
  input1: solid;
  /* Задайте ширину границ */
  border-width: 0 50px 100px 50px;
  /* Задайте цвета границ (верхняя, правая, нижняя, левая) */
  input2: transparent transparent #f1c40f transparent;
}

HTML

<div class="triangle"></div>

Установите ширину и высоту элемента в 0. Задайте толстые границы (`border-width`). Сделайте боковые и верхнюю границы прозрачными (`transparent`), а нижнюю — цветной. Используйте свойство `border-style` со значением `solid`. Также не забудьте указать свойство `border-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сердце из CSS

Создадим символ сердца, используя основной элемент и два псевдоэлемента (`::before` и `::after`). Основной элемент 'heart' будет служить базой, а псевдоэлементы — верхними округлыми частями. Вам нужно правильно спозиционировать псевдоэлементы и задать им нужную трансформацию.

CSS

.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.heart {
  input1: relative;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  input2: rotate(-45deg);
  margin: 50px;
}

.heart::before,
.heart::after {
  content: "";
  input3: absolute;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50px;
}

                     .heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.heart {
  input1: relative;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  input2: rotate(-45deg);
  margin: 50px;
}

.heart::before,
.heart::after {
  content: "";
  input3: absolute;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50px;
}

HTML

<div class="heart-container">
  <div class="heart"></div>
</div>

Основному элементу задайте `position: relative`. Псевдоэлементам задайте `position: absolute`, одинаковые размеры, фон и `border-radius: 50%` для скругления. С помощью `transform: rotate()` поверните основной элемент и псевдоэлементы. Используйте свойства `top`, `left`, `right` для точного позиционирования псевдоэлементов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Пакман

Создадим знаменитого Пакмана с помощью трюка с границами. У нас есть div 'pacman'. Используйте границы, чтобы сформировать круглый сектор, напоминающий открытый рот Пакмана.

CSS

.pacman-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.pacman {
  width: 0;
  height: 0;
  /* Граница сверху */
  border-top: 60px solid #f1c40f;
  /* Граница снизу */
  input1: 60px solid #f1c40f;
  /* Граница справа (делаем рот) */
  border-right: 60px solid transparent;
  /* Граница слева */
  border-left: 60px solid #f1c40f;
  /* Скругляем фигуру */
  input2: 50%;
}

                     .pacman-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.pacman {
  width: 0;
  height: 0;
  /* Граница сверху */
  border-top: 60px solid #f1c40f;
  /* Граница снизу */
  input1: 60px solid #f1c40f;
  /* Граница справа (делаем рот) */
  border-right: 60px solid transparent;
  /* Граница слева */
  border-left: 60px solid #f1c40f;
  /* Скругляем фигуру */
  input2: 50%;
}

HTML

<div class="pacman-container">
  <div class="pacman"></div>
</div>

Задайте элементу `width: 0` и `height: 0`. Используйте `border` для создания секторов. Задайте большую границу справа (`border-right`) прозрачной, а верхнюю и нижнюю границы (`border-top`, `border-bottom`) - цветными. Свойство `border-radius: 50%` сделает фигуру круглой.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Облако с помощью теней

Создадим простое облако, используя один основной элемент и несколько теней (`box-shadow`). У нас есть div 'cloud'. Добавьте несколько теней с разными смещениями, чтобы имитировать округлые формы облака.

CSS

.cloud-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #3498db; /* Небо */
}

.cloud {
  width: 100px;
  height: 60px;
  background: #ecf0f1;
  border-radius: 60px;
  position: relative;
  /* Добавляем тени для формирования облака */
  input1: 
    /* Тень 1 (слева сверху) */
    -40px 20px 0 -10px #ecf0f1, 
    /* Тень 2 (справа сверху) */
    40px 10px 0 -15px #ecf0f1, 
    /* Тень 3 (слева снизу) */
    -25px 40px 0 0px #ecf0f1, 
    /* Тень 4 (справа снизу) */
    50px 35px 0 0px #ecf0f1;
}

                     .cloud-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #3498db; /* Небо */
}

.cloud {
  width: 100px;
  height: 60px;
  background: #ecf0f1;
  border-radius: 60px;
  position: relative;
  /* Добавляем тени для формирования облака */
  input1: 
    /* Тень 1 (слева сверху) */
    -40px 20px 0 -10px #ecf0f1, 
    /* Тень 2 (справа сверху) */
    40px 10px 0 -15px #ecf0f1, 
    /* Тень 3 (слева снизу) */
    -25px 40px 0 0px #ecf0f1, 
    /* Тень 4 (справа снизу) */
    50px 35px 0 0px #ecf0f1;
}

HTML

<div class="cloud-container">
  <div class="cloud"></div>
</div>

Используйте свойство `box-shadow`. Можно добавить несколько теней, перечисляя их через запятую. Каждая тень описывается смещением по X, смещением по Y, размытием, растяжением и цветом. Используйте один цвет для всех теней и основного элемента, чтобы они слились в одну форму. Не забудьте задать `border-radius` основному элементу.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Инь и Ян

Создадим символ Инь и Ян. Используем основной круглый элемент с градиентом и два псевдоэлемента для маленьких кружков внутри. Вам нужно задать правильный фон (градиент) основному элементу и использовать псевдоэлементы для точек.

CSS

.yin-yang-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.yin-yang {
  width: 150px;
  height: 150px;
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
  /* Создаем фон из двух половинок */
  input1: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);
}

.yin-yang::before,
.yin-yang::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: calc(50% - 12.5px); /* Центрируем малый круг */
}

/* Белый круг в черной половине */
.yin-yang::before {
  top: 25%; /* Позиция в верхней (черной) половине */
  input2: #fff;
}

/* Черный круг в белой половине */
.yin-yang::after {
  bottom: 25%; /* Позиция в нижней (белой) половине */
  input3: #000;
}

                     .yin-yang-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.yin-yang {
  width: 150px;
  height: 150px;
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
  /* Создаем фон из двух половинок */
  input1: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);
}

.yin-yang::before,
.yin-yang::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: calc(50% - 12.5px); /* Центрируем малый круг */
}

/* Белый круг в черной половине */
.yin-yang::before {
  top: 25%; /* Позиция в верхней (черной) половине */
  input2: #fff;
}

/* Черный круг в белой половине */
.yin-yang::after {
  bottom: 25%; /* Позиция в нижней (белой) половине */
  input3: #000;
}

HTML

<div class="yin-yang-container">
  <div class="yin-yang"></div>
</div>

Основному элементу задайте `border-radius: 50%`. Используйте `background: linear-gradient(...)` для создания фона из двух половинок (черной и белой). Псевдоэлементам `::before` и `::after` задайте `position: absolute`, `border-radius: 50%`, размеры и соответствующие цвета фона (`background-color`). Разместите их с помощью `top` и `left`/`right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фигурная обрезка изображения

Применим CSS для придания изображению непрямоугольной формы. У нас есть изображение (img). Используйте свойство для обрезки изображения по заданной фигуре, например, по кругу.

CSS

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

.clipped-image {
  width: 200px; 
  height: 200px;
  object-fit: cover; /* Масштабируем изображение для заполнения */
  /* Обрезаем изображение по кругу */
  input1: circle(50% at 50% 50%);
}

                     .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

.clipped-image {
  width: 200px; 
  height: 200px;
  object-fit: cover; /* Масштабируем изображение для заполнения */
  /* Обрезаем изображение по кругу */
  input1: circle(50% at 50% 50%);
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Example Image" class="clipped-image">
</div>

Чтобы обрезать элемент по определенной форме, используется свойство `clip-path`. Для создания круглой обрезки используйте значение `circle(50% at 50% 50%)` или просто `circle()`, если центр и радиус по умолчанию подходят.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку