Пятница, 04 Января 2013 10:06

Рисуем сердце на HTML, CSS

Written by 
Оцени эту запись
(1 Голос)

Новогодние праздники уже почти закончились, пора готовиться к Дню Святого Валентина. На фотостоках уже появилось множество работ с сердечками, будем перенимать их опыт. Итак, в этой статье мы будем рисовать сердце при помощи HTML, CSS - без картинок. Для этого будем использовать трансформацию CSS3 и псевдоэлементы after. А для красоты применим также linear-gradient и внутреннею тень с box-shadow.

 

 

На рисование сердца меня вдохновила работа на fotolia.ru с сердцами цвета маджента на фоне цвета циана:

 

Contrast cyan and magenta hearts pattern

 

Мы будем делать сердца не такими сложными, да и расположение будет другое. Но мы научимся рисовать сердце, не используя картинок. Результат получим такой:

 

 

Для рисования сердца будем использовать трансформацию transform и псевдоэлемент after. Для начала нарисуем одно сердце(оно будет корректно отображаться в Chrome, Firefox и Safari).

 

Делаем HTML для сердечка:

 

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

 

Это было просто! :-)

 

А теперь CSS:

 

 

   .heart, .heart:after {
        width: 100px;
        height: 100px;
        background-image: -webkit-linear-gradient(top, #E6A9EC, #FF00FF, #E3319D);
        background-image: -moz-linear-gradient(top, #E6A9EC, #FF00FF, #E3319D);
    }
    .heart {
        position: relative;
        -webkit-transform: skew(20deg, 20deg) rotate(20deg) scale(0.48, 1);
        -moz-transform: skew(20deg, 20deg) rotate(20deg) scale(0.48, 1);
        -webkit-box-shadow: inset 5px -1px rgba(255, 255, 255, 0.2);
        -moz-box-shadow: inset 5px -1px rgba(255, 255, 255, 0.2);
        border-bottom-left-radius: 50px;
        border-top-left-radius: 150px;
        left: -24px;
        top: -12px;
    }
    .heart:after {
        content: '';
        display: block;
        position: absolute;
        top: -41px;
        right: -99px;
        -webkit-transform: skew(0deg, -40deg) rotate(0deg) scale(1, 0.99);
        -moz-transform: skew(0deg, -40deg) rotate(0deg) scale(1, 0.99);
        -webkit-box-shadow: inset -5px -2px rgba(193, 34, 131, 0.5);
        -moz-box-shadow: inset -5px -2px rgba(193, 34, 131, 0.5);
        border-top-right-radius: 150px;
        border-bottom-right-radius: 50px;
    }
 
 
Элемент с классом heart рисует левую часть сердечка. Для рисования правой мы используем псевдоэлемент :after.
 
 
А теперь пройдемся по стилям подробно.
 
 
.heart, .heart:after {
        width: 100px;
        height: 100px;
}
 
Сам элемент и его псевдоэлемент имеют одинаковые размеры - 100px*100px. Это мы будет менять при помощи трансформации, применяя к элементу свойство transform:
 
 
-webkit-transform: skew(20deg, 20deg) rotate(20deg) scale(0.48, 1);
-moz-transform: skew(20deg, 20deg) rotate(20deg) scale(0.48, 1);
 
Здесь у нас идет трансформация по трем направлениям - skew для вытягивания нижнего уголка сердца, rotate для поворота уголка вниз, scale для того, чтобы в наши 100px поместились обе части сердца (поскольку трансформация влияет только на отображение и не влияет на расположения элемента в потоке).
 
 
Так как трансформация, примененная к элементу, влияет и на его псевдоэлемент, то последнему мы также задаем трансформацию, но уже со своими параметрами:
 
 
-webkit-transform: skew(0deg, -40deg) rotate(0deg) scale(1, 0.99);
-moz-transform: skew(0deg, -40deg) rotate(0deg) scale(1, 0.99);

 

Кроме этого, для построения сердца нам нужно скруглить уголки:

 

для элемента:

 

border-bottom-left-radius: 50px;
border-top-left-radius: 150px;
 
для псевдоэлемента:
 
border-top-right-radius: 150px;
border-bottom-right-radius: 50px;

 

Остались только расположение и оформление. Для расположения мы задаем элементу position: relative, а псевдоэлементу - position: absolute и значения top и right, чтобы поставить его в правильное место. Для самого элемента мы также используем свойства left и top, чтобы поместить отображение после трансформации именно в то место, где элемент находится в потоке.

 

Для оформления используем градиент и внутреннюю тень:

 

.heart, .heart:after {
       width: 100px;
        height: 100px;
        background-image: -webkit-linear-gradient(top, #E6A9EC, #FF00FF, #E3319D);
        background-image: -moz-linear-gradient(top, #E6A9EC, #FF00FF, #E3319D);
}
.heart {
        -webkit-box-shadow: inset 5px -1px rgba(255, 255, 255, 0.2);
        -moz-box-shadow: inset 5px -1px rgba(255, 255, 255, 0.2);
}
.heart:after {
       -webkit-box-shadow: inset -5px -2px rgba(193, 34, 131, 0.5);
        -moz-box-shadow: inset -5px -2px rgba(193, 34, 131, 0.5);
}
 
Смотрим результат(Chrome, Firefox, Safari):
 
 
 
 

Понятно, что меняя размеры и параметры трансформации, можно получить другое сердечко))

 

А теперь попробуем повторить то, что у нас на картинке - сделаем много сердец и поставим их на темный фон:

 

 

 
 
 
 
 
 
 
 
 

 

Чтобы немного изменить картинку, попробуем сделать сердечки маленькими. Для этого изменим width и height, а также подкорректируем для псевдоэлемента right и top. Изменим также цвета, используя таблицу HTML кодов цветов.

 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов