Вы можете использовать CSS-свойство box-shadow, чтобы применить эффект тени к элементам блочного уровня. Тень блока может быть применена как внутри, так и снаружи блока элемента. Посмотрим следующий пример, чтобы понять, как это работает:

CSS-свойство -ms-overflow-style — это расширение Microsoft, управляющее поведением полос прокрутки при переполнении содержимого элемента. Если вы не хотите включать полосу прокрутки явно, но хотите иметь возможность прокрутки, используйте -ms-overflow-style или ::-webkit-scrollbar с width или height 0. Свойство -ms-overflow-style принимает следующие значения: auto Начальное значение. Тоже, что и inherit. none Полосы прокрутки никогда не отображаются, хотя…

Вы можете выровнять любой элемент <div> с абсолютной или фиксированной позицией по горизонтали по центру, используя CSS-свойство margin в сочетании со свойством left и right. Давайте посмотрим следующий пример, чтобы понять, как это работает:

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

По умолчанию замещающий текст поля ввода <input> и <textarea> отображается светло-серым цветом, и стандартного CSS-свойства для его стилизации нет. Однако есть некоторые нестандартные псевдоэлементы и псевдоклассы, зависящие от браузера, которые можно использовать для настройки внешнего вида текста-заполнителя, как показано в следующем примере:

Вы можете просто использовать CSS-свойство background-color в сочетании с height и border, чтобы изменить цвет по умолчанию для элемента <hr>. В следующем примере мы изменили цвет тега hr на светло-серый. Вы также можете увеличить толщину линии, просто увеличив значение свойства height.

По умолчанию размер элемента <select> зависит от размера самого большого внутреннего элемента <option>. Однако иногда полезно установить фиксированную ширину для поля выбора и увеличить его размер до исходного при фокусе, когда пользователь пытается выбрать какой-либо параметр. В следующем примере показано, как реализовать этот эффект с помощью чистого CSS:

По умолчанию большая часть браузера выделяет выделенный текст синим фоном. Однако вы можете переопределить этот параметр с помощью псевдоэлемента CSS ::selection. В настоящее время браузеры поддерживают только небольшое подмножество CSS-свойств для псевдоэлемента ::selection, например color, background-color и text-shadow. Давайте посмотрим на пример: CSS-свойство text-shadow в псевдоэлементе ::selection не поддерживается в Internet Explorer; поддерживается только в…

В браузере Google Chrome элементы управления формы, такие как <input>, <textarea> и <select>, выделяются синим контуром при фокусе. Это поведение хрома по умолчанию, однако, если оно вам не нравится, вы можете легко удалить его, установив для свойства outline значение none. Давайте посмотрим на следующий пример, чтобы понять, как это работает: Однако рекомендуется применить альтернативный стиль,…

По умолчанию между границами соседних ячеек таблицы есть некоторое пространство, поскольку модальные границы по умолчанию для таблиц HTML разделены. Но вы можете перезаписать это свойство и создать таблицу со свернутыми границами без какого-либо интервала между ячейками, просто установив значение CSS-свойства border-collapse для элемента <table> на collapse, как показано в примере ниже:

Вы можете использовать CSS-свойство border в элементе <span> в сочетании с другими CSS-свойствами, такими как display и height, для создания вертикальных линий в HTML. В следующем примере будет создана вертикальная разделительная линия между двумя изображениями. Вы можете дополнительно увеличить высоту линии, просто увеличив значение свойства height.

В CSS3 вы можете добавить или применить несколько фонов к элементу. Фоны размещаются один над другим, причем первый заданный вами фон будет наверху, а последний — сзади. Кроме того, последний фон может включать background-color. Давайте попробуем следующий пример, чтобы понять, как это работает: