Цвет. Background. Градиент презентация

2019
ДОПОЛНЕНИЕ
…
предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как ,
или
, с помощью тега
можно выделить часть информации внутри других тегов и установить для нее свой стиль.
Слайд 3
2019
ЦВЕТ
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в
формате RGB, RGBA, HSL, HSLA.
Перед шестнадцатеричным числом ставят символ решетки #, например, #666999, чтобы не возникало путаницы в определении системы счисления. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
Формат #rrggbbtt включает в себя альфа-канал, задающий прозрачность элемента от 00 до ff. #ffee00e0.
Слайд 4
2019
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении.
Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. rgba(100%, 50%, 50%, 0.5). (CSS3).
Слайд 5
2019
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и
Lightness (светлота). Оттенок — это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359. Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает
отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности. Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. hsl(270, 100%, 50%)
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. hsla(270, 100%, 50%, 0.6). (CSS3).
Слайд 6
2019
Слайд 7
2019
color определяет цвет текста элемента. color: цвет.
opacity определяет уровень прозрачности элемента веб-страницы. При
частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Слайд 8
background универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут
идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
background: <фон>, <последний фон>
Здесь: <фон> = [background-attachment || background-image || background-position || background-repeat]
<последний фон> = [background-attachment || background-color || background-image || background-position || background-repeat]
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления. Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
2019
BACKGROUND
Слайд 9
background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может
быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-attachment: fixed | scroll | local, …, fixed | scroll | local
Значения
fixed делает фоновое изображение элемента неподвижным.
scroll позволяет перемещаться фону вместе с содержимым. (По умолчанию).
local фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
2019
Слайд 10
background-color определяет цвет фона элемента.
Синтаксис
background-color: <цвет>.
background-image устанавливает фоновое изображение для элемента.
В CSS3
можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-image: url(путь к файлу) | none, …, url(путь к файлу) | none
2019
Слайд 11
background-position задает начальное положение фонового изображения, установленного с помощью свойства background-image.
В CSS3
допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-position: <позиция>, …, <позиция>
Здесь:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>].
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
2019
Слайд 12
top left = left top = 0% 0% (в левом верхнем углу) (по
умолчанию)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
2019
Слайд 13
background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно
установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-repeat: <повторение>, …, <повторение>
Здесь:
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
2019
Слайд 14
Значения
no-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется
свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
space изображение повторяется столько раз, чтобы полностью заполнить область. Если это не удаётся, между картинками добавляется пустое пространство.
round изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
2019
Слайд 15
Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) —вектор, своим направлением указывающий направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный быстроте роста этой величины в этом направлении.
Градиентом в css называют плавный переход от одного цвета к
другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
2019
ГРАДИЕНТ
Слайд 16
linear-gradient() создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
Если
направление не указано, используется значение по умолчанию — сверху-вниз.
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Синтаксис
background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);
2019
Слайд 17
Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет
угол наклона линии внутри элемента.
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.
background: linear-gradient(to right, #F6EFD2, #CEAD78);
2019
Слайд 18
Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента
будет расположена в противоположном направлении, в данном случае справа внизу.
background: linear-gradient(to top left, blue, pink);
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка,
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
2019
Слайд 19
radial-gradient() отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и
равномерно распределяются наружу, рисуя форму круга или эллипса.
Синтаксис
background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
background: radial-gradient(white, #FFA9A1);
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.
background: radial-gradient(at top, #FEFFFF, #A7CECC);
2019
Слайд 20
С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента.
Первое значение задает ширину эллипса, второе — высоту.
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);
2019
Слайд 21
В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с
помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
2019
Слайд 22
За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно
использовать полупрозрачные цвета, чтобы картинка оставалась видимой.
Синтаксис
background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(…) или (./…) {локальный файл};
2019
Имя файла: Цвет.-Background.-Градиент.pptx
Количество просмотров: 25
Количество скачиваний: 0
Скачать
- Предыдущая
Отбасы
Следующая -
Хронический гломерулонефрит
Похожие презентации
Блокнот. Подготовка текстового документа
Технологии проектирования компьютерных систем. Типы данных. (Лекция 4)
Spring Framework. Связи между объектами
Use native methods judiciously. (Item 54,55,56)
Информационные системы. Документальные и фактографические ИС. (Лекция 2)
Find numbers 0-10 and click them
Фейк-новости
Функционал рабочих приложений - КМ
Basic programming
Построение графиков функций в приложении MS Excel
Информационные ресурсы автоматизированных информационных систем федеральных арбитражных судов в РФ
Частотные методы улучшения изображений. Лекция 3
Email risk policy
Системы счисления и действия в них
Журнал Музет. Декабрь 2015
Краткий очерк истории языков программирования
Назначение блоков персонального компьютера (ПК)
Разработка системы сокрытия информации в видеофайлах
3D печать и 3D принтер
DS программирование. Циклы while и for
Курс: Информационные технологии
Основы информационной безопасности критических технологий
Как варить подкасты
Классификация информационных систем
Списки на Web-страницах.
покупки
Потоки
Планирование разработки программного обеспечения
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:378343,name:k,category:G,count:23,jpg:"jpg\u002F378343",hits:H,download:b,h1:"Цвет. Background. Градиент презентация",meta:{h1:k,title:k,description:"Цвет. Background. Градиент презентация на тему, доклад, Информатика",keywords:"Цвет. Background. Градиент, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Цвет. Background. Градиент из раздела Информатика. Презентация на заданную тему содержит 23 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EДОПОЛНЕНИЕ\u003Cbr\u003E\u003Cp\u003E\t\u003Cspan\u003E…\u003C\u002Fspan\u003E предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как \u003Ctable\u003E, \u003Cp\u003E или \u003Cdiv\u003E, с помощью тега \u003Cspan\u003E можно выделить часть информации внутри других тегов и установить для нее свой стиль.\u003Cbr\u003E \u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EЦВЕТ\u003Cbr\u003E\u003Cp\u003E\tЦвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.\u003Cbr\u003E\tПеред шестнадцатеричным числом ставят символ решетки #, например, #666999, чтобы не возникало путаницы в определении системы счисления. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. \u003Cbr\u003E\tФормат #rrggbbtt включает в себя альфа-канал, задающий прозрачность элемента от 00 до ff. #ffee00e0. \u003Cbr\u003E",file:"Цвет.-Background.-Градиент.pptx",texts:["\u003Cp\u003EЦВЕТ. BACKGROUND. ГРАДИЕНТ.\u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EДОПОЛНЕНИЕ\u003Cbr\u003E\u003Cp\u003E\t\u003Cspan\u003E…\u003C\u002Fspan\u003E предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как \u003Ctable\u003E, \u003Cp\u003E или \u003Cdiv\u003E, с помощью тега \u003Cspan\u003E можно выделить часть информации внутри других тегов и установить для нее свой стиль.\u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EЦВЕТ\u003Cbr\u003E\u003Cp\u003E\tЦвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.\u003Cbr\u003E\tПеред шестнадцатеричным числом ставят символ решетки #, например, #666999, чтобы не возникало путаницы в определении системы счисления. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. \u003Cbr\u003E\tФормат #rrggbbtt включает в себя альфа-канал, задающий прозрачность элемента от 00 до ff. #ffee00e0. \u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EМожно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).\u003Cbr\u003E\tФормат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. rgba(100%, 50%, 50%, 0.5). (CSS3). \u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003E\tНазвание формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок — это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359. Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает\u003Cbr\u003E\u003Cp\u003Eотсутствие цвета и оттенок серого, 100% максимальное значение насыщенности. Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. hsl(270, 100%, 50%)\u003Cbr\u003E\tФормат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. hsla(270, 100%, 50%, 0.6). (CSS3).\u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003E\tcolor определяет цвет текста элемента. color: цвет.\u003Cbr\u003E\topacity определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\topacity: значение\u003Cbr\u003E\tЗначения\u003Cbr\u003E\tВ качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.\u003Cbr\u003E","\u003Cp\u003E\tbackground универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.\t\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground: \u003Cфон\u003E, \u003Cпоследний фон\u003E\u003Cbr\u003E\tЗдесь: \u003Cфон\u003E = [background-attachment || background-image || background-position || background-repeat]\u003Cbr\u003E\t\u003Cпоследний фон\u003E = [background-attachment || background-color || background-image || background-position || background-repeat] \u003Cbr\u003E\tЕсли наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления. Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. \u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EBACKGROUND\u003Cbr\u003E","\u003Cp\u003E\tbackground-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. \u003Cbr\u003E\tВ CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground-attachment: fixed | scroll | local, …, fixed | scroll | local\u003Cbr\u003E\tЗначения\u003Cbr\u003E\tfixed делает фоновое изображение элемента неподвижным.\u003Cbr\u003E\tscroll позволяет перемещаться фону вместе с содержимым. (По умолчанию).\u003Cbr\u003E\tlocal фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tbackground-color определяет цвет фона элемента. \u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground-color: \u003Cцвет\u003E.\u003Cbr\u003E\tbackground-image устанавливает фоновое изображение для элемента.\u003Cbr\u003E\tВ CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.\u003Cbr\u003E\tСинтаксис\t\u003Cbr\u003E\tbackground-image: url(путь к файлу) | none, …, url(путь к файлу) | none\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tbackground-position задает начальное положение фонового изображения, установленного с помощью свойства background-image. \u003Cbr\u003E\tВ CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground-position: \u003Cпозиция\u003E, …, \u003Cпозиция\u003E\u003Cbr\u003E\tЗдесь:\u003Cbr\u003E\t\u003Cпозиция\u003E = [left | center | right | \u003Cпроценты\u003E | \u003Cзначение\u003E] || [top | center | bottom | \t\u003Cпроценты\u003E | \u003Cзначение\u003E].\u003Cbr\u003E\tУ свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. \u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003Etop left = left top = 0% 0% (в левом верхнем углу) (по умолчанию)\u003Cbr\u003Etop = top center = center top = 50% 0% (по центру вверху)\u003Cbr\u003Eright top = top right = 100% 0% (в правом верхнем углу)\u003Cbr\u003Eleft = left center = center left = 0% 50% (по левому краю и по центру)\u003Cbr\u003Ecenter = center center = 50% 50% (по центру)\u003Cbr\u003Eright = right center = center right = 100% 50% (по правому краю и по центру)\u003Cbr\u003Ebottom left = left bottom = 0% 100% (в левом нижнем углу)\u003Cbr\u003Ebottom = bottom center = center bottom = 50% 100% (по центру внизу)\u003Cbr\u003Ebottom right = right bottom = 100% 100% (в правом нижнем углу)\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tbackground-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. \u003Cbr\u003E\tВ CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.\u003Cbr\u003E\tСинтаксис\t\u003Cbr\u003E\tbackground-repeat: \u003Cповторение\u003E, …, \u003Cповторение\u003E \u003Cbr\u003E\tЗдесь:\u003Cbr\u003E\t\u003Cповторение\u003E = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}\u003Cbr\u003E\tДопустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tЗначения\u003Cbr\u003E\tno-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.\u003Cbr\u003E\trepeat фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.\u003Cbr\u003E\trepeat-x фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.\u003Cbr\u003E\trepeat-y фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.\u003Cbr\u003E\tspace изображение повторяется столько раз, чтобы полностью заполнить область. Если это не удаётся, между картинками добавляется пустое пространство.\u003Cbr\u003E\tround изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tГрадие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) —вектор, своим направлением указывающий направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный быстроте роста этой величины в этом направлении.\u003Cbr\u003E\tГрадиентом в css называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EГРАДИЕНТ\u003Cbr\u003E","\u003Cp\u003E\tlinear-gradient() создается с помощью двух и более цветов, для которых задано направление, или линия градиента.\u003Cbr\u003EЕсли направление не указано, используется значение по умолчанию — сверху-вниз.\u003Cbr\u003EЦвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground: linear-gradient(угол \u002F сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tНаправление градиента может быть задано двумя способами:\u003Cbr\u003E\tс помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента. \u003Cbr\u003E\tbackground: linear-gradient(45deg, #EECFBA, #C5DDE8);\u003Cbr\u003E\tс помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно. \u003Cbr\u003E\tbackground: linear-gradient(to right, #F6EFD2, #CEAD78);\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tЕсли направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.\u003Cbr\u003E\tbackground: linear-gradient(to top left, blue, pink);\u003Cbr\u003E\tДля неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, \t\u003Cbr\u003E\tbackground: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);\u003Cbr\u003E\tДля чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:\u003Cbr\u003E\tbackground: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tradial-gradient() отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground: radial-gradient(форма градиента \u002F размер \u002F позиция центра, первый цвет, второй цвет и т.д.);\u003Cbr\u003E\tФорма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.\u003Cbr\u003E\tbackground: radial-gradient(white, #FFA9A1);\u003Cbr\u003E\tПозиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.\u003Cbr\u003E\tbackground: radial-gradient(at top, #FEFFFF, #A7CECC);\u003Cbr\u003E\t\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tС помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.\u003Cbr\u003E\tbackground: radial-gradient(40% 50%, #FAECD5, #CAE4D8);\u003Cbr\u003E\tРазмер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).\u003Cbr\u003E\tbackground: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tВ добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.\u003Cbr\u003E\tbackground: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);\u003Cbr\u003E\tbackground: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E\tЗа счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E\tbackground: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(…) или (.\u002F…) {локальный файл};\u003Cbr\u003E\u003Cp\u003E2019\u003Cbr\u003E","\u003Cp\u003E2019\u003Cbr\u003E\u003Cp\u003EСпасибо за внимание!\u003Cbr\u003E"],href:"\u002Finformatika\u002Ftsvet-background-gradient",href_category:"\u002Finformatika",date:1659400027,related:[{id:275141,name:"Блокнот. Подготовка текстового документа",href:"\u002Finformatika\u002Fbloknot-podgotovka-tekstovogo-dokumenta",jpg:"jpg\u002F275141"},{id:233420,name:"Технологии проектирования компьютерных систем. Типы данных. (Лекция 4)",href:"\u002Finformatika\u002Ftehnologii-proektirovaniya-kompyuternyh-sistem-tipy-dannyh",jpg:"jpg\u002F233420"},{id:95365,name:"Spring Framework. Связи между объектами",href:"\u002Finformatika\u002Fspring-framework-svyazi-mezhdu-obektami",jpg:"jpg\u002F95365"},{id:203265,name:"Use native methods judiciously. (Item 54,55,56)",href:"\u002Finformatika\u002Fuse-native-methods-judiciously-item-545556",jpg:"jpg\u002F203265"},{id:305354,name:"Информационные системы. Документальные и фактографические ИС. (Лекция 2)",href:"\u002Finformatika\u002Finformatsionnye-sistemy-dokumentalnye-i-faktograficheskie-is",jpg:"jpg\u002F305354"},{id:100083,name:"Find numbers 0-10 and click them",href:"\u002Finformatika\u002Ffind-numbers-0-10-and-click",jpg:"jpg\u002F100083"},{id:587640,name:"Фейк-новости",href:"\u002Finformatika\u002Ffeyk-novosti",jpg:"jpg\u002F587640"},{id:103658,name:"Функционал рабочих приложений - КМ",href:"\u002Finformatika\u002Ffunktsional-rabochih-prilozheniy-km",jpg:"jpg\u002F103658"},{id:4924,name:"Basic programming",href:"\u002Finformatika\u002Fbasic-programming",jpg:"jpg\u002F4924"},{id:549180,name:"Построение графиков функций в приложении MS Excel",href:"\u002Finformatika\u002Fpostroenie-grafikov-funktsiy-v-prilozhenii-ms",jpg:"jpg\u002F549180"},{id:5043,name:"Информационные ресурсы автоматизированных информационных систем федеральных арбитражных судов в РФ",href:"\u002Finformatika\u002Finformatsionnye-resursy-avtomatizirovannyh-informatsionnyh-sistem-federalnyh",jpg:"jpg\u002F5043"},{id:172473,name:"Частотные методы улучшения изображений. Лекция 3",href:"\u002Finformatika\u002Fchastotnye-metody-uluchsheniya-izobrazheniy-lektsiya-3",jpg:"jpg\u002F172473"},{id:247985,name:"Email risk policy",href:"\u002Finformatika\u002Femail-risk-policy-1",jpg:"jpg\u002F247985"},{id:387136,name:"Системы счисления и действия в них",href:"\u002Finformatika\u002Fsistemy-schisleniya-i-deystviya-v-nih",jpg:"jpg\u002F387136"},{id:129715,name:"Журнал Музет. Декабрь 2015",href:"\u002Finformatika\u002Fzhurnal-muzet-dekabr-2015",jpg:"jpg\u002F129715"},{id:133912,name:"Краткий очерк истории языков программирования",href:"\u002Finformatika\u002Fkratkiy-ocherk-istorii-yazykov-programmirovaniya",jpg:"jpg\u002F133912"},{id:255882,name:"Назначение блоков персонального компьютера (ПК)",href:"\u002Finformatika\u002Fnaznachenie-blokov-personalnogo-kompyutera-pk",jpg:"jpg\u002F255882"},{id:327849,name:"Разработка системы сокрытия информации в видеофайлах",href:"\u002Finformatika\u002Frazrabotka-sistemy-sokrytiya-informatsii-v-videofaylah",jpg:"jpg\u002F327849"},{id:590122,name:"3D печать и 3D принтер",href:"\u002Finformatika\u002F3d-pechat-i-3d-printer",jpg:"jpg\u002F590122"},{id:579309,name:"DS программирование. Циклы while и for",href:"\u002Finformatika\u002Fds-programmirovanie-tsikly-while-i-for",jpg:"jpg\u002F579309"},{id:295949,name:"Курс: Информационные технологии",href:"\u002Finformatika\u002Fkurs-informatsionnye-tehnologii",jpg:"jpg\u002F295949"},{id:103717,name:"Основы информационной безопасности критических технологий",href:"\u002Finformatika\u002Fosnovy-informatsionnoy-bezopasnosti-kriticheskih-tehnologiy",jpg:"jpg\u002F103717"},{id:198804,name:"Как варить подкасты",href:"\u002Finformatika\u002Fkak-varit-podkasty",jpg:"jpg\u002F198804"},{id:417537,name:"Классификация информационных систем",href:"\u002Finformatika\u002Fklassifikatsiya-informatsionnyh-sistem-11",jpg:"jpg\u002F417537"},{id:564644,name:"Списки на Web-страницах.",href:"\u002Finformatika\u002Fspiski-na-web-stranitsah-1",jpg:"jpg\u002F564644"},{id:361399,name:"покупки",href:"\u002Finformatika\u002Fpokupki",jpg:"jpg\u002F361399"},{id:397935,name:"Потоки",href:"\u002Finformatika\u002Fpotoki-3",jpg:"jpg\u002F397935"},{id:424665,name:"Планирование разработки программного обеспечения",href:"\u002Finformatika\u002Fplanirovanie-razrabotki-programmnogo-obespecheniya",jpg:"jpg\u002F424665"}],navigation:{next:"\u002Fmedetsina\u002Fhronicheskiy-glomerulonefrit-3",next_name:"Хронический гломерулонефрит",prev:"\u002Fobshchestvoznanie\u002Fotbasy-3",prev_name:"Отбасы"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:H,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Цвет. Background. Градиент","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",25,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

2019
ЦВЕТ
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.
Перед шестнадцатеричным числом ставят символ решетки #, например, #666999, чтобы не возникало путаницы в определении системы счисления. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
Формат #rrggbbtt включает в себя альфа-канал, задающий прозрачность элемента от 00 до ff. #ffee00e0.

2019
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. rgba(100%, 50%, 50%, 0.5). (CSS3).

2019
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок — это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359. Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает
отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности. Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. hsl(270, 100%, 50%)
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. hsla(270, 100%, 50%, 0.6). (CSS3).

2019

2019
color определяет цвет текста элемента. color: цвет.
opacity определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

background универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
background: <фон>, <последний фон>
Здесь: <фон> = [background-attachment || background-image || background-position || background-repeat]
<последний фон> = [background-attachment || background-color || background-image || background-position || background-repeat]
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления. Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
2019
BACKGROUND

background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-attachment: fixed | scroll | local, …, fixed | scroll | local
Значения
fixed делает фоновое изображение элемента неподвижным.
scroll позволяет перемещаться фону вместе с содержимым. (По умолчанию).
local фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
2019

background-color определяет цвет фона элемента.
Синтаксис
background-color: <цвет>.
background-image устанавливает фоновое изображение для элемента.
В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-image: url(путь к файлу) | none, …, url(путь к файлу) | none
2019

background-position задает начальное положение фонового изображения, установленного с помощью свойства background-image.
В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-position: <позиция>, …, <позиция>
Здесь:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>].
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
2019

top left = left top = 0% 0% (в левом верхнем углу) (по умолчанию)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
2019

background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
background-repeat: <повторение>, …, <повторение>
Здесь:
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.
2019

Значения
no-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
space изображение повторяется столько раз, чтобы полностью заполнить область. Если это не удаётся, между картинками добавляется пустое пространство.
round изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
2019

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) —вектор, своим направлением указывающий направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный быстроте роста этой величины в этом направлении.
Градиентом в css называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
2019
ГРАДИЕНТ

linear-gradient() создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
Если направление не указано, используется значение по умолчанию — сверху-вниз.
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Синтаксис
background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);
2019

Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.
background: linear-gradient(to right, #F6EFD2, #CEAD78);
2019

Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
background: linear-gradient(to top left, blue, pink);
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка,
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
2019

radial-gradient() отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
Синтаксис
background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
background: radial-gradient(white, #FFA9A1);
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.
background: radial-gradient(at top, #FEFFFF, #A7CECC);
2019

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);
2019

В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
2019

За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.
Синтаксис
background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(…) или (./…) {локальный файл};
2019