@Roddrigo

Что это за эффект css у блока?

Добрый день всем. Я человек который относительно недавно стал изучать веб программирование, и вопрос скорее связан с моей неопытностью, нежели глупостью. Подскажите пожалуйста, как можно узнать что это за эффект на блоках на сайте (https://studia-remontov.ru) в разделе цены. При наведении мыши блок осветляется а снизу под блоком появляется типа проекции. Пробовал реализовать через добавление блоку тени повторяющейся, но что-то хрень какая-то вышла... Буду крайне признателен за помощь.
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 5
Punkie
@Punkie Куратор тега CSS
Немножечко вордпрессирую
из devtools хрома:

.border {
    transition: .5s;
}
.border:hover {
    box-shadow: 0 40px 0 -30px #cecece, 0 80px 0 -60px #a7a7a7;
}
Ответ написан
@frees2
Фиксация (нажатия) ссылки, кнопки как улучшить?
Писал же, спрашивал, так игнорируют, сложность почему то поменяли со сложной на среднюю...
Работает во всех браузерах, тени тоже работают.
Можно поиграться с тенями и фоном ( и без блока, можно с блоком)
button,[role="button"] {cursor: pointer;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"] {  background-color:  #CAE8CA; transition-property: background-color;transition-duration: 0.4s;}

:active, :hover, :focus { outline: 0; outline-offset: 0;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"]:focus  {     background-color:   rgba(204,204,255, 0.9);}
[role="button"]:active { background-color: #bbb;}
Ответ написан
@Fl_SparkyBooMan
Советую прочитать о псевдо-классах в htmlbook.ru .Этот эффект создается когда, к элементу например div или в основном a присваивается в стилях CSS псевдо-класс ":hover" и выглядит это так:
HTML
Ссылка с классом link
CSS
.link:hover { //присваивает стили при наведении мыши
color: #ccc; //меняет цвет текста
border-bottom: 1px solid #000; //меняет подчеркивание, в частности его цвет и толщину
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы