Эффект изменения прозрачности картинки при наведении мыши
Для того, чтобы оживить контент сайта, придать ему некоторую интерактивность, можно использовать эффект прозрачности картинки при наведении мыши.
Сделать это очень просто средствами CSS файла.
Код CSS очень короткий, без всяких премудростей, но эффективный.
Работает в том случае, если картинка является ссылкой.
Ниже приведены два варианта:
1. Полупрозрачная картинка проявляется при наведении.
2. Картинка становится полупрозрачной при наведении мыши.
Полупрозрачная картинка при наведении проявляется (img-link):
.img-link img { opacity:0.6;}
.img-link img:hover { opacity:1; }
Картинка приобретает прозрачность при наведении (img-link-2):
.img-link-2 img { opacity:1;}
.img-link-2 img:hover { opacity:0.6; }
Можно придать этому эффекту плавности (замедление) при выполнении, используя: transition:Xs, где X — продолжительность (скорость) эффекта от 0.
Если собрать все варианты в одно целое, то получиться короткий кусок кода:
.img-link img { opacity:0.6; transition:0.5s;}
.img-link img:hover { opacity:1; }
.img-link-2 img { opacity:1; transition:0.5s; }
.img-link-2 img:hover { opacity:0.6; }
opacity — степень прозрачности
transition — эффект перехода
Прописанные в CSS файле стили необходимо присвоить ссылке, примеры:
<a href=»#»><img src=»https://jjji.ru/300×200″ alt=»Картинка проявляется»></a>
или
<a href=»#»><img src=»https://jjji.ru/400×150″ alt=»Картинка становится прозрачной»></a>
Для теста картинок используйте сервер онлайн картинок: JJJi.ru
Короткие адреса картинок типа:
https://jjji.ru/400×225
https://jjji.ru/800×450 — пример
https://jjji.ru/1920×1080
В зависимости от желания, используйте один из 2 вариантов: img-link или img-link-2.
3 до 0.7Приведённый код работает, если картинка является ссылкой, т.е. обёрнута фрагментами кода:
<a href=»#»>…</a>
прозрачность css
W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.
код CSS
.img1 { opacity: 0.2; } |
код HTML
<html> <head> <style type=text/css> . </style> </head> <body> <img src=»встовляем картинку»> <img src=»»> <img src=»»> </body> </html> |
img1 { opacity: 0.2; }Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.
Браузеры поддерживающие CSS3 opacityПонимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.
Pointer-events
Представим ситуацию, когда у нас один html-элемент расположен поверх другого.
Но нам нужно, чтобы нижний элемент был кликабельным или реагировал на hover.
В модуле «CSS4-UI» есть такое свойство — pointer-events.
pointer-events: none — элемент перестанет реагировать на hover, click и другие события мыши. Он станет «прозрачным» для взаимодействия, а hover и click будут передаваться элементу, лежащему под ним.
pointer-events: auto — (значение по-умолчанию) включает стандартное поведение элемента.
Изначально свойство «pointer-events» было введено для SVG и должно было стать частью CSS3, но было перенесено в спецификацию CSS4. Кроме «none» и «auto» есть еще несколько значений, но они применимы только к SVG, и мы не будем их рассматривать.
Несмотря на то, что свойство относится к CSS4, pointer-events поддерживается уже большим количеством браузеров и довольно давно. Не работает в IE ниже 11 версии и в Opera Presto. А значит, его можно осторожно использовать для улучшения юзабилити в рамках прогрессивного улучшения.
Проверить, поддерживается ли это свойство браузером, можно с помощью специального теста для Modernizer.
Пример 1
Рассмотрим на практике.
See the Pen 2012-pointer-events-1 by Paul Radzkov (@paulradzkov) on CodePen.В первом примере для белого градиента, накрывающего текст, pointer-events установлен в none. Текст легко выделяется мышью сквозь градиент. Даже курсор меняет свою форму со стрелки на выделение текста.
Во втором примере pointer-events не задан, маска градиента не даёт выделить текст, курсор имеет форму стрелки, как для нетекстовых элементов.
Пример 2
Задача: сделать так, чтобы ссылка в меню становилась некликабельной, если она ведет на эту же страницу.
See the Pen 2012-pointer-events-demo-2 by Paul Radzkov (@paulradzkov) on CodePen.
Обычно в CMS уже есть какой-либо класс для индикации текущей страницы в меню. Допишем ему pointer-events:
.demo-menu a.current {
background: #AAA;
color: #333;
pointer-events: none;
}
| Метки: |
IE и поведение ссылок при наведении
В этой заметке я опишу один момент, который довольно часто можно встретить в сложной вёрстке с CSS, но который редко проявляет себя или на который редко обращают внимание.
Этот момент проявляет себя в случае когда в IE внутри ссылки есть блок со свойством hasLayout, тогда можно заметить следующее:
клик по картинке, расположенной в таком блоке, не вызывает переход по ссылке;
при правом клике по блоку с
hasLayoutне появляется контекстное меню ссылки (т.е. IE для контекстного меню считает этот блок просто контентом, что также можно заметить по курсору над таким блоком).
Кроме того, если внутри ссылки с прозрачным (transparent) фоном есть какой-либо элемент, а мы хотим поменять его свойства, скажем, через такой селектор:
A:hover EL {…}, то, при наведении на этот элемент, селектор применяться не будет.
Собственно, такое поведение селектора исправляется просто — необходимо прописать фон для ссылки, в таком случае всё встанет на свои места (или же можно применить word-spacing:0, что тоже помогает, спасибо Вадиму Макишвили за этот метод.
Однако, в случае с отсутствием контекстного меню и картинкой всё сложнее.
Основной способ проявить в таком случае контекстное меню выполняется в два шага:
Необходимо применить к ссылке
hasLayoutи прозрачный фон (скажем, прозрачный однопиксельный гиф или жеbackground: url(about:blank)— такой фон, в дальнейшем, я буду называть «явный прозрачный фон»)Самому блоку с
hasLayoutнеобходимо прописать такой же прозрачный фон и отрицательный
Если всё сделать правильно — очень вероятно, что всё заработает. Очень важно, чтобы сама ссылка была с прозрачным фоном (иначе блок с з-индексом не будет видно) и без заданного позиционирования (position:static), иначе опять же не сработает.
К сожалению, более корректного и простого фикса я не нашёл, поэтому в данный момент, когда у нас есть ссылка, которую надо «тяжело» оформить, желательно все дополнительные элементы класть не внутрь ссылки, а обрамлять её ими. Кроме того, полезно всегда быть уверенным, что ссылка не спозиционирована, т.е., по возможности, позиционировать обрамляющие её элементы. Желательно всегда таким ссылкам прописывать hasLayout и явный прозрачный фон, в таком случае можно минимизировать возможные проблемы как с контекстным меню, так и с селекторами дочерних элементов. Надо сказать, что явный прозрачный фон у ссылок также может помочь против некоторых багов у Оперы, возможно в будущем я опишу их.
Ну, а вот и несколько примеров — в которых можно посмотреть поведение ссылок в IE и почитать код.
Опубликовано с метками: #Practical #CSS #Bugs #Outdated
CSS Прозрачность / прозрачность изображения
Свойство opacity определяет непрозрачность / прозрачность элемента.
Прозрачное изображение
Свойство непрозрачности может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:
непрозрачность 0,2
непрозрачность 0,5
непрозрачность 1
(по умолчанию)
Прозрачный эффект наведения
Свойство непрозрачности часто используется вместе со свойством : hover .
селектор для изменения непрозрачности при наведении указателя мыши:
Объяснение примера
Первый блок CSS похож на код в Примере 1.Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. CSS для этого — непрозрачность: 1; .
Когда указатель мыши отодвинется от изображения, изображение снова станет прозрачным.
Пример обратного эффекта наведения:
Прозрачная коробка
При использовании свойства непрозрачности для добавления прозрачности фону элемента все его дочерние элементы
наследуют ту же прозрачность.
Это может затруднить чтение текста внутри полностью прозрачного элемента:
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA . В следующем примере устанавливается непрозрачность цвета фона, а не текста:
Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB, вы можете использовать значение цвета RGB с альфа-каналом (RGBA), который определяет непрозрачность цвета.
Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.
Пример
div {
фон: rgba (76, 175, 80, 0.3) / * Зеленый фон с 30%
непрозрачность * /
}
Текст в прозрачной рамке
Это текст, помещенный в прозрачную рамку.
Пример
div.background {
фон: url (klematis.jpg) повторять;
граница: сплошной черный цвет 2px;
}
div.transbox {
маржа: 30 пикселей;
цвет фона: #ffffff;
граница: сплошной черный 1px;
непрозрачность: 0,6;
}
div.transbox p {
маржа: 5%;
font-weight: жирный;
цвет: # 000000;
}
Это текст, помещенный в прозрачную рамку.