② Примеры тени для блока

Продолжим изучение темы CSS3 - тень блока. Если пропустили прошлую статью, то вот ссылка на неё:

• ① Синтаксис свойства box-shadow

2.1. Внутренняя тень

HTML

<p class="example-shadow-1"><span></span></p>

CSS

.example-shadow-1 {
  background: #e6e3df;
  text-align: center;
}
.example-shadow-1 span {
  margin: 50px;
  height: 100px;
  width: 200px;
  display: inline-block;
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

2.2. Плоская тень с одной стороны

HTML

<p class="example-shadow-2"><a href="#btn">flat</a></p>

CSS

.example-shadow-2 {
  background: beige;
  text-align: center;
}
.example-shadow-2 a {
  display: inline-block;
  border-radius: 5px;
  padding: 15px 35px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: white;
  background: #55acee;
  box-shadow: 0 5px 0 #3C93D5;
  transition: .3s;
}
.example-shadow-2 a:hover {
  background: #6FC6FF;
}

2.3. Тень в стиле material design

HTML

<p class="example-shadow-3"><span></span></p>

CSS

.example-shadow-3 {
  background: #e8e8e8;
  text-align: center;
}
.example-shadow-3 span {
  background: white;
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Продолжение в следующей статье!