| Kosten | Суббота, 14 Июля 2018, 18:18 | Сообщение 1 |
| Многих особенно впечатляет раздел о тенях, который используется для определения разных слоев и, следовательно, создания глубины. Материальный дизайн, имеет свойства, которое при использовании материала тени никогда не вычисляются приблизительно. а точнее расположенная в трехмерном пространстве.
Высота представления, представленного свойством, на какую высоту буде выставлена тень. Все это можно разложить, но здесь когда поставили, то просто делаем поровну, чтоб тень смотрелось корректно и реально вписывалась в элемент, которому закреплена. Как пример, то подсветка клавиш создает направленные тени, а окружающий свет создает мягкие тени со всех сторон.
Так смотрится после как все пропищите, это код и стили.
HTML
Код <p class="reasure-gamers"><span></span></p>
CSS
Код .reasure-gamers {
background: #dcd5d5;
text-align: center;
}
.reasure-gamers span {
background: #f5efef;
display: inline-block;
width: 195px;
height: 93px;
margin: 50px;
box-shadow: 0 14px 28px rgba(19, 18, 18, 0.34), 0 10px 10px rgba(21, 20, 20, 0.24);
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 15 Июля 2018, 00:12 | Сообщение 2 |
|
| Давайте рассмотрим несколько самых актуальных вариантов оформление блоков при помощи стиля box-shadow. Где изначально первый материал будет идти с Demo страницей, и под классом katequsic - который как раз отвечает за структуру тени, точнее где она находится и какое построение фигуры будет. Что вам только останется выбрать один из многих вариантов и прописать стили, что будут представлены с изображением.
Как можно заметить, что в коде присутствует еще один класс makesatka, который отвечает за саму структуру элемента, где и будет прописывать тень. Что после как поставите, вы сами можете уменьшить по размеру, это только качается самого каркаса, эффект тени идет совершенно под другой стилистике, что выше указана.
1 Вариант: Стандартная маленькая тень
HTML
Код <div class="makesatka katequsic"></div>
CSS
Код .katequsic {
box-shadow: 0 2px 5px rgba(21, 20, 20, 0.47), 0 4px 6px rgba(16, 16, 16, 0.28);
}
Стиль каркаса CSS
Код .makesatka{
width: 30%;
margin: 35px auto;
padding: 38px;
background: #fbfbfb;
text-align: center;
}
Демонстрация
2. Вторая версия: Стандартная средняя тень
Это тень, которая больше всего можно заметить на любом дизайн, так и назовем ее, стандартной. Где идет мягкая полоса, которая растворяется на самом фоне, все настройка произведена на светлую палитру.
Код .katequsic {
box-shadow: 0 4px 12px rgba(16, 16, 16, 0.18), 0 16px 20px rgba(16, 16, 16, 0.17);
}
3. Третья версия: Стандартная большая тень
Все также по стандарту, только немного больше тени, где она еще идет в начале слишком темная, и визуально смотрится, что ее больше от второго варианта, но это все выставить в стилях. Здесь заметна вернее горизонтальноя полоса, так как больше теней изначально добавили и расширили по параметрам.
Код .katequsic {
box-shadow: 0 8px 26px rgba(19, 18, 18, 0.48), 0 28px 30px rgba(19, 18, 18, 0.35);
}
4.Четвертая версия: Тень внизу:
Здесь все просто, задаем тень только в низ, по сторонам и вверх выставляем ноль, чтоб там не чего не было. Это можно увидет на разных блоках, где такая вариация по теневому стилю все больше применяется, все зависит от дизайн.
Код .katequsic {
box-shadow: 0 20px 15px -15px rgba(23, 22, 22, 0.69);
}
5. Пятая версия: Эффект изогнутого блока с тенью внизу
Этот блок немного изогнут. хотя визуально это так предоставляется, все это делает тень, что в самом низу создана, где можно ее распылить, но здесь нужно смотреть по дизайн, где этот блок ставить или какому элементу будет закреплен.
Код .katequsic {
position: relative;
box-shadow: 0px 4px 14px rgba(25, 23, 23, 0.65), 0 0 30px rgba(31, 30, 30, 0.12) inset;
}
.shadow:before, .shadow:after
{
content: "";
position: absolute;
z-index: -1;
box-shadow: 0 0 30px rgba(16, 16, 16, 0.44);
top: 50%;
bottom: 0;
left: 27px;
right: 27px;
border-radius:25%;
}
6. Шестая версия: Эффект изогнутого блока с тенью вверху и внизу
Здесь идет аналогично пятой версий, только если там идет стилистика тени в самом низу. То здесь как можно заметить по вверх и по низу, что можно где то больше добавить или наоборот убрать, по умолчанию идут идентичные.
Код .katequsic {
position: relative;
box-shadow: 0px 2px 4px rgba(29, 28, 28, 0.58), 0 0 30px rgba(51, 48, 48, 0.18) inset;
}
.shadow:before, .shadow:after
{
content: "";
position: absolute;
z-index: -1;
box-shadow: 0 0 30px rgba(51, 48, 48, 0.18);
top: 10px;
bottom: 0;
left: 29px;
right: 29px;
border-radius:15%;
}
7. Седьмой версия: Блок с приподнятыми уголками
Вероятно этот метод подачи мягкой тени самый распространенный, так как его можно увидеть на многих сайтах, что главное они по разной тематике. Что одно можно сказать, что в большинстве, такой формат устанавливают для красоты или чтоб как можно больше его заметили.
Код .katequsic {
position: relative;
box-shadow: 0 1px 4px rgba(27, 26, 26, 0.33), 0 0 30px rgba(14, 14, 14, 0.12) inset;
}
.shadow:before,
.shadow:after {
content:"";
position:absolute;
z-index:-1;
bottom:17px;
left:12px;
width:57%;
height:17%;
max-width:275px;
box-shadow:0 15px 9px rgba(14, 14, 14, 0.12);
transform:rotate(-3deg);
}
.shadow:after {
right:10px;
left:auto;
transform:rotate(3deg);
} | | Страна: (RU) |
| |
