Как создать форму сердца с помощью CSS
CSS3 повышает возможности того, что мы можем построить на сайтах, используя только HTML и CSS. Вы можете найти удивительные примеры, которые мы ранее показали. Но давайте не будем слишком забегать вперед, сложному дизайну потребуются коды, которые могут вызвать головную боль.
Вместо этого мы собираемся создать что-то простое, чтобы помочь вам сначала понять формы и позиционирование с помощью CSS, прежде чем решиться на более продвинутые проекты. Поскольку день Святого Валентина не за горами, давайте создадим форму сердца, используя HTML и CSS.
Основы
По сути, мы можем создать новую форму, соединив одну или несколько основных фигур, таких как прямоугольники и круги. Если мы исследуем форму сердца, мы можем обнаружить, что она состоит из два круга и прямоугольник вместе. Элементы HTML по сути являются квадратом или прямоугольником. Благодаря CSS3 радиусу границы мы можем легко превратить прямоугольник в круг.
Начните с добавления Затем мы делаем его квадратным, указав ширину и высоту одинаково. Выберите цвет фона, который вам нравится. Далее мы сделаем круги. Вместо того, чтобы добавлять новые элементы, мы будем использовать псевдоэлементы, Вместе с квадратом у нас будет такой результат: После этого мы создаем второй круг с псевдоэлементом Результаты приведены ниже: Мы можем объединить эти два стиля, сгруппировав селекторы псевдоэлементов следующим образом: Та-да! У нас есть форма сердца, хотя это еще не в правильном направлении. Чтобы исправить это, мы будем использовать CSS3 Transformation. Преобразование может быть дано основным элементам формы; здесь это означает квадрат. При преобразовании псевдоэлемент автоматически изменит свое положение после основного элемента.. Здесь мы будем вращать сердце, чтобы оно было видно “постоянный”. И вот так выглядит наше сердце. Полный код приведенной выше формы сердца в HTML выглядит следующим образом: И на нашем CSS это будет так: Обратите внимание, что теперь мы устанавливаем альфа-канал Теперь, когда у нас идеальная форма сердца, мы можем заменить фон другим цветом (например, розовый или красный) с легкостью. Единственным недостатком здесь является то, что мы не удалось добавить границу к форме из-за сложенных элементов. Добавление границы сделает сердце странным. С CSS3 создание формы, подобной форме сердца, теперь легко выполнимо. Свойство border-radius позволяет нам сделать элементы или даже псевдоэлемент в круг. С преобразованием CSS3 мы можем вращать или перемещать координаты объекта с легкостью. Вы ограничены только вашим творчеством и воображением!
.форма сердца позиция: относительная; ширина: 200 пикселей; высота: 200 пикселей; цвет фона: rgba (250 184,66, 0,8);
:до а также :после. Сначала мы устанавливаем :до псевдоэлементы как наш первый круг. Мы делаем его квадратом одинакового размера по ширине и высоте, как мы делали с div. Затем мы преобразуем его в круг, задав ему радиус границы 50%, и поместим его в левую часть квадрата.. .форма сердца: перед позиция: абсолютная; низ: 0px; слева: -100px; ширина: 200 пикселей; высота: 200 пикселей; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; цвет фона: rgba (250 184,66 0,8);
:после с теми же стилями, что и первый круг, который мы создали. Затем мы также размещаем его на вершине квадрата. .форма сердца: после позиция: абсолютная; верх: -100px; справа: 0px; ширина: 200 пикселей; высота: 200 пикселей; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; цвет фона: rgba (250 184,66 0,8);
.форма сердца: до, форма сердца: после позиция: абсолютная; ширина: 200 пикселей; высота: 200 пикселей; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; цвет фона: rgba (250 184,66 , 0.8); .heart-shape: перед низ: 0px; слева: -100px; .heart-shape: после верх: -100px; справа: 0px;
.форма сердца -webkit-transform: повернуть (45 градусов); -moz-transform: повернуть (45 градусов); -ms-преобразование: поворот (45 градусов); -отрансформировать: повернуть (45 градусов); преобразование: вращение (45 градусов);
Результат:
.форма сердца позиция: относительная; ширина: 200 пикселей; высота: 200 пикселей; -webkit-transform: повернуть (45 градусов); -moz-transform: повернуть (45 градусов); -ms-преобразование: поворот (45 градусов); -отрансформировать: повернуть (45 градусов); преобразование: вращение (45 градусов); цвет фона: rgba (250 184,66, 1); .heart-shape: before, .heart-shape: after position: absolute; ширина: 200 пикселей; высота: 200 пикселей; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; цвет фона: rgba (250 184,66 , 1); .heart-shape: перед низ: 0px; слева: -100px; .heart-shape: после верх: -100px; справа: 0px;
rgba (250 184,66, 1) на заднем плане, чтобы 1 удалить прозрачность. Вот так выглядит наше Сердце.
Заключение
