Создание 3d-блоков

  1. .block {
  2.     background: linear-gradient(-225deg, #d2c1af, #b3a79a);  
  3.     border:3px solid #a09488;
  4.     border-top-color:#d2c1af;
  5.     border-left-color:#d2c1af;
  6.     border-radius:3px;
  7.               box-shadow: 5px 5px 7px #474441;
  8. }
И так, наша задача сделать блок, который бы выглядел как 3д-объект.
Разберем код:
background: linear-gradient(-225deg, #d2c1af, #b3a79a); - это создание градиента на фон, при этом ось градиента находится под углом, в данном случае значение -225deg отвечает за начало градиента в верхнем лвеом углу. Второй параметр - это начальный цвет, третий - конечный.
border:3px solid #a09488; - рамка для всех сторон. Ну тут все ясно, но главное чтобы цвет был немного светлее чем конечный цвет градиента. По сути это будет цвет для нижней и правой границ рамки.
border-top-color:#d2c1af; border-left-color:#d2c1af; -меняем цвета верхней и левой границ на начальный цвет градиента.
box-shadow: 5px 5px 7px #474441; - тень. Отступаем на пять пикселей от начальной позиции по х и у, 7рх - увеличение ширины тени(начальная ширина равна размерам объекта). Третий - цвет тени

Реклама

Мы в соцсетях

tw tg yt gt