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

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

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

В этом уроке мы создадим форму сердца с помощью CSS

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

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

 

Основы

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

Начнем с добавления <div> элемента в качестве основы нашей формы сердца:

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

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

.heart-shape{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgba(255,0,0,0.8);
}

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

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

.heart-shape:before{
    position: absolute;
    bottom: 0px;
    left: -100px;
    width: 200px;
    height: 200px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(255,0,0,0.8);
}

Сейчас мы имеем такой результат:

 

 

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

.heart-shape:after{
    position: absolute;
    top: -100px;
    right: 0px;
    width: 200px;
    height: 200px;
    content: '';
     
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
 
    background-color: rgba(255,0,0,0.8);
}

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

 

 

 

 

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

.heart-shape:before,
.heart-shape:after{
    position: absolute;
    width: 200px;
    height: 200px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(255,0,0,0.8);
}
.heart-shape:before{
    bottom: 0px;
    left: -100px;
}
.heart-shape:after{
    top: -100px;
    right: 0px;
}

Теперь мы имеем форму сердца, хотя оно смотрит в не правильном направлении. Чтобы выпрямить сердце, мы будем использовать трансформацию CSS3.

Трансформация может быть применена к основным элементам формы; здесь, это квадрат. При трансформации, псевдо-элементы автоматически изменят свою позицию.

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

.heart-shape{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Теперь наше сердце выглядит так:

 

 

Результат:

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

HTML
<div class="heart-shape"></div>

Наш CSS, будет выглядеть следующим образом:

CSS
.heart-shape{
    position: relative;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: rgba(255,0,0, 1);
}
.heart-shape:before,
.heart-shape:after{
    position: absolute;
    width: 200px;
    height: 200px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(255,0,0, 1);
}
.heart-shape:before{
    bottom: 0px;
    left: -100px;
}
.heart-shape:after{
    top: -100px;
    right: 0px;
}

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

 

 

 

 

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


Вывод

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

Вы ограничены только вашим творчеством и воображением!

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *