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

Не существует CSS-свойства, такого как background-opacity, которое можно использовать только для изменения прозрачности фона, не затрагивая его дочерние элементы. С другой стороны, если вы попытаетесь сделать это с помощью CSS-свойства opacity, это не только изменит непрозрачность фона, но также изменит непрозрачность всех дочерних элементов. В таких ситуациях вы можете использовать цвет RGBA, введенный в CSS3,…

Вы можете использовать CSS-свойство background-size: cover; для растягивания и масштабирования фонового изображения. Оно масштабирует изображение как можно больше таким образом, чтобы фоновая область полностью покрывалась фоновым изображением, сохраняя при этом его внутреннее соотношение сторон. Однако часть изображения может быть не видна (обрезана по вертикали или горизонтали), если ширина или высота измененного фонового изображения слишком велика…

Вы можете легко создать треугольные значки, указывающие вверх, вниз, влево или вправо, используя комбинацию прозрачных и сплошных цветов для границ элементов, которые не имеют CSS-свйоств width и height. Давайте посмотрим на пример, чтобы понять, как это работает:

Вы можете определить собственный курсор, используя CSS-свойство cursor. Свойство cursor принимает список значений определяемых пользователем, разделенных запятыми, последним должно следовать значение по умолчанию (generic cursor). Прежде всего создайте изображение курсора и сохраните его с расширением .gif или .png (для Firefox, Chrome, Safari) и .cur (для Internet Explorer). После этого примените свойство cursor с разделенным запятыми…

Вы можете просто использовать CSS-свойство list-style-type со значением none, чтобы удалить маркеры из неупорядоченного списка (т. е. элемента <ul>). Кроме того, чтобы удалить из списка левый отступ по умолчанию, вы можете использовать padding-left: 0;. Вот пример:

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

С помощью flexbox-модели CSS3 вы можете очень легко создать столбцы одинаковой высоты или элементы <div>, которые выровнены относительно одной базовой линии. Просто примените свойство display со значением flex к элементу контейнера и свойством flex со значением 1 к дочерним элементам. Давайте посмотрим следующий пример, чтобы понять, как это работает:

Вы можете просто использовать CSS-свойство display со значением inline-block, чтобы сделать <div> не больше, чем его содержимое (то есть расширять только до ширины его содержимого). display: inline-block; заставит элемент генерировать блок-бокс, который размещается, как если бы он был встроенным блоком. Давайте посмотрим следующий пример:

Как мы знаем, атрибуты cellpadding и cellspacing в HTML5 удалены. Но вы все равно можете легко установить заполнение внутри ячеек таблицы, используя CSS-свойство padding. Это действительный способ произвести тот же эффект, что и атрибут cellpadding таблицы. Правила стиля в следующем примере добавят 10 пикселей отступа к ячейкам таблицы. Точно так же вы можете использовать CSS-свойство…

CSS-свойство opacity поддерживается только в браузерах Internet Explorer 9 и выше. Однако Internet Explorer 8 и более ранние версии поддерживают свойство alpha filter только от Microsoft для управления прозрачностью элемента. Вот пример:

Вы можете просто использовать CSS-свойство max-width для автоматического изменения размера большого изображения, чтобы оно могло поместиться в контейнер меньшей ширины <div>, сохраняя при этом его соотношение сторон. Кроме того, вы можете применить свойство max-height, если у вас есть элемент <div> с фиксированной высотой, чтобы изображение не выходило за пределы границы <div> по горизонтали или вертикали.