Как покрасить блок в css
Перейти к содержимому

Как покрасить блок в css

  • автор:

Как покрасить каждый второй блок?

У меня сайт на Wp и надо как тут otzyvru.ru перекрасить каждую вторую запись в цвет. Как мне это сделать правильно?

  • Вопрос задан более трёх лет назад
  • 252 просмотра

Комментировать

Решения вопроса 1

iiiBird

iBird Rose @iiiBird Куратор тега CSS

Пока ты спишь — твой конкурент совершенствуется

.item:nth-child(even)

Ответ написан более трёх лет назад

Нравится 3 1 комментарий

lil_koi @lil_koi Автор вопроса

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • час назад
  • 7 просмотров

Цвет

Bootstrap поддерживается обширной цветовой системой, которая определяет наши стили и компоненты. Это дает возможность более полной настройки и расширения для любого проекта.

На этой странице

Цвета темы

Мы используем подмножество всех цветов, чтобы создать меньшую цветовую палитру для создания цветовых схем, также доступных в виде переменных Sass и карты Sass в файле scss/_variables.scss .

Все эти цвета доступны в виде карты Sass, $theme-colors .

$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); 

Ознакомьтесь с нашей документацией по картам и циклам Sass, чтобы узнать, как изменить эти цвета.

Все цвета

Все цвета Bootstrap доступны как переменные Sass и карта Sass в файле scss/_variables.scss . Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры темы.

Обязательно следите за коэффициентом контрастности при настройке цветов. Как показано ниже, мы добавили три коэффициента контрастности к каждому из основных цветов: один для текущих цветов образца, один для белого и один для черного.

$blue #0d6efd
$indigo #6610f2
$purple #6f42c1
$pink #d63384
$red #dc3545
$orange #fd7e14
$yellow #ffc107
$green #198754
$teal #20c997
$cyan #0dcaf0
$gray-500 #adb5bd
$black #000
$white #fff

Примечания к Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка и оттенка сами. Мы указываем значение средней точки (например, $blue-500 ) и используем пользовательские цветовые функции для придания оттенка (осветления) или затенения (затемнения) наших цветов с помощью цветовой функции Sass mix() .

Использование mix() — это не то же самое, что lighten() и darken() — первый смешивает указанный цвет с белым или черным, а последний только регулирует значение яркости каждого цвета. В результате получается гораздо более полный набор цветов, как показано в этой демонстрации CodePen.

Наши функции tint-color() и shade-color() используют mix() вместе с нашей переменной $theme-color-interval , которая определяет ступенчатое процентное значение для каждого смешанного цвета, который мы производим. См. полный исходный код в файлах scss/_functions.scss и scss/_variables.scss .

Карты sass цвета

Исходные файлы Sass Bootstrap включают три карты, которые помогут Вам быстро и легко просмотреть список цветов и их шестнадцатеричные значения.

  • $colors список всех наших доступных базовых цветов ( 500 )
  • $theme-colors список всех цветов темы с семантическими именами (показано ниже)
  • $grays список всех оттенков и теней серого

В scss/_variables.scss Вы найдете цветовые переменные Bootstrap и карту Sass. Вот пример Sass-карты $colors :

$colors: ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800 ); 

Добавляйте, удаляйте или изменяйте значения на карте, чтобы обновить, как они используются во многих других компонентах. К сожалению, в настоящее время не каждый компонент использует эту карту Sass. В будущих обновлениях мы постараемся улучшить это. А пока планируйте использовать переменные $ и эту карту Sass.

Пример

Вот как Вы можете использовать их в своем Sass:

.alpha  color: $purple; > .beta  color: $yellow-300; background-color: $indigo-900; > 

Утилиты цвета и фона также доступны для установки color и background-color с использованием значений цвета 500 .

  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

Плавная смена цвета фона

Чтобы сделать эффект плавной смены цвета фона, добавьте на страницу блок DV11A (категория «Разделитель») в том месте, где цвет должен поменяться. В настройках блока укажите цвет. Цвет фона страницы ниже этого блока поменяется.

Чтобы сделать переход к еще одному цвету или обратно к белому — добавьте еще один такой же блок и задайте новый цвет в настройках.

Разделы «Справочного центра»:

  • Как устроена Тильда
  • Настройки сайта
  • Редактирование страницы
  • Продвижение сайта
  • Домен и сертификат
  • Интернет-магазин
  • Формы приёма данных
  • Статистика сайта
  • Zero Block
  • Конструктор писем
  • Тарифы и платежи
  • Потоки и новости
  • Личный кабинет
  • Разработчикам

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Как сделать полосатый фон для элементов сайта на чистом CSS

Чистый цвет (монотонный, однородный) не встречается в природе. Можно сказать, что он противоестественен. Ведь на зеленом листе дерева всегда видны прожилки другого цвета, на чистом голубом небе присутствует дымка от облаков. Даже забор или стена выкрашенные краской одного цвета получают оттенки за счет неровностей поверхности и качества покраски.

