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

Если вы просто хотите отображать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя CSS-свойство display и псевдокласс :hover. В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS. И с семантической и практической точки зрения это не самое удачное решение. Во-первых, пользователь захочет…

Вы можете использовать CSS-свойство position в сочетании со свойством z-index для наложения одного <div> поверх другого элемента <div>. Свойство z-index определяет порядок наложения позиционированных элементов (т. е. элементов, значение position которых является absolute, fixed, или relative). Давайте посмотрим следующий пример, чтобы понять, как это работает: В приведенном выше примере элемент div с классом .stack-top будет…

Вы можете просто использовать CSS-свойство pointer-events, чтобы отключить поведение ссылки по умолчанию. Значение none этого свойства указывает, что элемент никогда не является целью событий указателя. Давайте посмотрим следующий пример, чтобы понять, как это работает: Свойство pointer-events поддерживается во всех основных браузерах, таких как Chrome, Firefox, Safari, IE11 + и т. д. В качестве альтернативы вы…

Если вы примените border для элемента при наведении курсора мыши, он «раздвинет» окружающие элементы. Однако, используя отрицательное значение CSS-свойства margin, вы можете сделать это не затрагивая другие элементы или контент. Давайте посмотрим пример, чтобы понять, как это в основном работает: В качестве альтернативы вы можете установить border с той же шириной и значением цвета transparent…

Если вы попытаетесь поместить изображение в элемент <div>, имеющий границы, вы увидите лишнее белое пространство (около 3px) внизу изображения. Это происходит потому, что изображение является строчным элементом, поэтому браузер добавляет некоторые пробелы под базовой линией. Самый простой способ избавиться от этой проблемы — изменить отображаемое значение изображения по умолчанию со строчного на блочное, т.е. применить…

Вы можете легко создать липкий или фиксированный <header> или <footer>, используя фиксированное позиционирование CSS. Просто примените CSS-свойство position с фиксированным значением в сочетании со свойством top и bottom, чтобы разместить элемент соответственно вверху или внизу области просмотра. Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Если вы попытаетесь выровнять текст по вертикали по центру внутри div, используя CSS-правило vertical-align: middle;, оно у вас не сработает. Предположим, у вас есть элемент div высотой 50px, и вы поместили в него ссылку, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте…

Если вы хотите нарисовать границы внутри прямоугольного блока, есть очень простое решение — просто используйте CSS-свойство outline вместо border и переместите его внутри рамки элемента, используя свойство CSS3 outline-offset с отрицательным значением. Однако это решение не подойдет для элементов со скругленными углами. Но вы все равно можете рисовать границы внутри круглого прямоугольника или элемента с…

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

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

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