фильтры цвета с прозрачностью.
Ребят, подскажите плиз:
"Кнопки при наведении подсвечиваются фильтром rgba 255 255 255 0.2, в момент нажатия затемняться 0 0 0 0.2." Как это реализовать? Сама кнопка - простой див с заданным цветом фона. Понимаю что меня нужно не цвет фона, но мне кроме как добавления элемента поверх ничего в голову не лезет( |
Цитата:
:active - нажатие |
Decode, не сможет он этого без "препроцессора". Ибо в данном случае :hover, :active будут заменять цвет, а не накладывать.
|
Но, как вариант - можно извратиться с псевдоэлементами ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 50px;
background-color: #321;
}
div:after{
display: block;
width: 100%;
height: 100%;
content: ' ';
}
div:hover::after{
background-color: rgba(255,255,255,0.5);
}
div:active::after{
background-color: rgba(000,000,000,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
Ааа, клаааас! спасибо) я столько раз уже встречал эти псевдоклассы before и after, но никак не могу в них до конца разобраться) Ваш вариант я тоже пробовал, только он у меня выглядел так:
div{
width: 100px;
height: 50px;
background-color: #321;
}
div:hover::after{
background-color: rgba(255,255,255,0.5);
}
div:active::after{
background-color: rgba(000,000,000,0.5);
}
Само собой ничего не сработало, а я и не понял что after нужно было перед этим тоже определить) спасибо огромное) |
Siend, ничего не нужно определять, почитайте документацию по "псевдоэлементам".
|
ну эт я не правильно выразился. Ваш код отличается от моего тем что прежде чем писать ховер:афтер, вы и для самого дива сделали афтер с указанием размером и типа display:block, под эти я и подразумевал "определять" :D
|
Siend, я вынес это отдельно, чтоб не дублировать, т.е так тоже будет работать:
div:hover::after{
display: block;
width: 100%;
height: 100%;
content: ' ';
background-color: rgba(255,255,255,0.5);
}
div:active::after{
display: block;
width: 100%;
height: 100%;
content: ' ';
background-color: rgba(000,000,000,0.5);
}
|
А, теперь понял что вы имели ввиду) Большое спасибо)
|
| Часовой пояс GMT +3, время: 10:28. |