Букет цветов на CSS3

Небольшая предыстория: 8 марта я разместил на своем блоге вот такой букет цветов. В течение недели уже несколько человек поинтересовались его реализацией — и до сегодняшнего дня отвечал достаточно кратко — с помощью border-radius, inear-gradient и transform.
Но если кому-то это было интересно, то почему бы не написать развернутый мануал?
Одним из требований было минимальное количество обьектов на один цветок — это позволит использовать любое количество цветов с незначительными изменениями кода. У меня получилось всего 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);
}

Ну и конечно же, никто не заставляет вас ограничиваться всего тремя цветами — чем их больше, тем лучше. Для женщин ;)

Автор: t3s

Источник