• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание тени Box-shadow для блоков на CSS (Создание тени к элементу дизайна при помощи CSS)
Создание тени Box-shadow для блоков на CSS
Kosten
Дата: Суббота, 14.07.2018, 18:18 | Сообщение 1
Администраторы
Сообщений:18249
Награды: 55


Многих особенно впечатляет раздел о тенях, который используется для определения разных слоев и, следовательно, создания глубины. Материальный дизайн, имеет свойства, которое при использовании материала тени никогда не вычисляются приблизительно. а точнее расположенная в трехмерном пространстве.

Высота представления, представленного свойством, на какую высоту буде выставлена тень. Все это можно разложить, но здесь когда поставили, то просто делаем поровну, чтоб тень смотрелось корректно и реально вписывалась в элемент, которому закреплена. Как пример, то подсветка клавиш создает направленные тени, а окружающий свет создает мягкие тени со всех сторон.

Так смотрится после как все пропищите, это код и стили.



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);


Демонстрация
Прикрепления: 1947652.png(6.0 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 15.07.2018, 00:12 | Сообщение 2
Администраторы
Сообщений:18249
Награды: 55


Давайте рассмотрим несколько самых актуальных вариантов оформление блоков при помощи стиля 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);
}
Прикрепления: 1017917.png(2.5 Kb) · 4683586.png(3.7 Kb) · 8090525.png(8.1 Kb) · 8733357.png(2.4 Kb) · 6670955.png(4.7 Kb) · 0115573.png(5.5 Kb) · 0863334.png(5.3 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание тени Box-shadow для блоков на CSS (Создание тени к элементу дизайна при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: