Малюємо серце з допомогою CSS3

40

Рисуем сердце с помощью CSS3

Мене завжди приваблюють нові, незвичайні рішення використання властивостей CSS3. І нехай багато хто з них поки ще не знаходять широкого практичного застосування у веб-розробці та дизайні сайтів, всі це заділ на майбутнє, чудова демонстрація можливостей, що відкриваються із застосуванням нових стандартів.
Пильно стежу за появою новаторських ідей і дбайливо складаю в свою скарбничку. З найбільш цікавими експериментами, розширюють кругозір і розуміння самої техніки виконання того чи іншого рішення, намагаюся час від часу знайомити своїх читачів.
Сьогодні хочу познайомити вас з ще однією, дуже цікавою роботою команди ентузіастів BASICuse, в якій демонструється найпростіший спосіб малювання, добре всім знайомого графічного позначення сердечка, виключно засобами CSS, без використання додаткових файлів зображень в оформленні.
Це буде вільний переклад невеликого уроку, з деякими моїми доповненнями до виконуваного коду CSS і короткими поясненнями, нічого більше. Кінцевий результат, краще переглядати в сучасних браузерах, конкретно забивши на старі версії Internet Explorer 8 і нижче, щоб зберігати свою нервову систему.

Всі стилі нашого сердечка застосовуються до одного елемента

c попередньо заготовленим класом, для міцної зв’язки з css, html це буде виглядати так:

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

Серце складається з двох класичних прямокутників, які перекривають один одного. Обидва прямокутника у верхній частині мають мають площину з однаково закругленими кутами border-radius праворуч і ліворуч, а так само за допомогою властивості трансформації transform:, прямокутникам задані різні кути нахилу. Однакова фонова заливка, в нашому випадку це червоний колір, в результаті робить загальну картину схожою на сердечко.

І так, нам потрібно задати для першого прямокутника фіксовані розміри ширини і висоти width: 100px; height: 175px;, визначити для нього відносне позиціонування position: relative;, для того щоб ми змогли в подальшому, з допомогою абсолютного позиціонування другого прямокутника, здійснити накладання одного на інший.
Заливаємо в суцільну фон червоним кольором background-color: red;, дзеркально заокруглюємо верхні border-radius: 50px 50px 0 0;, вибираємо певний кут нахилу за допомогою трансформації transform: rotate(315deg); і додаємо однієї трішки тіні однієї із сторін першого прямокутника box-shadow: -1px 0px 2px #444;, і трохи більше тіні для іншого box-shadow: 0px 3px 3px #444444;

Рисуем сердце с помощью CSS

Всі значення виставлені опціонально і можуть змінюватися в залежності від ваших смаків та уподобань. У підсумку, експериментуючи зі значеннями властивостей, ми отримали наступний набір стилів:

/* Базові стилі */
.heart {
position: relative;
width: 100px;
height: 175px;
background-color: red;
box-shadow: -1px 0px 2px #444;
 -webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
/* Визначаємо кут нахилу */
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
/* Формуємо праву частину */
.heart:before {
position: absolute;
width: 175px;
height: 100px;
left: 0;
bottom: 0;
content: "";
background-color: red;
box-shadow: 0px 3px 3px #444444;
 -webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 0 50px 50px 0;
}
/* Прибираємо тінь при наведенні */
.heart:hover:before, .heart:hover{
box-shadow:none;
}

/* Базові стилі */
.heart {
position: relative;
width: 100px;
height: 175px;
background-color: red;
box-shadow: -1px 0px 2px #444;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
/* Визначаємо кут нахилу */
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
/* Формуємо праву частину */
.heart:before {
position: absolute;
width: 175px;
height: 100px;
left: 0;
bottom: 0;
content: “”;
background-color: red;
box-shadow: 0px 3px 3px #444444;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 0 50px 50px 0;
}
/* Прибираємо тінь при наведенні */
.heart:hover:before, .heart:hover{
box-shadow:none;
}

У сутності ми використовуємо один базовий елемент, а з допомогою псевдоэлемента :before застосовуємо стилі для створення додаткової частини з накладенням, в результаті чого і виходить досить приваблива картинка. На додаток до всього, в якості прикладу і щоб трохи оживити наше «серце» при наведенні на нього, просто виключив ефект тіні box-shadow:none; і все, як ви розумієте, варіантів оформлення просто маса, все залежить від вашої невгамовної фантазії.

Джерело: BASICuse (рекомендую).

З Повагою, Андрій