Вход Регистрация
CSS тень с одной стороны элемента (с использованием псевдоэлементов CSS) (оценка: 1)
Если вы хотите, чтобы тень от блока div была только с одной стороны, попробуйте этот трюк. Сначала необходимо определить блоку определенную ширину и высоту. Затем, используя псевдоэлемент CSS :after создать эффект тени от элемента. Вот пример использования тени только снизу блока:


  1. .box-shadow {
  2. background-color: #FF8020;
  3. width: 160px;
  4. height: 90px;
  5. margin-top: -45px;
  6. margin-left: -80px;
  7. position: absolute;
  8. top: 50%;
  9. left: 50%;
  10. }
  11. .box-shadow:after {
  12. content: "";
  13. width: 150px;
  14. height: 1px;
  15. margin-top: 88px;
  16. margin-left: -75px;
  17. display: block;
  18. position: absolute;
  19. left: 50%;
  20. z-index: -1;
  21. -webkit-box-shadow: 0px 0px 8px 2px #000000;
  22. -moz-box-shadow: 0px 0px 8px 2px #000000;
  23. box-shadow: 0px 0px 8px 2px #000000;
  24. }
Автор: * HELL / 20.10.2015 в 14:16
Просмотров: 545
ТОП блогов | поиск | все блоги
Онлайн: 0
Реклама