Ховер эффекты для изображений css. CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др. CSS анимированный эффект при наведении

Подготовке любого цифрового изображения, читаемого графическим редактором Adobe Photoshop, будь то PSD-файла, TIF-изображения или «большой» JPEG-картинки, к публикации на сайте, в форуме или социальных сетях, а также к пересылке по электронной почте. Другими словами, «джейпег» для Интернет. В рифму получилось.

Безусловно, форматы изображений, которые умеет читать Photoshop, едва ли исчерпываются названными тремя. И что приятно, большинство можно перевести в JPEG. Вне зависимости от исходного формата в Photoshop существуют два пути «джейпегизации». Возможность выбирать приятна вдвойне. Оба пути различаются. Внешние отличия обнаруживаются невооружённым взглядом, отличия в назначении («Каким путём следовать?») я выделю специально.

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

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

Первый способ

1 шаг

Открываю исходное изображение в Photoshop. В моём случае это файл с названием «Пример.psd», содержащий нарисованный шар.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» («File») > «Сохранить Как…» («Save As…»). Появляется диалоговое окно с заголовком «Сохранить как».

2 шаг

Выбираю месторасположение будущего JPEG-изображения. В поле «Имя файла» ввожу новое название картинки, если необходимо. В ниспадающем списке «Тип файла» выбираю формат «JPEG (*.JPG, *.JPEG, *.JPE)».

Параметры ниже оставляю без изменений, удостоверившись, что в качестве цветового профиля, встраиваемого в будущее JPEG-изображение, указан и выбран «стандартный» sRGB. Если это так, то перехожу к 4-ому шагу.

Если вместо sRGB указан другой цветовой профиль, например, ProPhotoRGB или AdobeRGB, то перед началом рассматриваемой в уроке процедуры я переведу исходное изображение в цветовое пространство sRGB в целях единообразного отображения цветов на большинстве устройств. Сделаю это следующим образом.

3 шаг

Нажимаю на клавиатуре клавишу «Esc», чтобы закрыть окно «Сохранить как».

Выбираю в главном меню «Изображение» («Image») > «Режим» («Mode»). Если «галочка» установлена напротив «8 бит\канал» («8Bits\Channel»), то выбираю «16 бит\канал» («16bits\Channel»). Увеличение глубины цвета желательно, чтобы конвертация из одного цветового профиля в другой прошла аккуратно. Визуально на исходном и итоговом изображениях изменение глубины цвета едва ли отразится.

Затем выбираю в главном меню «Редактировать» («Edit») > «Преобразовать в профиль» («Convert to Profile»). Появляется диалоговое окно с заголовком «Преобразовать в профиль».

В моём случае исходный цветовой профиль («Source Space»), который описывает цвета в рисунке, называется «Adobe RGB (1998)». Выбираю в ниспадающем списке «Целевой профиль» («Destination Space») значение «sRGB IEC61966-2.1». Проверяю параметры преобразования - они располагаются ниже: параметр «Инструмент» («Engine») имеет значение «Adobe (ACE)», «Метод (рендеринга)» («Intent») - «Относительный колориметрический» («Relative Colorimetric»), установлена «галочка» напротив параметра «Использовать компенсацию точки чёрного» («Use Black Point Compensation»), «галочка» отсутствует напротив параметра «Свести изображение, чтобы сохранить вид» («Flatten Image to Preserve Appearance»).

Если Вы увеличили глубину цвета (я проделал это чуть раньше), то параметр «Использовать дизеринг» («Use Dither») будет неактивным. Если в открытом изображении всего один слой (когда Вы открываете JPEG-картинки или «простые» TIF-изображения, обычно, так и есть), то параметр «Свести изображение, чтобы сохранить вид», также, неактивен.

Нажимаю кнопку «Готово» («OK»). Окно «Преобразовать в профиль» исчезает.

4 шаг

