Но если кому-то это было интересно, то почему бы не написать развернутый мануал?
Одним из требований было минимальное количество обьектов на один цветок — это позволит использовать любое количество цветов с незначительными изменениями кода. У меня получилось всего 5 обьектов, включая стебель и лист, но вы, если захотите, можете рисовать более сложные цветы.
Для простоты и наглядности кода я буду пропускать префиксы, но должен предупредить что браузеры на движке WebKit (Сафари и Хром) не понимают свойство transform без префикса — для них придется дополнительно указывать свойство -webkit-transform. Градиент и тень понимают все браузеры (в рамках данной статьи позволю себе не считать експлорер браузером, но при желании можно нарисовать и под него).
Сначала создадим общую заготовку для всех лепестков:
.petalbottomright, .petalbottomleft, .petaltopcenter{ background: #601719; background: linear-gradient(top, #da2b2a, #601719); border:1px solid #000; box-shadow: 1px 1px 4px #333; }
Цвет и градиент не должны вызвать вопросов, а рамка и тень установлена для скрытия неровностей, если можно так выразиться «CSS-антиалиасинг».
Затем правый лепесток:
.petalbottomright{ position:absolute; top:10px; width: 30px; height: 83px; border-top-right-radius: 74px; border-bottom-left-radius: 56px; transform: rotate(355deg); }
Размеры тоже не должны вызвать вопросов. Правый верхний и левый нижний углы закругляем (border-top-right-radius и border-bottom-left-radius соответственно), а весь блок поворачиваем вокруг своей оси с помощью transform.
Левый лепесток делаем по аналогии с правым:
.petalbottomleft{ position:absolute; top:10px; margin-left:30px; width: 36px; height: 86px; border-top-left-radius: 74px; border-bottom-right-radius: 46px; transform: rotate(12deg); }
Центральный лепесток, самый маленький:
.petaltopcenter{ margin-left:15px; width: 40px; height: 40px; border-top-left-radius: 74px; transform: rotate(50deg); }
Теперь займемся стеблями, вначале заготовка:
.stem1, .stem2, .stem3{ position:absolute; margin-left:30px; width: 10px; height: 180px; background: linear-gradient(left, #028e31, #601719); }
Обратите внимание что градиент идет не сверху вниз а слева направо.
И отступы для стеблей, мне показалось что их лучше сделать разными:
.stem1{margin-top:70px;} .stem2{margin-top:90px;} .stem3{margin-top:80px;margin-left:23px;}
Остались листья, заготовка у меня получилась вот такая:
.leftleaf, .rightleaf, .centerleaf{ position:absolute; width: 60px; height: 30px; background: linear-gradient(left, #028e31, #601719); }
А сами листья отличаются только позиционированием с помощью отступов и радиусом уголков:
.leftleaf { margin-top: 120px; margin-left: 24px; border-bottom-left-radius: 32px; border-top-right-radius: 30px; } .rightleaf { margin-top: 170px; margin-left: -23px; border-bottom-right-radius: 36px; border-top-left-radius: 36px; } .centerleaf { margin-top: 120px; margin-left: -28px; border-bottom-right-radius: 38px; border-top-left-radius: 32px; }
Цветы у нас уже есть, пора их собирать в букет. Вот такой получился HTML:
<div class="flower1"> <div class="stem1"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="centerleaf"></div> </div> <div class="flower2"> <div class="stem2"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="rightleaf"></div> </div> <div class="flower3"> <div class="stem3"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="leftleaf"></div> </div>
Каждый цветок состоит из трех лепестков, стебля и листика, размещенных внутри контейнеров flower1, flower2 и flower3. А уже сами цветы расположем под различными углами, чтобы было похоже на букет:
.flower1{ margin-left:82px; position:absolute; transform: rotate(357deg) scale(1,1.2); -webkit-transform: rotate(357deg) scale(1,1.2); } .flower2{ margin-top:30px; position:absolute; transform: rotate(335deg) scale(1,1.2); -webkit-transform: rotate(335deg) scale(1,1.2); } .flower3{ margin-left:172px; position:absolute; transform: rotate(20deg) scale(1.1,1.2); -webkit-transform: rotate(20deg) scale(1.1,1.2); }
Ну и конечно же, никто не заставляет вас ограничиваться всего тремя цветами — чем их больше, тем лучше. Для женщин 😉
ссылка на оригинал статьи http://habrahabr.ru/post/173123/
Добавить комментарий