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

День святого Валентина давно прошел, но идея остается. Давайте нарисуем сердце в разных вариантах)
Кто-то рисует сердце на заборе, кто-то в огороде, на грядках, кто-то на снегу, вытоптывает.


Наша же задача будет интересней. Давайте нарисуем сердце используя CSS3?



Инструменты: html + CSS3

Конструктор: один блок div''а

"Вспомогательные" объекты: :before и :after

Итак. Начнем спростейшей структуры html файла.

Я приведу готовый код, так как эта часть не представляет нам интереса.

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta content="text/html;"
  5.    http-equiv="Content-Type"/>
  6.  <title>Это будет сердце =)</title>
  7.   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  8. </head>
  9. <body>
  10.   <div id="Heart"></div>
  11.  
  12. </body>
  13. </html>
* This source code was highlighted with Source Code Highlighter.


Следующий шаг нашей работы - написание CSS3 - собственно, для чего все и затевалось.

Пару слов о новом CSS - CSS3 просто "мечта" веб-программиста. Это и закругления, и текст под углом, и огромный потенциал для "рисовaния вручную".
С помошью CSS можно работать как с 2D, так и с 3D объектами. Возможности CSS начинаются от "задать тень для текста" и заканчиваются - нарисовать 3D модельку =)


Но вернемся к теме.

Сердце. Что нам для этого нужно?

Нам потребуются:

position - для задания абсолютной позиции (да, будем подгонять изображение)

left и top параметры для задания позиции блоков.

параметры ширины и высоты "width и height" соответственно

Мы будем задавать красновытый оттенок фона, для этого воспользуемся background

Также для сердца вовсю используем возможности CSS3:

border-radius - задание "скругленного" варианта блоков (углы не прямые, но скругленные)

transform: rotate - будем поворачивать наш блок (для создания наклона у сердца)

ransform-origin - c его помощью будем задавать координаты центра трансформации.

Вот мы и разобрали "основные" строительные кирпичики. Теперь перейдем непосредственно к "написанию" сердца

Для начала определим контейнер Heart -

  1. #Heart
  2. {
  3. position: relative;
  4. top:100px;
  5. left:100px;
  6. }
* This source code was highlighted with Source Code Highlighter.


Для работы используем #Heart:before,#Heart:after , определим их также:

  1. #Heart:before,#Heart:after
  2. {
  3. position: absolute;
  4. content: "";
  5. left: 150px;
  6. top: 0;
  7. width: 100px;
  8. height: 160px;
  9. background: #fd2d8a;
  10. border-radius: 50px 50px 0 0;
  11. transform: rotate(-45deg);
  12. transform-origin: 0 100%;
  13. }
  14. #Heart:before
  15. {
  16. border-top : 2px outset red;
  17. border-left : 2px outset red;
  18. }
  19. #Heart:after
  20. {
  21. left: 49px;
  22. border-top : 2px outset red;
  23. border-right : 2px outset red;
  24. transform: rotate(45deg);
  25. transform-origin :100% 100%;
  26. }
* This source code was highlighted with Source Code Highlighter.



Разберем построчно код первого "блока"
Строка 3 - задаем абсолютную позицию (мы вправе теперь задать, что объект будет расположен по координатам (150px;0px), что задают строчки 5,6.
Четвертая строчка определяет пустое содержание контейнера.

C помощью седьмой и восьмой строчки мы задаем размеры нашего изображения

Затем задаем (9) красноваты фон.

10 - указываем "скругление" в 50 px для левого верхнего и верхнего правого угла

11 - строка поворачиваем блок на -45 градусов, относительно нашего центра трансформации(12)

В строке 16, 17 зададим размер границы и его цвет, стиль.

Последний блок - это "перегон" after на "Зеркальную симметричность", а не совпадения с блоком before.


Пример полученного изображения посмотреть можно здесь. http://xnim.ru/Load/Heart/Heart.html

Если посмотреть код страницы по ссылке, то можно заметить, что код там -

  1. #Heart:before,#Heart:after
  2. {
  3. position: absolute;
  4. content: "";
  5. left: 150px;
  6. top: 0;
  7. width: 100px;
  8. height: 160px;
  9. background: #fd2d8a;
  10. -moz-border-radius: 50px 50px 0 0;
  11. border-radius: 50px 50px 0 0;
  12. -webkit-transform: rotate(-45deg);
  13. -moz-transform: rotate(-45deg);
  14. -ms-transform: rotate(-45deg);
  15. -o-transform: rotate(-45deg);
  16. transform: rotate(-45deg);
  17. -webkit-transform-origin: 0 100%;
  18. -moz-transform-origin: 0 100%;
  19. -ms-transform-origin: 0 100%;
  20. -o-transform-origin: 0 100%;
  21. transform-origin: 0 100%;
  22.  
  23.  
  24. }
  25. #Heart:before
  26. {
  27. border-top : 2px outset red;
  28. border-left : 2px outset red;
  29. }
  30. #Heart:after
  31. {
  32. left: 49px;
  33. border-top : 2px outset red;
  34. border-right : 2px outset red;
  35. -webkit-transform: rotate(45deg);
  36. -moz-transform: rotate(45deg);
  37. -ms-transform: rotate(45deg);
  38. -o-transform: rotate(45deg);
  39. transform: rotate(45deg);
  40. -webkit-transform-origin: 100% 100%;
  41. -moz-transform-origin: 100% 100%;
  42. -ms-transform-origin: 100% 100%;
  43. -o-transform-origin: 100% 100%;
  44. transform-origin :100% 100%;
  45. }
* This source code was highlighted with Source Code Highlighter.


"Лишние" части кода (с префиксами) сделаны потому, что некоторые браузеры не подерживают "чистых" команд CSS3, но готовы работать при помощи этих префиксов.


2012-04-10