CSS

-color, -image

Из прошлого урока мы поняли, что «background» делится на две большие категории – это картинка и цвет. Поэтому для «background’а» есть чёткое разделение, когда мы задаём или картинку, или цвет.

Для картинки мы пишем «background-image».

.box{
  width:100px;
  height:100px;
  background-image:url(img/audi.png);
}

Вы можете одновременно к картинке задать и цвет и картинку. Для этого мы делаем следующее: пишем «background-image» и «background-color».

.box{
  width:100px;
  height:100px;
  background-image:url(img/audi.png);
  background-color:#000;
}

То есть идея в следующем: если у картинки прозрачность какая-то, она сохранена в формате png (прозрачность есть только у этого формата, если у вас jpg, то такая тема не прокатит). Если есть прозрачность и мы видим фон, то мы можем задать картинку через «background-image» и фон через«background-color». Если мы зададим просто через «background» без «image» и «color», то мы увидим чисто картинку с белым фоном. «color» тогда не задаётся, он сбрасывается.

Давайте теперь немножечко разберёмся с «background-color», как мы вообще его задаём, как мы получаем этот код. Этот формат называется  HEX, который создаётся  из шести каких-то непонятных цифр – кода нашего цвета. 

Давайте зайдём  в Photoshop, отркроем палитру, выберём инструмент «Пипетка» и кликнем в любое пространство нашей картинки.

Допустим, берём красный, вот выделился красный, и вот появляется код нашего цвета. Копируем его, вставляем в код и блок у нас будет такого же красного цвета.

.box{
  background: #be3448;
}

Либо на этой палитре ищем нужный нам цвет. Такой, допустим, жёлтенький.



Обязательно пишем решётку и шесть цифр нашего кода. 

Хочу заметить, что если все шесть цифр нашего кода одинаковые, то мы можем сокращать до трёх, то есть чёрный цвет мы делаем тремя нулями ( #000 ), белый цвет – тремя буковками f ( #FFF ). Дальше мы можем делать разные градиенты серого, идя от 0 до f, то есть «000», «111», «222», в конце «999», потом идёт «AAA» - серенький. «bbb», «ccc», «ddd», «eee», «fff». Так же, можно делать какие-то разнообразия, допустим, «fefefe», такой будет очень-очень светло-серый. Либо «d4d4d4». То есть у вас «ddd» довольно-таки получается темноватеньким, мы хотим сделать его посветлее и делаем «dfdfdf». Ну, сейчас визуально ничего не изменилось, но, тем не менее, это другой цвет. То есть таким образом вы можете играться с градиентами серого. 

Что делать, если у вас нет Photoshop’а? Заходим на сайт getcolor.ru. Это не реклама, мне просто очень нравится этот сайтик. Он довольно-таки удобный, простой. Здесь есть палитра. 

Так же, кроме  HEX-формата, есть RGB-формат. Все знают со школы, что цвет получается от смешения трёх цветов: красный, зелёный и голубой, то есть rgb: r – red – красный,  g – green – зелёный, b – blue – голубой, соответственно. Мы можем задать три значения и получить какой-то цвет. Каждый цвет задаётся значением от нуля до 255. То есть rgb(255,255,255) - это получается белый, если мы делаем три ноля, то это будет чёрный. Так же любой цвет в Photoshop мы можем получить в формате rgb.

Но в стандартном формате это редко используется, то есть просто в rgb задавать не очень удобно, нужно запоминать три цифры, копировать их, вставлять - долго это. Но rgb использовать удобно, если мы добавим буковку «а» - альфа-канал, то есть мы можем добавить к нашему цвету прозрачность.

rgba(0,0,0,0.5)

В последнем, четвёртом значении, мы прописываем какую-то цифру, значение от нуля до единицы, то есть 0,5 – это будет полупрозрачный, 1 – это полностью цвет такой, какой он должен быть, 0 – полностью прозрачный. 

То есть, если вам нужно использовать прозрачность на цвете, то используйте rgba-формат. Если вам нужен обычный цвет, то берёте HEX, копируете код, вставляете и будет вам счастье. Если нужны градиенты серого, то просто берёте от нуля до f перечисляете все цифры, которые есть и подставляете, понимаете, какой вам нужен по дизайну, по тому, что вам вообще нужно от серого и получаете какой-то цвет.

Собственно, всё. Вот так вот работают «color» и «image».