Не даром вебмастера для своих сайтов используют фоны с имитацией бумаги, ткани или камня. Такие украшения делают общую картину более привычной для глаз. Это может вызвать больше доверия у посетителя (на красивую картинку посмотреть всегда приятно), удержит его на сайте, что в конечном итоге положительно скажется на поведенческих факторах.

Поведенческие факторы — это совокупность показателей поведения пользователей сайта, которые позволяют поисковым системам сделать вывод о его (сайта) качестве.

Фоновые изображения для сайта

Чаще всего для украшения сайта используются фоновые изображения. Главное требование к ним — это беcшовность и размер. Если картинка бесшовная, то ее можно использовать как спрайт небольшого размера, например 100 на 100 пикселей, и замостить ею всю площадь экрана, при этом общее изображение будет выглядеть как одно единое целое без видимых границ внутри.

Фоновые изображения на CSS

Возможности CSS (каскадная таблица стилей) позволяют генерировать простые изображения (полосы, круги, квадраты). Этим можно воспользоваться для формирования фона для объектов на сайте. Преимущество у данного метода в том, что для оформления фона вам не нужен графический редактор и размер такого фона минимален.

К минусам стоит отнести невозможность или очень большая сложность создать фоны в виде реальных предметов, надписей, фотографий и т.п.

Полосатый фон на CSS

Перейдем от слов к делу, сделаем на фоне диагональные полосы используя CSS функцию repeating-linear-gradient() :

background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );

Если применить это свойство к блоку DIV, то выглядеть он будет примерно так:

Блок DIV с полосатым фоном на CSS

Рассмотрим подробнее все параметры.

Как сделать полосатый фон для элементов сайта на чистом CSS

  1. 45deg — это угол наклона полосок
  2. #606dbc — начальный цвет градиента
  3. #606dbc 10px — цвет на отметке 10 пикселей
  4. #465298 10px — цвет на отметке 10 пикселей
  5. #465298 20px — цвет на отметке 20 пикселей

Как видно мы получили три отрезка: от начала до 10 пикселей, отрезок нулевой длины на отметке 10 пикселей, где просто меняется цвет и третий отрезок от 10 до 20 пикселей.

В моем примере никакого градиента (плавной смены цвета) нет, так как цвет в начале и конце отрезков одинаковый. А функцию repeating-linear-gradient() мы используем для чередования цветов.

Какие углы наклона можно использовать

Меняя угол наклона можно получить горизонтальные и вертикальные полосы. В качестве угла наклона можно использовать предопределенные константы to right, to bottom, to bottom left.

Следующий стиль добавит к блоку DIV фон с вертикальными полосами:

background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px );

Блок DIV с вертикальными полосами на CSS

Какие цвета можно использовать

Можно использовать все цвета соответствующие CSS стандартам, а так же прозрачный цвет transparent.

Наложим полоски на следующее изображение (взято с сайта Mozilla — https://mdn.mozillademos.org/files/15525/critters.png):

Как сделать полосатый фон для элементов сайта на чистом CSS

Используем такой стиль оформления:

background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #fff 10px, #fff 15px ), url('https://sitename.tld/image-url/image-name.jpg');

Выглядеть блок DIV с таким оформлением будет следующим образом:

Блок DIV с прозрачными полосами на изображении

Цветов может быть несколько

Количество цветовых полосок не ограничено двумя. Вот пример оформления на CSS для телевизионной испытательной таблицы, изображение которой формируется ГЦП (генератор цветных полос).

background: repeating-linear-gradient( to right, #fff 0 40px, #ff0 40px 80px, #0ff 80px 120px, #0f0 120px 160px, #f0f 160px 200px, #f00 200px 240px, #00f 240px 280px, #000 280px 320px );

Те кто работал на телецентре или занимался ремонтов цветных телевизоров должны помнить эту картинку ��

Короткие записи CSS стилей полосок для фона

Оформление полосок можно сократить не расписывая цвет в каждой точке, а указав диапазон:

background: repeating-linear-gradient( -45deg, #ccc 0 10px, #999 10px 20px );

Результат оформления блока короткой записью стилей:

Блок DIV с короткой записью CSS

Узоры в качестве фона на CSS

С помощью CSS стилей можно «нарисовать» не только примитивные полоски, но и достаточно сложный и красивый фон:

background: repeating-linear-gradient(90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px), repeating-linear-gradient(0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px), repeating-linear-gradient(45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px);

Блок DIV с таким фоном будет выглядеть следующим образом:

Круговые полосы на CSS

Полоски могут быть радиальными, для их оформления нужно использовать CSS функцию repeating-radial-gradients() :

background: repeating-radial-gradient( circle, purple 0 10px, #4b026f 10px 20px );

Выглядеть это будет так:

Блок DIV с радиальными полосками

Выводы

Как видите с помощью CSS можно создать красочные фоны для элементов сайта и возможно отказаться от использования изображений.

Благодарности

При написании статьи были использованы следующие источники:

  1. https://developer.mozilla.org/ru/docs/Web/CSS/repeating-linear-gradient
  2. https://css-tricks.com/stripes-css/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *