Повернутый паралель тени кнопки на ось X - PullRequest
Новая
       21

Повернутый паралель тени кнопки на ось X

0 голосов
/ 06 июня 2018

Я создал анимированную повернутую кнопку и хотел бы, чтобы у нее была тень, параллельная оси X.Теперь тени нет, у вас есть идеи, как это сделать?Благодарю вас.Это CSS существующей кнопки и ссылка на кодовую панель с «живым примером». 

.btnMail{
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
    box-shadow: 0 8px 6px -6px black;
}

https://codepen.io/hubkubas/pen/dmJjWB

1 Ответ

0 голосов
/ 06 июня 2018

Исходя из понимания вашего вопроса, вы можете получить причудливые тени в 3D-виде или пользовательские тени глубины, применяя свойство shadow-box к псевдоэлементам, которыми вы затем можете манипулировать, чтобы получить нужные тени.

Вот быстрое исправление, которое, вероятно, показывает тип тени, которую вы хотите: 

/* btn */

.btnMail{
  width: 65px;
  height: 60px;
  display: inline-block;
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
}


.btnMail:hover {
  transition: 0.30s;
  transform: rotate(0deg);
  box-shadow: 0px 8px 6px -6px black;
  background-color: rgba(255, 0, 54, 0.8);
}

.btnMail:active {
  box-shadow: 0 6px 6px -6px black;
  transition: 0.30s;
}

#shadow{
  z-index: -111;
  width: 65px;
  height: 50px;
  position: absolute;
  top: 17px;
  left: 5px;
  box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"><a href="mailto:name@example.com"></a></i></button>
<div id="shadow">
</div>

(Примечание: я использовал отдельный тег div для тени, так как анимация, которую вы применяете к кнопке, также будет применяться к тени).

Подробнее о создании пользовательских теней можно узнать по этой ссылке .

.
...