Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

Как сделать горизонтальное выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка <li> добавляется вложенный список <ul> или <оl>.

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;};
— для выпадающего меню ul {position: absolute;}, а также значения left и top.

Для наглядности и удобства форматирования добавим основному меню класс topmenu, выпадающему — submenu.

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

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

Способ 1. {display: none;}

Выпадающее меню скрывается с помощью .submenu {display: none;}, при наведении показывается с помощью .topmenu li:hover .submenu {display: block;}.

Способ 2. {visibility: hidden;}

Меню скрывается с помощью .submenu {visibility: hidden;}, показывается — .topmenu li:hover .submenu {visibility: visible;}.

Способ 3. {opacity: 0;}

Меню скрывается с помощью .submenu {opacity: 0;}, показывается — .topmenu li:hover .submenu {opacity: 1;}. Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden;, а при наведении меняем на visibility: visible;.

Способ 4. {transform: scaleY(0);}

Меню скрывается с помощью .submenu {transform: scaleY(0);}, показывается — .topmenu li:hover .submenu {transform: scaleY(1);}. Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu {transform-origin: 0 0;}, т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

$(".five li ul").hide(); // скрываем выпадающее меню
$(".five li:has('.submenu')").hover(
  function(){
  $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */
);

2. 3D выпадающее меню

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

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

<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px);
  background-size: 10px 10px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  display: block;
  text-decoration: none;
  outline: none;
  transition: .4s ease-in-out;
}
.topmenu {
  backface-visibility: hidden;
  background: rgba(255,255,255,.8);
}
.topmenu > li {
  display: inline-block;
  position: relative;
}
.topmenu > li > a {
  font-family: 'Exo 2', sans-serif;
  height: 70px;
  line-height: 70px;
  padding: 0 30px;
  font-weight: bold;
  color: #003559;
  text-transform: uppercase;
}
.down:after {
  content: "\f107";
  margin-left: 8px;
  font-family: FontAwesome;
}
.topmenu li a:hover { color: #E6855F; }
.submenu {
  background: white;
  border: 2px solid #003559;
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  width: 150px;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: 0% 0%;
  transition: .6s ease-in-out;
}
.topmenu > li:hover .submenu{
  visibility: visible;
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}
.submenu li a {
  color: #7f7f7f;
  font-size: 13px;
  line-height: 36px;
  padding: 0 25px;
  font-family: 'Kurale', serif;
}

3. Разворачивающееся выпадающее меню с логотипом

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

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

<header>
  <a href="" class="logo">Лого</a>
  <nav>
      <ul class="topmenu">
        <li><a href="">Главная</a></li>
        <li><a href="" class="submenu-link">О нас</a>
          <ul class="submenu">
            <li><a href="">Производство</a></li>
            <li><a href="">Магазин</a></li>
            <li><a href="">Сервис</a></li>
          </ul>
        </li>
        <li><a href="">Проекты</a></li>
        <li><a href="">Контакты</a></li>
      </ul>
    </nav>
</header>
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f2f2f2;
}
header {
  background: white;
  text-align: center;
}
header a {
  text-decoration: none;
  outline: none;
  display: block;
  transition: .3s ease-in-out;
}
.logo {
  color: #D5B45B;
  font-family: 'Playfair Display', serif;
  font-size: 2.5em;
  padding: 20px 0;
}
nav {
  display: table;
  margin: 0 auto;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topmenu:after {
  content: "";
  display: table;
  clear: both;
}
.topmenu > li {
  width: 25%;
  float: left;
  position: relative;
  font-family: 'Open Sans', sans-serif;
}
.topmenu > li > a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  color: #404040;
  padding: 15px 30px;
}
.topmenu li a:hover { color: #D5B45B; }
.submenu-link:after {
  content: "\f107";
  font-family: "FontAwesome";
  color: inherit;
  margin-left: 10px;
}
.submenu {
  background: #273037;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  width: 180px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .5s ease-in-out;
}
.submenu a {
  color: white;
  text-align: left;
  padding: 12px 15px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.submenu li:last-child a { border-bottom: none; }
.topmenu > li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu {transform: scale(.8);}, при наведении размер увеличивается до .topmenu > li:hover .submenu {transform: scale(1);}.

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

<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Blog</a>
       <ul class="submenu">
    <li><a href="">Category</a></li>
     <li><a href="">Author</a></li>
     <li><a href="">Archive</a></li>
     <li><a href="">Tags</a></li>
     </ul>
    </li>
    <li><a href="">Portfolio</a>
      <ul class="submenu">
    <li><a href="">Category</a></li>
     <li><a href="">Author</a></li>
     <li><a href="">Archive</a></li>
     <li><a href="">Tags</a></li>
     </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
* { box-sizing: border-box; }
body {
  margin: 0;
  background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)
}
nav { background: white; }
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  outline: none;
  display: block;
  transition: .4s ease-in-out;
}
.topmenu {
  text-align: center;
  padding: 10px 0;
}
.topmenu > li {
  display: inline-block;
  position: relative;
}
.topmenu > li:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 12px;
  background: #d2d2d2;
  top: 16px;
  box-shadow: 4px -2px 0 #d2d2d2;
  transform: rotate(30deg);
}
.topmenu > li:last-child:after {
  background: none;
  box-shadow: none;
}
.topmenu > li > a {
  padding: 12px 26px;
  color: #767676;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: 'Exo 2', sans-serif;
}
.topmenu li a:hover { color: #c0a97a; }
.submenu {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 210px;
  margin-left: -105px;
  background: #fafafa;
  border: 1px solid #ededed;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  transform: scale(.8);
  transition: .4s ease-in-out;
}
.submenu li a {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #efefef;
  font-size: 12px;
  color: #484848;
  font-family: 'Kurale', serif;
}
.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

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

<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Libre+Baskerville');
body {
  margin: 0;
  background-image: url(https://html5book.ru/wp-content/uploads/2017/03/dulcineia-dias-195000.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8));
}
nav {
  text-align: center;
  padding: 40px 0 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  display: block;
  color: #222;
}
.topmenu > li {
  display: inline-block;
  position: relative;
}
.topmenu > li > a {
  position: relative;
  padding: 10px 15px;
  font-family: 'Kaushan Script', cursive;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: 3px;
}
.topmenu > li > a:before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: .3s;
}
.topmenu li:hover a:before {
  transform: translate(-50%, 0);
  opacity: 1;
}
.submenu {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 100%;
  width: 150px;
  padding: 15px 0 15px;
  margin-top: 5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 30px rgba(0,0,0,.2);
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: .3s;
}
.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
.submenu a {
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 10px;
  transition: .3s linear;
}
.submenu a:hover {background: #e8e8e8;}

Поделиться:

3D flip card

В этом уроке вы узнаете, как сделать эффект 3D на примере поворачивающейся карточки (flip card). При наведении на контейнер внутренние блоки вращаются вдоль оси Y, обратная сторона при этом невидима. С помощью таких карточек можно рационально организовывать пространство на веб-странице, размещая связанную информацию с двух сторон.

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

Разметка HTML

<div class="container">
  <div class="flipper">
    <div class="front">
      <div class="header">
        <i class="fa fa-creative-commons fa-2x"></i>
        <h3>wedding Agency</h3>
      </div>
      <p>Sed ut perspiciatis unde omnis...</p>
      </div>
    <div class="back">
      <h3>about us</h3>
      <p>Nemo enim ipsam voluptatem quia...</p>
      </div>
    </div>
</div>

Для начала установим 3D-перспективу для внешнего блока, добавив ему таким образом глубину. Чем больше значение перспективы, тем меньше выражен эффект глубины. Для выравнивания по центру страницы зададим блоку ширину и поля.

.container {
  text-align: center;
  width: 320px;
  margin: 20px auto;
  -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}

Внутреннему блоку назначим transform-style: preserve-3d, чтобы дочерние элементы также позиционировались в трехмерном пространстве.

.flipper {
  position: relative;
  width: 320px;
  height: 280px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s linear;
  -moz-transition: .7s linear;
  -o-transition: .7s linear;
  transition: .7s linear;
} 

Для лицевой и оборотной стороны карточки зададим backface-visibility: hidden, чтобы скрыть каждую из сторон при повороте.

.front, .back {
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 40px 20px 20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #f5f5f5;
}
i {
  color: #DCB8B2;
  display: inline-block;
  margin-bottom: 15px;
}
h3 {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  margin: 0 0 15px;
}
p {
  font-size: 14px;
  line-height: 25px;
}
.header h3 {
  color: #18191a;
}
.front p {
  color: #818285;
}

Отразим зеркально оборотную сторону, чтобы при вращении содержимое внутри блока отображалось слева направо.

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background: #DCB8B2;
  color: white;
}
.back h3 {
  position: relative;
}
.back h3:after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  background: white;
  margin-left: -25px;
}
.back p {
  padding-top: 15px;
}