В главном окне программы появляется новое диалоговое окно с заголовком «Параметры JPEG» («JPEG Options»). Параметр «Качество» («Quality») позволяет задавать соотношение качества выходного изображения и объёма, который картинка будет занимать в памяти компьютера. Таким образом, оплатой за уменьшение объёма является деградация качества исходного изображения. Чем меньше значение параметра «Качество», тем меньше объём JPEG-изображения.

В рассматриваемом примере я остановлюсь на значении равном 6.

Чтобы оценить качество картинки до сохранения, установлю рядом с параметром «Предпросмотр» («Preview») «галочку».

5 шаг

Установлю значение второго параметра - «Форматирование» («Format Options») - равным «Стандартное оптимизированное» («Baseline Optimized»). Объём будущей JPEG-картинки уменьшился, а качество изображения осталось прежним.

6 шаг

Нажимаю в окне «Параметры JPEG» («JPEG Options») кнопку «Готово» («OK») и проверяю результат.

Сравниваю объёмы исходного PSD-рисунка (~ 3000 Kb) и итоговой JPEG-картинки (82 Kb). Таким образом, JPEG-файл получился примерно в 36 раз меньше исходного изображения при визуально равном качестве. Удобно!

Обращаю внимание, что размер итогового JPEG-изображения остался прежним, как у исходного PSD-рисунка он равен 2480 пикселей × 2480 пикселей.

Второй способ

1 шаг

Открываю исходное изображение в Photoshop.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Alt», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» > «Сохранить для Веб…» («Save for Web…»).

Появится новое диалоговое окно с одноимённым заголовком.

2 шаг

3 шаг

Устанавливаю значение параметра «Качество» («Quality») на максимум.

4 шаг

Уменьшаю размер изображения с помощью параметра «Размер изображения» («Image Size»).

Это необязательная операция, но она помогает существенно уменьшить объём будущего JPEG-изображения, чаще всего, с минимальными потерями в качестве. С одной стороны, уменьшение размера приведёт к естественному уменьшению объёма и, с другой стороны, к уменьшению детализации. Последнее, в свою очередь, ограничивает мои возможности в печати итоговой JPEG-картинки. Если я не планирую печатать последнюю, то забуду об ограничениях.

В данном примере ввожу в поле «Ширина» («Width») значение 600. Автоматически изменится значение в поле «Высота» («Height»). Также, автоматически изменится размер выходного изображения относительно размера исходного рисунка, указанный в поле «Процент» («Percent»). Изменения происходят автоматически и поле «Процент» находится в активном состоянии, если поля-параметры «Ширина» и «Высота» связаны, о чём свидетельствует соответствующий значок, расположенный справа от названных полей.

В окошке предпросмотра слева оценю размер и качество изображения. А примерный объём последнего смогу узнать по числу, указанному, обычно, в килобайтах (Kb) или мегабайтах (Mb) под левым углом окошка.

5 шаг

Устанавливаю «галочку» рядом с параметром «Оптимизированный» («Optimized»).

6 шаг

Если хочу ещё сократить объём выходного изображения, то уменьшаю значение параметра «Качество» («Quality»). Рекомендую придерживаться значений в пределах 45-90.

В данном случае я выберу значение равное 75.

В итоге, среднестатистическое, при скорости доступа в Интернет равной одному мегабиту (1 Mbits), время загрузки моего рисунка из Интернет составит одну секунду. Оно указывается под значением объёма будущего JPEG-изображения.

При этом, визуально картинка получилась вполне приемлемого качества, переходы тонов достаточно плавные.

7 шаг

Устанавливаю «галочку» рядом с параметром «Преобразовать в sRGB» («Convert to sRGB») и выбираю значение «Цвета, отображаемые монитором» («Monitor Color») в ниспадающем списке ниже.

8 шаг

Наконец, устанавливаю «галочку» рядом с параметром «Встроенный цветовой профиль» («Embed Color Profile»).

Действия на 7-ом и 8-ом шагах желательны, чтобы будущее JPEG-изображение примерно одинаково отображалось на различных устройствах.

9 шаг

В появившемся диалоговом окне с заголовком «Сохранить оптимизированное изображение как» («Save Optimized As») выбираю месторасположение JPEG-картинки и задаю её имя, если необходимо. Нажимаю в активном окне кнопку «Сохранить». Оба окна исчезают. Теперь могу оценить результат.

Закрываю исходное изображение. В появившемся диалогом окошке с предложением сохранить изменения, выбираю «Нет» («No»).

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

Подробнее об интерполяции и её влиянии на деградацию качества цифрового изображения я расскажу в уроке «Что такое интерполяция?»

​

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

Определение идеального качества JPEG и в Photoshop и в Lightroom может быть сложным, потому что мы часто видим два различных значения, из которых нам предлагается выбрать. Photoshop предлагает пользователю уровни сжатия от 0 до 12 при сохранении изображений в формате JPEG через пункт «Сохранить» или «Сохранить как», в то время как Lightroom предлагает выбрать процент. Воспринимать проценты проще, чем цифры от 0 до 12, так как 100% нам легче соотнести с «лучшим качеством изображения». Непонятно зачем Adobe создала путаницу со значением чисел, так как нигде в документации нет информации о том, какой диапазон эти самые числа представляют.

Правда, значение в процентах, которые мы видим в Lightroom на самом деле не отображают реальные значения 0 до 100. Adobe просто решила отобразить шкалу от 0 до 12 в процентном соотношении. В итоге это означает, что переход от одного числа к другому, например, в диапазоне от 85% до 90% не даст никакой разницы в сжатии и размере изображения, в то время как изменение от 84% до 85%, наоборот, будет иметь существенное значение.

Ниже приведены различные окна, которые мы привыкли видеть. Во-первых, вы видите окно, которое отображается, когда вы нажимаете кнопку «Сохранить» или «Сохранить как» и выбираете формат JPEG в Photoshop:

Как уже говорилось, в этом окне вы можете выбрать значение по шкале от 0 до 12. А вот окно экспорта Lightroom:

Здесь мы видим информацию о степени сжатия JPEG от 0% до 100%.

Теперь давайте взглянем на таблицу ниже, где значения шкалы Photoshop от 0 до 12 отображаются в процентах:

Итак, что же это значит? В целом это означает, что некоторые числа вообще не имеют значения, в то время как другие существенно влияют на качество, даже при малейшем смещении по процентной шкале. То есть выбор качества 80% даст вам тот же самый результат, что и 77% или 84%. И до тех пор, пока вы не выберете значение 85%, ничего не изменится. То же самое касается и 90% — этот уровень качества ничем не отличается от 85%!

Функция Photoshop «Сохранить для Web»

Функция Photoshop «Сохранить для Web» работает несколько иначе от рассмотренных выше «Сохранить» и «Сохранить как…» в Photoshop и экспорте в Lightroom, так как в ней используется иной алгоритм сжатия. Здесь имеет значение каждое число от 0 до 100, а размер файла может существенно варьироваться.

Что следует особо отметить в этой функции, так это то, что она оптимизирована для файлов с небольшим разрешением, предназначенных для публикации на сайте. Как видите, здесь есть больше параметров для настройки JPEG, например, вы можете выбрать, сохранять данные EXIF ​​(поле метаданных) или полностью удалить их вместе с цветовым профилем.

Оптимальная степень сжатия JPEG

Если при экспорте изображений в формате JPEG вы всегда выбирали уровень качества 12 или 100%, то у вас, скорее всего, полно изображений, размер которых слишком велик без видимых на то причин. Дело в том, что при выборе 100% качества при экспорте в формате JPEG используется минимальное сжатие, что приводит к файлам огромного размера. Это не только увеличивает ваши потребности в размере накопителей, но также увеличивает время, необходимое для загрузки изображений на сайт, и расходы на хранение и пропускную способность. В то время как многие сайты при загрузке изображений применяют различные алгоритмы для их сжатия, лишь немногие делают это достаточно качественно. Так зачем тратить ресурсы и время, постоянно загружая изображения в 100% качестве?

Для сжатия JPEG я бы рекомендовал использовать значение 77% в Lightroom , и 10 в Photoshop . Такие настройки позволяют сэкономить примерно 200% и более дискового пространства, при этом сохраняя в сцене достаточно деталей, без добавления видимых артефактов. Изредка бывают ситуации, когда на 77% могут появляться полосы в небе, так что если вы столкнулись с такой проблемой, то увеличьте качество до 85%, как правило, этого бывает достаточно для её решения. Я практически никогда не использую значения выше.

Хотя, для многих фотографий даже 77% могут быть излишними. Если вы посмотрите на таблицу выше, выбор качества ниже 10 позволяет значительно сэкономить пространство.

Если вы хотите значительно уменьшить размер файла изображения, то попробуйте сместить ползунок уровня качества до 62% или даже 54% и посмотреть устраивает вас полученный результат или нет. Пожалуйста, обратите внимание, что от изображения к изображению результаты будут разниться. Некоторые фотографии будут хорошо выглядеть на низких уровнях сжатия, в то время как другие – нет.

А какую степень сжатия в Lightroom и Photoshop используете вы? Поделитесь своими параметрами в комментариях к этой статье.

От автора: несколько уроков по созданию hover эффектов на чистом CSS, привязанных к направлению курсора. Уроки предназначены для тех, кто имеет хотя бы базовые знания HTML и на продвинутом уровне знают CSS/SASS.

Дисклеймер

Эффекты не работают в старых браузерах, для их работы нужен браузер с возможностью рендеринга 3D трансформаций. Я проверял эффекты в последних версиях браузеров Chrome, Firefox и Safari.

Также я использую замечательную библиотеку AutoPrefixer для автоматической подстановки вендорных префиксов. Зайдите в настройки CodePen на вкладку CSS и выберите AutoPrefixer.

Эффект hover с параллаксом

Введение

Мы с моим дизайнером наткнулись на домашнюю страницу сайта Kikk Festival еще в 2015 году, на ней были реализованы карточки с параллакс эффектом при наведении курсора. Нам понравилось, и мы захотели воссоздать такой эффект в своем проекте. Однако из-за особенностей кода мы не могли использовать JS. Я начал рыскать в поисках решений на чистом CSS и нашел кое-что интересное.

Всемогущая тильда

Один из самых любимых моих селекторов в CSS – тильда (~), которая выбирает ближайший элемент, подходящий под селектор, но расположенный после первого элемента. Например, ul ~ p выберет элементы p в коде ниже:

< div > < ul > < / ul > < ol > < / ol > < p > < / p > < p > < / p > < / div >

Я понял, что это можно использовать для создания hover эффектов с учетом направления курсора практически для чего угодно!

Структура

Структура ссылок довольно проста – контейнер с набором тегов и контейнер для контента карточки. Во всех атрибутах href должен быть один URL.

Content

< div class = "container" > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < div class = "card" > < h1 > Content < / h1 > < / div > < / div >

Добавим немного SASS/CSS, чтобы расположить все ссылки по углам карточки. Можно сделать больше ссылок, но для простоты возьмем четыре. Для ускорения процесса будем использовать Haml.

Так как у нас нет JS, который бы нас предупреждал о направлении движения мыши и положении курсора, мы будем использовать ссылки для разделения карточки на зоны обнаружения. Если, например, курсор попадет на ссылку №1 сверху, то мышь попадает в зону обнаружения №1 до захода в №3 и №4.

Эффект hover

a { &:hover, &:focus { ~ .card { // CSS код } } }

& : hover , & : focus { ~ . card { // CSS код

Карточка будет меняться при наведении курсора на любую ссылку, в отличие от селектора +, который выбирает только ближние смежные элементы.

Трансформации

Углы определяются правильно, теперь мы добавим трансформации, которые будут наклонять карточку по углам. Первым делом необходимо добавить перспективу к контейнеру. Я обычно использую что-то в районе 1000px, чтобы можно было показать легкую глубину.

Для параллакса такого вида самым важным свойством будет не transform, а transform-origin, наложенное на карточку. Оно должно меняться для всех зон обнаружения и присваиваться к противоположному углу от текущей зоны обнаружения.

Например, если мы заходим в зону обнаружения №1 (верх лево), transform-origin должно быть bottom right, т.е. противоположный угол. Суть такая – затронутый угол должен двигаться от нас, а остальные углы к нам.

Последние штрихи

В завершении нашего параллакс эффекта добавим рамку в карточку, которая будет также изгибаться при наведении курсора на ссылку. Эту технику можно применить к другим элементам в карточке.

// стили рамки.card { position: relative; .border { transform-origin: center center; position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 2px solid white; } } // параллакс эффект.container { a { &:hover, &:focus { ~ .card { .border { transform: translateZ(24px); } } } // толкаем рамку назад по клику &:active { ~ .card { .border { transform: none; } } } } }

// стили рамки Card { position : relative ; Border { transform - origin : center center ; position : absolute ; top : 12px ; left : 12px ; width : calc (100 % - 24px ) ; height : calc (100 % - 24px ) ; border : 2px solid white ; // параллакс эффект Container { & : hover , & : focus { ~ . card { Border { transform : translateZ (24px ) ; // толкаем рамку назад по клику & : active { ~ . card { Border { transform : none ;

Осталось (1) добавить transition к карточке, чтобы сгладить переход по углам, и (2) удалить стили ссылок, чтобы они были не видны. Я люблю ставить opacity в 0 во избежание казусов. Чтобы избежать перекрытия из-за поворотов карточки, я также двигаю ссылку, на которую наведен курсор, вперед.

Результат

Ниже показана завершенная версия параллакс эффекта при наведении на CodePen . Переключите чекбокс, чтобы увидеть расположение ссылок. Для улучшения параллакс эффекта я решил добавить еще немного ссылок.

Эффект hover на примере куба

Введение

Adult Swim Singles 2016 – еще один сайт с впечатляющим эффектом наведения с учетом направления курсора. По клику на иконку календаря в левом верхнем углу открывается 3D календарь, где каждый день представлен в виде куба, который поворачивается в зависимости от направления курсора. Замечательная идея!

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

Основа

Теперь можно приступить к созданию основы куба со ссылками. Нужно создать внешний контейнер, четыре треугольника, которые будут собираться в квадрат, и один внутренний контейнер с шестью элементами – четыре пустых и два с контентом. Мне нравится такой порядок: верх, низ, лево, право, перед, зад.

Front content
Back content

< div class = "link" > < a href = "http://codepen.io/gabriellewee/" > < / a > < div > Front content < / div > < div > Back content < / div > < / div > < / div >

Для создания треугольных ссылок можно использовать Clippy . Для совместимости с Firefox вам также нужен SVG clip-path. Ссылки должны иметь положительное значение translateZ (быть выдвинутыми на передний план), иначе они спрячутся за кубом.

Для определения ширины, высоты и трансформаций для куба мы используем переменную со значением 12px. Чтобы отличать стороны куба, мы используем разные оттенки одного цвета для симуляции освещения. Задняя сторона полностью белая.

Мы слегка повернули куб, чтобы вы могли посмотреть, что все стороны правильно расположены. Если посмотреть на transform, видно, что все стороны куба имеют отрицательное значение translateZ. То есть все стороны кроме передней находятся на заднем плане.

Природа 3D трансформаций такова, что если не передвинуть весь куб вперед, то часть его может быть отрезана задним фоном. Можете передвинуть куб вперед, чтобы у вас не было этой проблемы. Так как у меня уже был куб, я почти его не трогал. Пишите в комментариях, если у вас возникли сложности с созданием куба.

Эффект hover

Далее необходимо добавить поворот по наведению курсора. Эффект можно стилизовать как угодно, но самый реалистичный метод, который я нашел, привязан к мыши. Если мышь заходит на куб слева, куб должен повернуться слева направо. Все повороты должны быть 180deg/0.5turn или отрицательные эквиваленты. Также добавим transition, чтобы куб вращался правильно.

Полировка

Нужно отполировать две вещи:

Нижний треугольник переворачивает задний текст вверх ногами.

Hover слишком чувствительный: переход между треугольниками вызывает лишние повороты.

С текстом самый простой способ – повернуть заднюю сторону вправо без плавных переходов до основного поворота. По каким-то причинам изменение нижнего треугольника затрагивает и верхний. Поэтому нужно добавить дополнительный поворот для обоих hover эффектов.

Чувствительность hover эффектов пофиксить было сложнее. Решение заключается в том, чтобы текущая ссылка занимала все пространство трех других ссылок (полная ширина/высота, удаляем clip-path, двигаем вперед), но тогда пропадает интересный угловой эффект (когда быстро проводишь мышью по кривой над кубом). В конце концов, я решил проблему – я поставил задержку на transition так, чтобы фикс не срабатывал, если курсор на кубе не задержался более секунды. Задержка не убирает все проблемы, но смягчает большую часть.

Результат

Заключение

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

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

Три грани сайтостроения

С формальной точки зрения есть три основных компонента (в разных синтаксических обликах), которые составляют сайт: PHP-код, JavaScript-код и описания стилей CSS. Абсолютно не важно, как именуется и какой версии используется тот или иной компонент, какая версия HTML разметки используется и какая версия браузера стоит. Совместимость нынче не в почете, потому в каждый момент времени актуально: что закодировано и что из того, что закодировано, может быть отображено и исполнено .

Если раньше за идеи бились языки, то сегодня воевать по-пустому больше нравится производителям стандартов в сфере интернет-технологий и браузеров.

Личное и общественное

Средств, посредством которых доступен Интернет, много (компьютеры, ноутбуки, планшеты, смартфоны), браузеров тоже предостаточно. Нет никакой гарантии, что отдельно взятое устройство отобразит сайт в том виде, в котором его создал разработчик. Не всегда усилия последнего достигают цели и обеспечивают веб-дизайн единой многоликостью, то есть единством отображения сущности, где бы она не открывалась посетителю.

Разделяя личное и общественное, используя в последнем только то, что работает, можно достичь заметных успехов в дизайне. Красота, художественный момент и веб-дизайн - удел соответствующих специалистов и талантов. CSS - это код, хотя и весьма своеобразный. Его забота описать стили (варианты отображения информации). С появлением мобильных устройств CSS подгрузили реальным кодированием в виде медиа-запросов. Так что вариант повторного брака между дизайном и кодом - это не такая уж нереальность, как могло показаться всего пару лет назад.

Разработчик, занимаясь разработкой CSS-стилей, опирается на свой личный проверенный опыт и на те конструкции CSS, которые работают на большинстве браузеров, удовлетворяют большинство посетителей сайта. Следует максимально использовать первое и минимально второе, тогда гораздо больше шансов получить результат, работающий практически всегда и везде.

Первое правило: на стандарт надейся, но и сам не плошай

CSS:hover - это когда мышка «зашла» на элемент страницы. Когда мышка кликнула на элементе, он становится активным, но когда курсор уходит в сторону, он опять может измениться и показать себя в активном состоянии. “:hover”, “active” и “visited” - самые востребованные псевдоклассы при описании стилей.

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

background-color: green;

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



Второе правило: доверяя стандартам, ориентируйся на свой код

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

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

Есть существенная разница и:hover здесь срабатывает вовсе не так, как хотелось бы. Без кода здесь не обойтись, а использование медиазапросов решает не все вопросы.



Совместимость - слишком дорогое удовольствие в современном информационном мире, поэтому, чтобы обеспечить надлежащий функционал сайту в пределах установленных требований к веб-дизайну и реализации функционала, предпочтительно ориентироваться на минимально необходимые варианты использования: CSS hover, CSS hover focus, CSS hover active (visited). Чем больше код (как внутри браузера, так и на сервере,) контролирует веб-дизайн, тем лучше. Программа - это контроль, лучше когда этот контроль не сдается на откуп действующим стандартам, от которых часто не знаешь чего ждать.



Кнопки и другие элементы страницы

Button hover CSS - чудесное решение, но по большому счету каждый элемент страницы есть «кнопка». Сайт должен быть прежде всего живым и если в коде это не заложено, если задача создать сайт, который развивается адекватно области применения и действует с учетом поведения посетителя, то как минимум средствами CSS-стилей можно придать живость элементам страницы.



Использовать hover-эффекты удобно. С их помощью можно легко придать страницам живость, но код не ведает что делает мышка на экране, если в нем нет возможности отслеживать ее движение. С этой точки зрения, то есть когда код контролирует движение мышки (= движение пальца на смартфоне), он может самостоятельно подсвечивать элемент или преобразовывать его. Это не имеет никакого отношения к псевдоклассам, но дает полный контроль кода над внешним обликом страницы, позволяет адекватно отображать ее на различных устройствах в различных браузерах.

Подводные камни в таблицах стилей

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

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

Использование AJAX, когда нет необходимости вновь генерировать страницу чтобы отобразить реакцию на действие посетителя, а достаточно изменить ее элемент или несколько элементов добавляет немного «перца». «Дружба» кодов - того что уже в браузере (JavaScript) и того что на сервере (PHP) - удел автора (программиста) сайта.



От того, как будет исполнен алгоритм этого взаимодействия, существенно зависит не только отображение на странице ее элементов, но и их дальнейшее восприятие кодом. Проще говоря, псевдоклассы (в частности) очень хороши для статики, вроде как для парусной яхты в чистом море при легком ветре - все очевидно, доступно и управляемо. Ежели погода изменится, или когда ветер усилится, или посетитель вызовет непредвиденную ситуацию, можно быстро налететь на риф и потерять посетителя.

Стандарт и его эмуляция

Hover может быть эмулировано посредством JavaScript, путем использования событий onmouseover и onmouseout. Часто этим все и заканчивается. С позиций здравого смысла, когда речь идет о создании реально работающего сайта, лучше держать управление в своих руках, чем дарить его на откуп мифическим стандартам, которые меняются вне воли и желания разработчика.

Иногда можно прочитать что-то вроде «данная возможность доступна даже в IE», но чаще можно прочитать о том, какие описания стилей воспринимаются тем или иным браузером. Значительно реже можно узнать про то, как отличается JavaScript в тех или иных браузерах.



Оценивая накопленный опыт, восторгаясь возможностями "Хрома" и "Оперы", критикуя медлительность и инертность браузера от производителя (незабвенного, дорогого сердцу всякого программиста IE от "Майкрософт": «Старый добрый Internet Explorer не ругал только ленивый. Или тот, кто на компьютере умеет только играть в "Косынку"», - цитата неизвестного интернет-автора), следует придерживаться золотой середины: использовать то что работает везде и всегда.

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

Эмуляция и контроль

Раньше, когда программирование становилось на ноги, принято было слушать старших и писать правильно. Нынче слишком много старших, слишком быстро все меняется, и, если слушать всех, то времени не хватит даже на очень простую работу, на минимально функциональный сайт.

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