Рисуем с помощью box-shadow

Свойство box-shadow — удивительное свойство. Оно позволяет создать множество теней вокруг одного элемента. С его помощью можно рисовать как простые, так и сложные фигуры и изображения.

box-shadow-paint
Рис. 1. Принцип рисования с помощью тени блока

Как это работает? Тень дублирует размеры и форму элемента и задав смещение по горизонтали и/или вертикали, равное или большее, чем ширина или высота элемента, мы как бы сдвигаем копию элемента вправо/вниз или влево/вверх (при отрицательных значениях). С помощью отрицательного значения растяжения тень получается меньше, чем оригинальный блок.

See the Pen WGxqLX by Elena (@html5book) on CodePen.

За основу возьмём элемент span, которому добавим следующие стили:

Пример 1

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 2

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 3

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  transform: rotate(45deg);
  box-shadow: 25px -25px 0 #F3C361, -25px 25px 0 #F3C361;
}

Пример 4

span {
  display: inline-block;
  width: 20px;
  height: 5px;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 5

span {
  display: inline-block;
  width: 20px;
  height: 5px;
  background: #D13F92;
  box-shadow: 0 8px 0 #F3C361, 0 -8px 0 #F3C361;
}

Пример 6

span {
  display: inline-block;
  width: 5px;
  height: 20px;
  background: #D13F92;
  transform: rotate(45deg);
  box-shadow: 20px -20px 0 #F3C361, -20px 20px 0 #F3C361;
}

Пример 7

span {
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 8

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 0 0 0 5px #F3C361, 0 0 0 10px #D13F92, 0 0 0 15px #F3C361;
}

Пример 9

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: -20px 20px 0 #F3C361, 20px 20px 0 #F3C361, 0 40px 0 #D13F92;
}

Пример 10

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 20px -20px 0 #F3C361, -20px -20px 0 #F3C361, 20px 20px 0 #F3C361, -20px 20px 0 #F3C361;
}

Пример 11

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  border-radius: 50%;
  box-shadow: 0 0 0 5px white, 0 0 0 10px #D13F92;
}

Пример 12

span {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 
  60px 0 0 -5px rgba(209, 63, 146, .9),
  110px 0 0 -10px rgba(209, 63, 146, .7),
  150px 0 0 -15px rgba(209, 63, 146, .5),
  180px 0 0 -20px rgba(209, 63, 146, .3);
}

Пример 13

span {
  display: inline-block;
  height: 75px;
  width: 75px;
  background: #D13F92;
  border-radius: 50%;
  box-shadow: 
  100px -25px 0 -10px rgba(209, 63, 146, .9),
  180px  15px 0 -15px rgba(209, 63, 146, .7),
  260px -10px 0 -20px rgba(209, 63, 146, .5),
  340px   5px 0 -25px rgba(209, 63, 146, .3),
  400px   0px 0 -30px rgba(209, 63, 146, .1);
}

Пример 14

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #D13F92;
  box-shadow: 
  10px 10px 0 0 #F3C361, 
  20px 20px 0 0 #1C2552;
}

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

See the Pen wzWVEE by Elena (@html5book) on CodePen.

Поделиться:

Анимированные переходы

Анимированные переходы — альтернатива несложной анимации. С помощью CSS3 переходов можно изменять различные характеристики одного элемента одновременно, устанавливая задержку во времени для каждого последующего свойства, а также свою функцию перехода. Такой приём можно использовать как в состоянии :hover, так и в :focus, :checked и т.д.

Наведите на круг, чтобы увидеть анимированные переходы в действии.

See the Pen BLyojv by Elena (@html5book) on CodePen.

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

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F5F5F5;
  box-shadow: 0 0 0 5px #F8B83C, 0 0 0 10px #EB7722;
  transition: border-radius 1s linear, box-shadow 1s 1s ease-in-out, transform 1s 2s linear, background 1s 3s linear;
}
div:hover {
  border-radius: 0;
  box-shadow: 0 0 0 10px #F8B83C, 0 0 0 25px #EB7722;
  transform: scale(1.1) rotate(45deg);
  background: #DACFCB;
}

Поделиться:

Индикатор загрузки для сайта

Урок посвящён созданию оригинального индикатора загрузки для сайта с использованием простых css-фигур и анимации, базирующейся на трансформации элементов. Такой индикатор можно использовать для свадебного сайта, сайта ресторана или интернет-магазина алкогольных напитков.

Находить новые идеи не сложно. Нужно быть лишь чуточку внимательней к окружающему нас миру. И как приятно видеть привычные вещи, воссозданные на экране с помощью HTML и CSS ))

See the Pen wineshop loader by Elena Nazarova (@nazarelen) on CodePen.

wineshop
Рис. 1. Разметка индикатора загрузки для сайта

Разметка HTML

<div class="loader">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="wineglass left">
    <div class="top"></div>
  </div>
  <div class="wineglass right">
    <div class="top"></div>
  </div>
</div>

Стили CSS
Для сглаживания неровности краёв при движении добавим элементам тень такого же цвета, что и сами элементы. Напиток внутри бокала сделан в виде круга с градиентом, одна половина прозрачная, другая — цветная. Ножку и подставку бокала сместим на 1px, чтобы при движении не образовывался промежуток между элементами.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #C4D9EB;
}
.wineglass {
  height: 36px;
  position: relative;
}
.wineglass:after {
  content: ''; 
  position: absolute;
  top: 47px;
  left: 5px;
  width: 20px;
  height: 5px;
  background: white;
  box-shadow: 0 0 1px white;
}
.top {
  background: white;
  width: 30px;
  height: 36px;
  border-radius: 0 0 36px 36px;
  box-shadow: 0 0 1px white;
}
.top:before {
  content: ''; 
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(transparent 50%, #F36E3E 50%);
}
.left .top:before {
  animation: rotate2 2s linear infinite;
}
.right .top:before {
  animation: rotate1 2s linear infinite;
}
.top:after {
  content: ''; 
  position: absolute;
  top: 35px;
  left: 12px;
  width: 6px;
  height: 13px;
  background: white;
  box-shadow: 0 0 1px white;
}
.left {
  display: inline-block;
  margin-right: 10px;
  animation: rotate1 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
.right {
  display: inline-block;
  animation: rotate2 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
@keyframes rotate1{
  0% {transform: rotate(0deg);}
  50% {transform:rotate(22deg);}
}
@keyframes rotate2{
  0% {transform:rotate(0deg);}
  50% {transform:rotate(-22deg);}
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 70px;
  height: 25px;
  position: relative;
  opacity: 0;
  animation: 2s fadeInUp infinite linear 2s;
}
li {
  width: 6px;
  height: 15px;
  background: white;
  position: absolute;
  box-shadow: 0 0 1px white;
  transform-origin: bottom;
}
li:nth-child(1) {
  left: 26px;
  bottom: 5px;
  transform: rotate(-35deg);
}
li:nth-child(2) {
  left: 34px;
  bottom: 8px;
}
li:nth-child(3) {
  left: 42px;
  bottom: 5px;
  transform: rotate(35deg);
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  33% {
    opacity: 1;
    transform: scaleY(1.4);
  }
  64% {
     opacity: .1;
     transform: scaleY(1);
  }
  100% { 
    opacity: 0;
    transform: scaleY(.3);
  }
}

Поделиться:

Красивые заголовки

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

Заменив заголовки-изображения на заголовки, декорированные с помощью CSS-стилей, можно добиться большей гибкости в оптимизации сайта для индексирования текстового содержимого поисковыми роботами.

Для работы потребуются шрифты от Google Fonts. Приятного просмотра и вдохновения!

Пример 1

ART SHOW

<div class="one"><h1>ART SHOW</h1></div>
.one {
  background: #FFF4ED;
  padding: 50px 20px;
  text-align: center;
}
.one h1 {
  font-family: 'Righteous', cursive;
  position: relative;
  color: #3CA1D9; 
  display: inline-block;
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-size: 3em;
  padding: 11px 60px;
  margin: 0; 
  line-height: 1;
}
.one h1:before, .one h1:after {
  content: ""; 
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  border-left: 2px solid;
  border-right: 2px solid;
  background: repeating-linear-gradient(180deg, transparent, transparent 2px, #3CA1D9 2px, #3CA1D9 4px);
}
.one h1:before {left: 0;}
.one h1:after {right: 0;}
@media (max-width: 420px) {
  .one h1 {font-size: 2em;}
}

Пример 2

Burger Heroes

<div class="two"><h1>Burger Heroes</h1></div>
.two {
  background: #E4E5D2;
  padding: 50px 20px;
  text-align: center;
} 
.two h1 {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: #5C2610;
  font-size: 3em;
  font-weight: normal;
  line-height: 1;
  padding: 10px 0;
  margin: 0;
  display: inline-block;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 200%;
  border-radius: 50%/30%;
  border: 6px solid #5C2610;
  border-left-color: transparent;
  border-right-color: transparent;
}
@media (max-width: 420px) {
  .two h1 {font-size: 2em;}
}

Пример 3

Новые поступления

<div class="three"><h1>Новые поступления</h1></div>
.three {
  background: #FCF2E5;
  padding: 50px 20px;
  text-align: center;
} 
.three h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #FCF2E5;
  background: #90806A;
  font-size: 2.5em;
  font-weight: normal;
  padding: 10px 40px;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.three h1:before {
  content: ""; 
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: -15px;
  background: #90806A;
}
.three h1:after {
  content: ""; 
  position: absolute;
  height: 0;
  width: 80%;
  border-top: 10px solid #90806A;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
}
@media (max-width: 500px) {
  .three h1 {font-size: 1.8em;}
}
@media (max-width: 400px) {
  .three h1 {
    font-size: 1.5em;
    padding: 10px 30px;
  }
}

Пример 4

Brand desight

<div class="four"><h1>Brand desight</h1></div>
.four {
  background: #F4F7EE;
  padding: 50px 20px;
  text-align: center;
} 
.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #C44737;
  font-size: 50px;
  font-weight: normal;
  padding: 8px 20px 7px 20px;
  border-top: 4px solid;
  border-left: 4px solid;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.four h1:before {
  content: ""; 
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  left: -28px;
  border: 4px solid #C44737;
  box-sizing: border-box;
}
@media (max-width: 450px) {
  .four h1 {font-size: 36px;}
  .four h1:before {
    width: 20px;
    height: 20px;
    top: -20px;
    left: -20px;
  }
}

Пример 5

КУРИНЫЙ РЕЦЕПТ

<div class="five"><h1>КУРИНЫЙ РЕЦЕПТ</h1></div>
.five {
  background: #F7F4ED;
  padding: 50px 20px 50px 170px;
  text-align: center;
} 
.five h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  position: relative;
  color: #587493;
  font-size: 2.5em;
  font-weight: normal;
  display: inline-block;
  margin: 0;
  line-height: 1;
  padding: 8px 20px 8px 2px;
  border-top: 4px solid;
}
.five h1:before {
  content: "Новый";
  position: absolute;
  top: -10px;
  left: -160px;
  font-size: 1.5em;
  transform: rotate(-25deg);
  font-family: 'Marck Script', cursive;
}
.five h1:after {
  content: ""; 
  position: absolute;
  width: 120%;
  height: 4px;
  right: 0;
  bottom: -4px;
  background: #587493;
}
@media (max-width: 580px) {
  .five {padding-left: 130px;}
  .five h1 {font-size: 2em;}
  .five h1:before {left: -130px;}
}
@media (max-width: 480px) {
  .five {padding-left: 100px;}
  .five h1 {
    font-size: 1.5em;
    padding-right: 10px;
}
  .five h1:before {left: -100px;}
}
@media (max-width: 380px) {
  .five {padding-left: 90px;}
  .five h1 {font-size: 1.3em;}
  .five h1:before {left: -88px;}
}

Пример 6

Красота природы

<div class="six"><h1><span>Красота природы</span></h1></div>
.six {
  background: #F7E2C7;
  padding: 50px 20px;
  text-align: center;
}
.six h1 {
  font-weight: normal;
  font-family: 'Merriweather', serif;
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 1;
  color: #F7844E;
  font-size: 40px;
  padding: .4em 1em .55em;
}
.six h1:before,
.six h1:after {
  content: ""; 
  position: absolute;
  width: 60%;
  height: .1em;
  background: #294200; 
}
.six h1:before {
  left: 0;
  top: 0;
}
.six h1:after {
  right: 0;
  bottom: 0;
}
.six h1 span:before,
.six h1 span:after {
  content: ""; 
  position: absolute;
  width: .65em;
  height: .65em;
  border: .1em solid #294200;
  border-radius: 50%;
  box-sizing: border-box;
}
.six h1 span:before {
  top: -.55em;
  left: -.325em;
}
.six h1 span:after {
  bottom: -.55em;
  right: -.325em;
}
@media (max-width: 600px) {
  .six h1 {font-size: 2em;}
}
@media (max-width: 450px) {
  .six h1 {font-size: 1.5em;}
}

Поделиться: