beget banner 468x60beget banner 728x90beget banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

CSS Примеры

Как выровнять содержимое div по низу с помощью CSS

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

Как изменить прозрачность background, не затрагивая дочерние элементы или текстовое содержимое

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

Как растянуть и масштабировать фоновое изображение с помощью CSS

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

Как создать треугольник или каретку с помощью CSS

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

Как создать собственный курсор с помощью CSS

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

Как создать неупорядоченный список без маркеров в HTML

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

Как превратить курсор в указатель руки при наведении курсора с помощью CSS

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

Как создать два элемента div рядом с одинаковой высотойв CSS

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

Как сделать div не больше, чем его содержимое, используя CSS

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

Как установить внутренние и внешние отступы для ячеек таблицы в CSS

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

Как автоматически изменить размер изображения для размещения в контейнере div с помощью CSS

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

Как применить прозрачность CSS в браузерах IE7 и IE8

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