Создание 3d-блоков
- .block {
- background: linear-gradient(-225deg, #d2c1af, #b3a79a);
- border:3px solid #a09488;
- border-top-color:#d2c1af;
- border-left-color:#d2c1af;
- border-radius:3px;
- box-shadow: 5px 5px 7px #474441;
- }
И так, наша задача сделать блок, который бы выглядел как 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рх - увеличение ширины тени(начальная ширина равна размерам объекта). Третий - цвет тени
Разберем код:
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рх - увеличение ширины тени(начальная ширина равна размерам объекта). Третий - цвет тени