Как создать форму сердца с помощью CSS

CSS3 повышает возможность того, что мы можем построить на веб-сайтах, используя только HTML и CSS. Вы можете найти удивительные примеры, которые мы ранее показали. Но давайте не будем слишком забегать вперед, сложному дизайну потребуются коды, которые могут вызвать головную боль.

Вместо этого мы собираемся создать что-то простое, чтобы помочь вам сначала понять формы и позиционирование с помощью CSS, а затем перейти к более сложным проектам. Поскольку день Святого Валентина не за горами, давайте создадим форму сердца, используя HTML и CSS.

Читайте также: 18 интересных вещей, которые вы не поверите, были созданы с использованием CSS

Основы

По сути, мы можем создать новую форму, соединив одну или несколько основных фигур, таких как прямоугольники и круги. Если мы рассмотрим форму сердца, то обнаружим, что оно состоит из двух окружностей и прямоугольника. Элементы HTML по сути являются квадратом или прямоугольником. Благодаря CSS3 радиусу границы мы можем легко превратить прямоугольник в круг.

Начните с добавления

<

div> элемент как основа нашей формы сердца.

Затем мы делаем его квадратным, указав ширину и высоту одинаково. Выберите цвет фона, который вам нравится.

.форма сердца{
положение: относительное;
ширина: 200 пикселей;
высота: 200 пикселей;
цвет фона: rgba (250 184,66, 0,8);
}

Далее мы сделаем круги.

Вместо того, чтобы добавлять новые элементы, мы будем использовать псевдоэлементы: before и: after. Сначала мы устанавливаем псевдоэлементы: before как наш первый круг. Мы делаем его квадратом одинакового размера по ширине и высоте, как мы делали с div. Затем мы преобразуем его в круг, задав ему радиус границы 50%, и поместим его в левую часть квадрата.

.heart-формы: перед тем {
положение: абсолютное;
низ: 0px;
слева: -100px;
ширина: 200 пикселей;
высота: 200 пикселей;
содержание: ”;
-webkit-border-radius: 50%;
-моз-граница-радиус: 50%;
-o-border-radius: 50%;
радиус границы: 50%;
цвет фона: rgba (250 184,66, 0,8);
}

Вместе с квадратом у нас будет такой результат:

После этого мы создаем второй круг с псевдоэлементом: after с теми же стилями, что и первый круг, который мы создали. Затем мы также размещаем его на вершине квадрата.

.heart-формы: после того, как {
положение: абсолютное;
верх: -100px;
справа: 0px;
ширина: 200 пикселей;
высота: 200 пикселей;
содержание: ”;

-webkit-border-radius: 50%;
-моз-граница-радиус: 50%;
-o-border-radius: 50%;
радиус границы: 50%;

цвет фона: rgba (250 184,66, 0,8);
}

Результаты приведены ниже:

Мы можем объединить эти два стиля, сгруппировав селекторы псевдоэлементов следующим образом:

.heart-формы: перед тем,
.heart-формы: после того, как {
положение: абсолютное;
ширина: 200 пикселей;
высота: 200 пикселей;
содержание: ”;
-webkit-border-radius: 50%;
-моз-граница-радиус: 50%;
-o-border-radius: 50%;
радиус границы: 50%;
цвет фона: rgba (250 184,66, 0,8);
}
.heart-формы: перед тем {
низ: 0px;
слева: -100px;
}
.heart-формы: после того, как {
верх: -100px;
справа: 0px;
}

Та-да! У нас есть форма сердца, хотя она пока не в правильном направлении. Чтобы исправить это, мы будем использовать CSS3 Transformation.

Преобразование может быть дано основным элементам формы; здесь это означает квадрат. При преобразовании псевдоэлемент автоматически изменит свое положение после основного элемента.

Здесь мы будем вращать сердце, чтобы оно было «стоящим».

.форма сердца{
-webkit-transform: повернуть (45 градусов);
-moz-transform: повернуть (45 градусов);
-ms-преобразование: поворот (45 градусов);
-опреобразование: поворот (45 градусов);
преобразование: вращение (45 градусов);
}

И вот так выглядит наше сердце.

Результат:
Полный код приведенной выше формы сердца в HTML выглядит следующим образом:

И на нашем CSS это будет так:

.форма сердца{
положение: относительное;
ширина: 200 пикселей;
высота: 200 пикселей;
-webkit-transform: повернуть (45 градусов);
-moz-transform: повернуть (45 градусов);
-ms-преобразование: поворот (45 градусов);
-опреобразование: поворот (45 градусов);
преобразование: вращение (45 градусов);
цвет фона: rgba (250 184,66, 1);
}
.heart-формы: перед тем,
.heart-формы: после того, как {
положение: абсолютное;
ширина: 200 пикселей;
высота: 200 пикселей;
содержание: ”;
-webkit-border-radius: 50%;
-моз-граница-радиус: 50%;
-o-border-radius: 50%;
радиус границы: 50%;
цвет фона: rgba (250 184,66, 1);
}
.heart-формы: перед тем {
низ: 0px;
слева: -100px;
}
.heart-формы: после того, как {
верх: -100px;
справа: 0px;
}

Обратите внимание, что теперь мы устанавливаем альфа-канал rgba (250,184,66, 1) в фоновом режиме на 1, чтобы удалить прозрачность. Вот так выглядит наше Сердце.

Теперь, когда у нас идеальная форма сердца, мы можем с легкостью заменить фон другим цветом (например, розовым или красным). Единственным недостатком здесь является то, что мы не можем добавить границу к форме из-за сложенных элементов. Добавление границы сделает сердце странным.

Вывод

С CSS3 создание формы, подобной форме сердца, теперь легко выполнимо. Свойство border-radius позволяет нам превращать элементы или даже псевдоэлементы в круг. С помощью CSS3-преобразования мы можем легко вращать или перемещать координаты объекта.

Вы ограничены только вашим творчеством и фантазией!