Добавим поворот на 180 градусов при наведении.

.container:hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

Поделиться:

Оформление изображений на сайте: 10 идей

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

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

Для придания движения элементам используются CSS3-трансформации, а плавность эффектов обеспечивается за счет CSS3-переходов. Все эффекты воспроизводятся в современных браузерах, для поддержки свойств не забывайте добавлять браузерные префиксы. Шрифты нужно загрузить с сайта GoogleFonts.

Перейти на страницу с примерами

Идея 1. Полупрозрачная надпись к изображению

<div class="image-box">
  <div class="border"></div>
    <img src="https://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-florchik-2.jpg">
  <div class="image-content">
    <h3 class="image-header">Ночная роза</h3>
    <p>Ночная роза — удивительное растение...</p>
  </div>
</div>
* {
  box-sizing: border-box;
}
.image-box {
  position: relative;
  width: 600px; 
  margin: 50px auto 0;
}
.image-box .border {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border: 2px solid white;
  z-index: 1;
}
.image-box img {
  display: block;
  position: relative;
  width: 600px;
  height: 442px;
}
.image-box .image-content {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 60%;
  padding: 20px;
  z-index: 2;
  background: linear-gradient(to bottom,rgba(18,26,63,0.3),rgba(18,26,63,0.9));
}
.image-box .image-header {
  font-size: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
}
.image-box p {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  margin-top: 20px;
  line-height: 24px;
}

