ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивая тень для блока при помощи CSS3

Красивая тень для блока при помощи CSS3

Здесь создаем блок, где при помощи свойство box-shadow выставляем этому элементу тени, которые выстроены так, что получилась модель в 3D. Вероятно пригодится многим, особенно кто выстраивает дизайн на сайте. Так как такое табло можно применить на многих направлениях. Это сделать как новостной блок, где выставить главную новость, с кратким описанием, и прописать ссылка, примерно такую, как читаем далее. Где ранее можно такой вид можно было создать при помощи фотошоп. Но с приходом каскадной таблицы CSS3, то у веб мастера открылось очень много возможностей выстраивать различный дизайн, с помощью стилистики.

Это безусловно упрощает работу, и также отлично можно украсить в информационном направлений свой сайт. Также не исключаю, что на отдельной страницы, как элемент дизайна этот элемент можно поставить. Примеров очень много на него, но давайте рассмотрим один из них, который по виртуальности привлекает к себе внимание, что будет хорошим аспектом для установки на интернет портале. Здесь используется полупрозрачный цвет, как rgba, что создает приятный эффект теней. Также в стилях есть все для редактирования, что можно тень перекинуть как вам нужно, или сделать ее светлее в оттенке цвета.

HTML

Код

<div class="melopsatun">
<div class="samilpoga">

<span style="color: #23506F;"><span style="font-family:'Arial'"><span style="font-size:15pt"><b>ZorNet.Ru - портал вебмастера</b></span></span></span>
<hr>
<p> Здесь идет описание.</p>
<hr>
</div>
</div>

CSS

Код

.melopsatun {
  position: relative;
  width: 395px;
  height: 195px;
  background-color: #d8d3d3;
  box-shadow: 0 1px 1px rgba(230, 230, 230, 0.71), 0 0 5px rgba(132, 128, 128, 0.76) inset;
  border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
  margin: 0 auto;
}

.melopsatun:before {
  position: absolute;
  left: 91px;
  bottom: 2px;
  width: 100%;
  height: 41%;
  border-radius: 10% 0 0 0;
  z-index: -1;
  content: "";
  box-shadow: -86px 0 17px rgba(31, 30, 30, 0.46);
  -webkit-transform: skew(36deg);
  -moz-transform: skew(36deg);
  -ms-transform: skew(36deg);
  -o-transform: skew(36deg);
  transform: skew(36deg);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

.samilpoga {
text-align:center;
position:relative;
top:17px;
  padding: 0px 5px 0 5px;
}

У свойство box-shadow есть возможность добавить элементам одну или сразу несколько теней.

Демонстрация

03 Сентября 2018 Просмотров: 1389 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0