W3.CSS Библиотеки цветов
Библиотеки цветов
Библиотеки цветов (или цветовые библиотеки) - это небольшие CSS-файлы, содержащие часто используемые значения цветов, такие как стандарты безопасности, цвета шоссе, модные цвета, цвета камуфляжа и т.д.
Schoolbus
Falcon Ridge Parkway
STOP
Как использовать библиотеки цветов
Библиотеки цветов просты в использовании. Просто добавьте ссылку на библиотеку цветов на вашей веб-странице:
Пример:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">
Затем добавьте имя класса к элементу HTML, который вы хотите раскрасить:
<div class="w3-highway-schoolbus">Schoolbus</div>
<div
class="w3-highway-green">Falcon Ridge Parkway</div>
<div
class="w3-highway-red">STOP</div>
Попробуйте сами »
Цвета шоссе США
| w3-highway-brown |
| w3-highway-red |
| w3-highway-orange |
| w3-highway-schoolbus |
| w3-highway-yellow |
| w3-highway-green |
| w3-highway-blue |
Цвета шоссе определены в Федеральном стандарте 595.
Цвета безопасности США
| w3-safety-red |
| w3-safety-orange |
| w3-safety-yellow |
| w3-safety-green |
| w3-safety-blue |
| w3-safety-purple |
Цвета безопасности США определены в Федеральном стандарте 595.
Европейские Сигнальные Цвета
| w3-signal-yellow |
| w3-signal-orange |
| w3-signal-red |
| w3-signal-violet |
| w3-signal-blue |
| w3-signal-green |
| w3-signal-grey |
| w3-signal-brown |
| w3-signal-white |
| w3-signal-black |
Пример
<div class="w3-signal-red">Stop</div>
<div
class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Попробуйте сами »
Попробуйте все »
Скачать CSS »
Европейские сигнальные цвета определены в Стандарте цвета RAL.
Модные цвета осень 2019 / зима 2020
Chili Pepper
Biking Red
Crème de Pêche
Peach Pink
Rocky Road
Fruit Dove
Sugar Almond
Dark Cheddar
Galaxy Blue
Bluestone
Orange Tiger
Eden
The Autumn 2019 / Winter 2020 Classics:
Vanilla Custard
Evening Blue
Paloma
Guacamole
Пример
<div class="w3-2019-dark-cheddar">Dark Cheddar</div>
<div class="w3-2019-bluestone">Bluestone</div>
Модные цвета - весна 2019
Fiesta
Jester Red
Turmeric
Living Coral
Pink Peacock
Pepper Stem
Aspen Gold
Princess Blue
Toffee
Mango Mojito
Terrarium Moss
Sweet Lilac
Soybean
Eclipse
Sweet Corn
Brown Granite
Пример
<div class="w3-2019-fiesta">Fiesta</div>
<div class="w3-2019-princess-blue">Princess Blue</div>
Модные цвета выбираются из Цветовые тренды.
Модные цвета 2018
| w3-2018-red-pear |
| w3-2018-valiant-poppy |
| w3-2018-nebulas-blue |
| w3-2018-ceylon-yellow |
| w3-2018-martini-olive |
| w3-2018-russet-orange |
| w3-2018-ultra-violet |
| w3-2018-crocus-petal |
| w3-2018-limelight |
| w3-2018-quetzal-green |
| w3-2018-sargasso-sea |
| w3-2018-tofu |
| w3-2018-almond-buff |
| w3-2018-quiet-gray |
| w3-2018-meerkat |
| w3-2018-meadowlark |
| w3-2018-cherry-tomato |
| w3-2018-little-boy-blue |
| w3-2018-chili-oil |
| w3-2018-blooming-dahlia |
| w3-2018-arcadia |
| w3-2018-pink-emperador |
| w3-2018-almost-mauve |
| w3-2018-spring-crocus |
| w3-2018-lime-punch |
| w3-2018-sailor-blue |
| w3-2018-harbor-mist |
| w3-2018-warm-sand |
| w3-2018-coconut-milk |
Пример
<div class="w3-2018-ultra-violet">Ultra Violet</div>
<div class="w3-2018-cherry-tomato">Cherry Tomato</div>
Модные цвета выбираются из Цветовые тренды.
Модные цвета 2017
| w3-2017-greenery |
| w3-2017-grenadine |
| w3-2017-tawny-port |
| w3-2017-ballet-slipper |
| w3-2017-butterum |
| w3-2017-navy-peony |
| w3-2017-neutral-grey |
| w3-2017-shaded-spruce |
| w3-2017-golden-lime |
| w3-2017-marina |
| w3-2017-autumn-maple |
| w3-2017-niagra |
| w3-2017-primrose-yellow |
| w3-2017-lapis-blue |
| w3-2017-flame |
| w3-2017-island-paradise |
| w3-2017-pale-dogwood |
| w3-2017-pink-yarrow |
| w3-2017-kale |
| w3-2017-hazelnut |
Пример
<div class="w3-2017-greenery">Greenery</div>
<div class="w3-2017-flame">Flame</div>
Модные цвета выбираются из Цветовые тренды.
Яркие цвета
| w3-vivid-pink |
| w3-vivid-red |
| w3-vivid-orange |
| w3-vivid-yellow |
| w3-vivid-green |
| w3-vivid-blue |
| w3-vivid-violet |
| w3-vivid-purple |
| w3-vivid-black |
| w3-vivid-white |
| w3-vivid-yellowish-pink |
| w3-vivid-reddish-orange |
| w3-vivid-orange-yellow |
| w3-vivid-greenish-yellow |
| w3-vivid-yellow-green |
| w3-vivid-yellowish-green |
| w3-vivid-bluish-green |
| w3-vivid-greenish-blue |
| w3-vivid-purplish-blue |
| w3-vivid-reddish-purple |
| w3-vivid-purplish-red |
Пример
<div class="w3-vivid-red">
<p>Лондон - самый густонаселенный город в Соединенном Королевстве,
с населением более 9 миллионов человек.</p>
</div>
Попробуйте сами »
Скачать CSS »
Яркие цвета определены в ISCC-NBS.
Пищевые цвета
| w3-food-apple |
| w3-food-aspargus |
| w3-food-apricot |
| w3-food-aubergine |
| w3-food-avocado |
| w3-food-banana |
| w3-food-butter |
| w3-food-blueberry |
| w3-food-cherry |
| w3-food-chocolate |
| w3-food-cranberry |
| w3-food-coffee |
| w3-food-egg |
| w3-food-grape |
| w3-food-kiwi |
| w3-food-lemon |
| w3-food-lime |
| w3-food-mango |
| w3-food-mushroom |
| w3-food-mustard |
| w3-food-mint |
| w3-food-olive |
| w3-food-orange |
| w3-food-pea |
| w3-food-peach |
| w3-food-pear |
| w3-food-pistachio |
| w3-food-plum |
| w3-food-raspberry |
| w3-food-saffron |
| w3-food-salmon |
| w3-food-spearmint |
| w3-food-squash |
| w3-food-strawberry |
| w3-food-tomato |
| w3-food-wheat |
| w3-food-wine |
Пример
<div class="w3-food-apple">Apple</div>
<div
class="w3-food-banana">Banana</div>
Попробуйте сами »
Попробуйте все »
Скачать CSS »
Камуфляжные цвета
| w3-camo-brown |
| w3-camo-red |
| w3-camo-olive |
| w3-camo-field |
| w3-camo-earth |
| w3-camo-sand |
| w3-camo-tan |
| w3-camo-sandstone |
| w3-camo-dark-green |
| w3-camo-forest |
| w3-camo-light-green |
| w3-camo-green |
| w3-camo-dark-grey |
| w3-camo-grey |
| w3-camo-black |
Пример
<div class="w3-camo-earth">Camouflaged Truck</div>
<div
class="w3-camo-grey">Camouflaged Ship</div>
Попробуйте сами »
Попробуйте все »
Скачать CSS »
Камуфляжные цвета определены в Федеральном стандарте 595.
Навбар с иконками
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сайт работает на фреймворке W3.CSS.