Идея 2. Изображение в круглой рамке

<div class="box">
  <div class="image-box">
    <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-6.jpg">
  </div>
  <div class="details">
    <h3>Флокс</h3>
  <p>Флокс (лат. Phlox) — род красивоцветущих травянистых растений...</p>
  </div>
</div>
.box {
  width: 400px;
  margin: 50px auto 0;
  text-align: center;
}
.image-box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 10px;
  background: #EBE7DD;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.details {
  background: #EBE7DD;
  margin-top: -70px;
  padding: 70px 30px 30px;
  border-radius: 5px;
}
.details h3 {
  font-family: 'Ledger', serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 24px;
  color: #281F19;
}
.details p {
  font-family: 'Ledger', serif;
  color: #4C3D35;
  line-height: 24px;
}

Идея 3. Надпись к изображению в двойной рамке

<div class="post-wrap">
   <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-4.jpg">
  <div class="post-inner">
    <span class="dot first"></span>
      <h3>Букет роз</h3>
    <span class="dot last"></span>
  </div>
    <p>Подари мне букет из роз...</p>
 </div>
*, *:before, *:after {
  box-sizing: border-box;
}
.post-wrap {
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  width: 420px;
  margin: 50px auto 0; 
  padding: 10px;
  text-align: center;
}
.post-inner {
  margin: -75px 20px 20px;
  padding: 15px;
  background: #122330;
  position: relative;
}
.post-inner:after {
  display: block;
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  top: -10px;
  border: 3px solid #122330;
}
.dot {
  height: 5px;
  width: 5px;
  background: #F15A40;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: super;
}
.first {
  margin-right: 24px;
}
.last {
  margin-left: 24px;
}
.dot:before, .dot:after {
  content: "";
  height: 5px;
  width: 5px;
  background: #F15A40;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
.dot:before {
  left: 10px;
}
.dot:after {
  right: 10px;
}
.post-inner h3 {
  font-family: 'Playfair Display', serif;
  color: #EFECD9;
  display: inline-block;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 2px;
}
.post-wrap p {
  font-family: 'Lora', serif;
  padding-top: 20px;
  line-height: 24px;
}

Идея 4. Рамка-изображение для блока с картинкой

<div class="image-border">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-5.jpg">
  <div class="post-info">
  <h3 class="post-title">Ветка вишни</h3>
    <p><span class="meta">Май 11, 2015</span></p>
    <span class="diamond"></span>
    <span class="diamond"></span>
    <span class="diamond"></span>
  </div>
</div>
.image-border  {
  max-width: 300px;
  margin: 50px auto 0;
  padding: 15px;
  border-width: 15px;
  border-style: solid;
  border-image: url(https://html5book.ru/wp-content/uploads/2015/10/border-diagonal.png) 25% repeat repeat;
  background: white;
  }
.post-info {
  text-align: center;
}
.post-title {
  font-family: 'Playfair Display', "Georgia","Times New Roman",serif;
  font-size: 24px;
  line-height: 1;
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: black;
}
.image-border img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}
.meta {
  display: inline-block;
  font-size: 12px;
  font-style: italic;
  margin: 0 10px;
  color: #999999;
}
.diamond {
  width: 10px;
  height: 10px;
  border: 1px solid #000000;
  display: inline-block;
  margin: 0 5px;
  transform: rotate(45deg);
  position: relative;
}
.diamond:nth-of-type(2) {
  background: black;
}

Идея 5. Карточка товара со скидкой

<div class="post">
  <div class="post-top">
    <a href="#">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-3.jpg" class="post-top-img">
    </a>
    <p class="post-top-angle">Скидка</p>
    <p class="post-top-price"><span>500 &#8381;</span></p>
  </div>
  <div class="post-content">
    <h3>Букет цветов</h3>
    <p>В нашем магазине вы можете купить свежие цветы любого вида, от традиционных до экзотических.</p>
  </div>
</div>
* {
  box-sizing: border-box;
}
p, h3 {margin: 0}
.post {
  width: 300px;
  margin: 50px auto 0;
  position: relative;
  background: white;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 3px;
  font-family: 'Scada', sans-serif;
}
.post-top {
  min-height: 45px;
  position: relative;
  overflow: hidden;
}
.post-top a {
  text-decoration: none;
  display: block;
}
.post-top-img {
  border-radius: 3px 3px 0 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.post-top-angle {
  width: 180px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 20px;
  right: -50px;
  transform:rotate(45deg);
  color: #fefefe;
  text-align: center;
  background: #F8CF82;
  font-size: 16px;
  font-weight:bold;
}
.post-top-price {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
}
.post-top-price span {
display: inline-block;
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
  background: #F8CF82;
  border-radius: 3px 0 0 0;
  color: #fefefe;
  font-size: 1.5em;
  font-weight: bold;
}
.post-top-price:after {
  content: " ";
  display: block;
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #F8CF82;
}
.post-content {
  padding: 20px;
  font-family: 'Scada', sans-serif;
}
.post-content h3 {
  font-size: 1.5em;
}
.post-content p {
  margin-top: 10px;
  color: #6e6e6e;
  line-height: 1.5em;
}

Идея 6. Появляющаяся надпись на затемненном фоне и эффект приближения изображения при наведении

<div class="box">
  <div class="box-inner">
    <a href="#">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-1.jpg">
    </a>
    <div class="text">
      <h2>Орхидеи</h2>
    </div>
  </div>
</div>
.box {
  width: 400px;
  margin: 50px auto 0;
  position: relative;
  overflow: hidden;
}
.box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.box-inner img {
  transition: all 0.4s ease-in-out;
}
.text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -40px;
  text-align: center;
  z-index: 2;
}
.text h2 {
  font-family: 'Forum', cursive;
  color: white;
  display: inline-block;
  font-size: 50px;
  line-height: 75px;
  font-weight: 400;
  text-transform: uppercase;
  border-width: 1px 0;
  border-color: rgba(255,255,255,0.5);
  border-style: solid;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.box:hover:before {
  opacity: 1;
}
.box:hover img {
  transform: scale(1.1);
}
.box:hover .text h2 {
  opacity: 1;
}

Идея 7. Оформление анонса статьи

<div class="card">
  <h3 class="card-title">Весна</h3>
    <div>
      <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-7.jpg">
    </div>
    <p>Придет весна и вновь заглянет...</p>
</div>
.card {
  padding: 20px;
  border: 1px solid #eaeaea;
  max-width: 300px;
  width: 100%;
  margin: 50px auto 0;
  background: white;
}
.card-title {
  font-family: 'Playfair Display', "Georgia","Times New Roman",serif;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
  margin: 10px 0 20px;
  color: black;
  text-align: center;
  border-bottom: 3px double #eaeaea;
}
.card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.card p {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0;
}

Идея 8. Картинка на подложке

<div class="image">
   <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-8.jpg">
</div>
.image {
  width: 300px;
  margin: 50px auto 0;
  position: relative;
  border: 6px solid white;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.image img {
  max-width: 100%;
  display: block;
}
.image:before, .image:after {
  content: "";
  width: 300px;
  height: 281px;
  position: absolute;
  z-index: -1;
  border: 6px solid white;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.image:before {
  background: #F5CEC6;
  top: 0px;
  left: -10px;
  transform: rotate(-5deg);
}
.image:after {
  background: #DCB8B2;
  top: 5px;
  left: 0px;
  transform: rotate(4deg);
}

Идея 9. Трансформирующаяся надпись к изображению при наведении

<article class="slide">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-9.jpg">
  <div class="slide-content">
    <div class="slide-item">														
	<h3>Полевые цветы</h3>
        <p>Полевые цветы на зелёном лугу...</p>
    </div>
  </div>
</article>
*, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
.slide {
  display: block;
  width: 400px; 
  margin: 50px auto 0;
  position: relative;
}
.slide img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}
.slide-content {
  margin: -10px 20px 0;
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(0);
  transition: transform .4s ease-in-out;
}
.slide-content:before, .slide-content:after {
  content: "";
  position: absolute;
  bottom: 0;
  margin: 0 0 2px;
  height: 1px;
  box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
  transition: .4s ease-in-out;
}
.slide-content:before {
  left: 0;
  right: 50%;
  transform: rotate(1deg);
}
.slide-content:after {
  right: 0;
  left: 50%;
  transform: rotate(-1deg);
}
.slide-item {
  background: #FBFAF1;
  padding: 20px 20px 18px;
  position: relative;
  z-index: 5;
  border-radius: 0;
  transition: .4s ease-in-out;
}
.slide-item h3 {
  font-family: 'Playfair Display', serif;
  color: #B4111A;
  font-size: 28px;
  margin-bottom: 15px;
}
.slide-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #1E2630;
}
.slide:hover .slide-content{
  transform:translateY(-10%);
}
.slide:hover .slide-item{
  border-radius: 0 0 200px 200px/0 0 10px 10px;
}
.slide:hover .slide-content:before {
  left: 10px;
}
.slide:hover .slide-content:after {
  right: 10px;
}
.slide:hover .slide-content:before, .slide:hover .slide-content:after {
  box-shadow: 0 0 16px 3px rgba(0,0,0,0.6);
  margin: 0 0 6px;
}
.slide:hover .slide-content:before {
  right: 50.4%;
}
.slide:hover .slide-content:after {
  left: 50.4%;
}

Идея 10. Появляющаяся рамка при наведении

<article>
  <div class="post">
    <a href="#">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/flower-example-10.jpg">
    </a>
  </div>
</article>
article {
  display: block;
}
.post {
  position: relative;
  width: 400px;
  margin: 50px auto 0;
}
.post:before, .post a:before,.post a:after {
  content: "";
  opacity: 0;
  position: absolute;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.post:before {
  background: rgba(255, 255, 255, .2);
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
} 
.post:hover:before {
  opacity: 1;
}
.post:hover a:before, .post:hover a:after {
  opacity: 1;
  transform: scale(1);
}
.post a:before {
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  bottom: 30px;
  left: 10px;
  right: 10px;
  top: 30px;
  transform: scale(0, 1);
  transform-origin: 0 0;
}
.post a:after {
  border-left: 1px solid white;
  border-right: 1px solid white;
  bottom: 10px;
  left: 30px;
  right: 30px;
  top: 10px;
  transform: scale(1, 0);
  transform-origin: 100% 0 ;
}

Поделиться:

Красивые сайты

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

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

1. Ryan Feerer

site1

2. Seán Halpin

site2

3. Curious Space

site3

4. MacRabbit

site4

5. OrangeYouGlad

site5

6. Michelberger hotel

7. Stacked Font

site7

8. Made of Sundays

site8

9. Amy Herndon

site9

10. These Are Things

site10

11. Carla Ferfolja • Never End Design

site11

12. Combadi

site12

13. Tsto

site13

14. More Hazards More Heroes

site14

15. Brisbane Wedding Photographer

site15

16. Hoodzpah Design Co.

site16

17. About Adham Dannaway

site17

18. Jesse Willmon

site18

19. Also

site19

20. Multiways

site20

21. Why Go Wild

site21

22. Brave the Woods

site22

23. Fuzzco

site23

24. WALLACE DESIGN HOUSE

site24

25. Helen & Hard

site25

26. FRÈRES D’ENCRE

site26

27. Denise Chandler

site27

28. Spokes

site28

29. Sweet Robot

site29

30. Marc Thomas

site30

31. Our Wedding

site31

32. Daydream Designs

site32

33. Bubble

site33

34. Pop Art Studio

site34

35. Kaktus

site35

36. Little Big Room

site36

37. Ruthless Spartans vs Cuddly Hipsters

site37

38.

39. Cat Rabbit

site39

40. LEG Work

site40

41. Kinetic V5

site41

43. Свадьба Артема и Юли

artemjuliawedding

44. Lorenzo Verzini

lorenzoverzini

45. Fernville

fernville

46. Fantasy Cartography

fantasy-cartography

Поделиться: