Букет цветов на CSS3
Небольшая предыстория: 8 марта я разместил на своем блоге вот такой букет цветов. В течение недели уже несколько человек поинтересовались его реализацией — и до сегодняшнего дня отвечал достаточно кратко — с помощью border-radius, inear-gradient и transform.
Но если кому-то это было интересно, то почему бы не написать развернутый мануал?
Одним из требований было минимальное количество обьектов на один цветок — это позволит использовать любое количество цветов с незначительными изменениями кода. У меня получилось всего 5 обьектов, включая стебель и лист, но вы, если захотите, можете рисовать более сложные цветы.
Для простоты и наглядности кода я буду пропускать префиксы, но должен предупредить что браузеры на движке WebKit (Сафари и Хром) не понимают свойство transform без префикса — для них придется дополнительно указывать свойство -webkit-transform. Градиент и тень понимают все браузеры (в рамках данной статьи позволю себе не считать експлорер браузером, но при желании можно нарисовать и под него).
Сначала создадим общую заготовку для всех лепестков:
.petalbottomright, .petalbottomleft, .petaltopcenter
Цвет и градиент не должны вызвать вопросов, а рамка и тень установлена для скрытия неровностей, если можно так выразиться «CSS-антиалиасинг».
Размеры тоже не должны вызвать вопросов. Правый верхний и левый нижний углы закругляем (border-top-right-radius и border-bottom-left-radius соответственно), а весь блок поворачиваем вокруг своей оси с помощью transform.
Левый лепесток делаем по аналогии с правым:
Центральный лепесток, самый маленький:
Теперь займемся стеблями, вначале заготовка:
Обратите внимание что градиент идет не сверху вниз а слева направо.
И отступы для стеблей, мне показалось что их лучше сделать разными:
Остались листья, заготовка у меня получилась вот такая:
.leftleaf, .rightleaf, .centerleaf
А сами листья отличаются только позиционированием с помощью отступов и радиусом уголков:
.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
Цветы у нас уже есть, пора их собирать в букет. Вот такой получился HTML:
Каждый цветок состоит из трех лепестков, стебля и листика, размещенных внутри контейнеров flower1, flower2 и flower3. А уже сами цветы расположем под различными углами, чтобы было похоже на букет:
Ну и конечно же, никто не заставляет вас ограничиваться всего тремя цветами — чем их больше, тем лучше. Для женщин 😉
Таблица цветовых кодов RGB
Наведите курсор на цвет, чтобы получить шестнадцатеричный и десятичный цветовые коды ниже:
| Шестнадцатеричный: # |
| Красный: |
| Зеленый: |
| Синий: |
Цветовое пространство RGB
RGB цветового пространства или цветовая система RGB , создает все цвета из комбинации R Е.Д., G Reen и B LUE цвета.
Красный, зеленый и синий используют по 8 бит каждый, которые имеют целочисленные значения от 0 до 255. Это дает 256 * 256 * 256 = 16777216 возможных цветов.
RGB ≡ красный, зеленый, синий
Таким образом, каждый пиксель на светодиодном мониторе отображает цвета за счет комбинации красного, зеленого и синего светодиодов (светоизлучающих диодов).
Когда красный пиксель установлен на 0, светодиод выключен. Когда красный пиксель установлен на 255, светодиод будет полностью включен.
Любое значение между ними устанавливает частичное излучение светодиода.
Цветовой формат и расчет RGB
Код RGB имеет формат 24 бита (биты 0..23):
| КРАСНЫЙ [7: 0] | ЗЕЛЕНЫЙ [7: 0] | СИНИЙ [7: 0] | |||||||||||||||||||||
| 23 | 16 | 15 | 8 | 7 | 0 | ||||||||||||||||||
RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE)
Примеры расчетов
Белый цвет RGB
White RGB code = 255*65536+255*256+255 = #FFFFFF
Синий цвет RGB
Blue RGB code = 0*65536+0*256+255 = #0000FF
Красный цвет RGB
Red RGB code = 255*65536+0*256+0 = #FF0000
Зеленый цвет RGB
Green RGB code = 0*65536+255*256+0 = #00FF00
Серый цвет RGB
Gray RGB code = 128*65536+128*256+128 = #808080
Желтый цвет RGB
Yellow RGB code = 255*65536+255*256+0 = #FFFF00
Таблица цветов RGB
Смотрите также
- Конвертер RGB в шестнадцатеричный
- Конвертер RGB в HSV
- Конвертер RGB в HSL
- Конвертер RGB в CMYK
- Цветовые преобразования
- Таблица цветового круга
- Тестер цвета экрана
- Цветовые коды HTML
- Коды символов HTML
- Таблица ASCII
- Символы Unicode
- Безопасные для Интернета цвета
- Желтого цвета
- Золотой цвет
ВЕБ-ЦВЕТА
- Цвет RGB
- Палитра цветов
- Цветовая схема
- Тестер цвета
- Цветовой круг
- Цветовые коды HTML
- Безопасные для Интернета цвета
- Синий цвет
- Золотой цвет
- красный цвет
- Желтого цвета
БЫСТРЫЕ ТАБЛИЦЫ
Этот веб-сайт использует файлы cookie для улучшения вашего опыта, анализа трафика и отображения рекламы. Учить больше