Комбинация градиента и фонового изображения

За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.

div{height: 453px;background:linear-gradient(45deg,rgba(103, 0, 31,.8),rgba(34, 101, 163,.5)),url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg);background-size: cover;}

 

Границы, аутлайныитени.

Border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left,border-right.

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Outline

Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

 

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

none

Отменяет добавление тени.

inset

Тень выводится внутри элемента. Необязательный параметр.

сдвиг по x

Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.

сдвиг по y

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

размытие

Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.

растяжение

Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.

цвет

Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

 

Лучшие шрифты для веб:

Roboto

Roboto

Roboto

Open sans

Open sans

Open sans

Georgia

Georgia

Georgia

Montsserat

Montsserat

Montsserat

Стили указателей.

Сursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

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

url

Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.

auto

Вид курсора по умолчанию для текущего элемента.

inherit

Наследует значение родителя.

 

Вид	Значение	Тест	Пример
	default		P {cursor: default}
	crosshair		P {cursor: crosshair}
	help		P {cursor: help}
	move		P {cursor: move}
	pointer		P {cursor: pointer}
	progress		P {cursor: progress}
	text		P {cursor: text}
	wait		P {cursor: wait}
	n-resize		P {cursor: n-resize}
	ne-resize		P {cursor: ne-resize}
	e-resize		P {cursor:e-resize}
	se-resize		P {cursor: se-resize}
	s-resize		P {cursor: s-resize}
	sw-resize		P {cursor: sw-resize}
	w-resize		P {cursor: w-resize}
	nw-resize		P {cursor:nw-resize}

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url('путь к курсору1'), url('путь к курсору2'),..., <ключевое слово>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Фавикон (favicon - это сокращение от Favorite icon, в переводе с анг. означает любимый значок) - иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе.

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

<html>

<head>

 

<link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

 

</head>

<body>

</body>

</html>

 

В таблице показаны различные варианты добавления фавикона

	Google Chrome	Internet Explorer	Firefox	Opera	Safari
<link rel="shortcut icon" href="httр://mysite.ru/myicon.ico">	Да	Да	Да	Да	Да
<link rel="icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 9)	Да	Да	Да
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">	Да	Да (с IE 11)	Да	Да	Да
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico">	Да	Да (с IE 9)	Да	Да	Да

 

Advansed CSS.

Приоритет стилей.

!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то!important позволяет повысить приоритет стиля.

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

!important добавлен в авторский стиль — будет применяться стиль автора.

!important добавлен в пользовательский стиль — будет применяться стиль пользователя.

!important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.

!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Стиль автора	Стиль пользователя	Результат
BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt }	BODY { /* Черный цвет текста */ color: #000; /* Размер текста 12 пунктов */ font-size: 12pt }	Lorem ipsum dolor sit amet... Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt }	BODY { /* Черный цвет текста, повышенная важность */ color: #000!important; /* Размер текста 12 пунктов */ font-size: 12pt }	Lorem ipsum dolor sit amet... Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt }	BODY { /* Черный цвет текста, повышенная важность */ color: #000!important; /* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt!important }	Lorem ipsum dolor sit amet... Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY { /* Серый цвет текста, повышенная важность */ color: silver!important; /* Размер текста 8 пунктов, повышенная важность */ font-size: 8pt!important }	BODY { /* Черный цвет текста, повышенная важность */ color: #000!important; /* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt!important }	Lorem ipsum dolor sit amet... При добавлении!important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.