красивые анимированные карточки для списка

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

Я сделала все в виде списка меню. Но, как вариант, можно сделать список домашних заданий, список ярлыков или того же меню сайта. Для портфолио тоже подойдёт такое оформление. Ещё, как вариант, карточка профиль автора и ссылки на социальные сети.

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

Посмотреть их все можно на тестовом блоге

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

Общие стили CSS заданы ко всем карточкам. Коды DIV прописаны персонально для каждого варианта. Я их отделила разным цветом.

Код целиком для всех 3 - х.

<style>.pricing-tabs .tab-item {

  -webkit-transform: scale(0.9);

          transform: scale(0.9);

  vertical-align: top;

  float: left;

  position: relative;

  transition: -webkit-transform 0.3s ease-out, -webkit-filter 0.3s;

  transition: transform 0.3s ease-out, filter 0.3s;

  transition: transform 0.3s ease-out, filter 0.3s, -webkit-transform 0.3s ease-out, -webkit-filter 0.3s;

  border: 1px solid rgba(0,0,0,0.2); /*толщина и цвет рамки */

  border-radius: 10px 10px 0 0; /*закруглили углы карточки*/

  min-height: 500px !important; /*высота карточки*/

  min-width: 260px !important; /*ширина карточки*/

  padding: 0;

  display: -moz-flex;

  display: -ms-flex;

  display: -o-flex;

  display: flex;

  -moz-flex-direction: column;

  -o-flex-direction: column;

  flex-direction: column;

  justify-content: space-between;

  cursor: default;

}

.pricing-tabs .tab-item:after,

.pricing-tabs .tab-item:before {

  z-index: -1;

  content: ' ';

  position: absolute;=

  left: 10px;

  top: 80%;

  bottom: 18px;

  right: 10px;

  -webkit-transform-origin: bottom center;

          transform-origin: bottom center;

  box-shadow: 0px 25px 10px -8px rgba(0,0,0,0.4);

}

.pricing-tabs .tab-item:after {

  -webkit-transform: rotate(6deg) translate3d(15px, 0, 0);

          transform: rotate(6deg) translate3d(15px, 0, 0);

}

.pricing-tabs .tab-item:before {

  -webkit-transform: rotate(-6deg) translate3d(-15px, 0, 0);

          transform: rotate(-6deg) translate3d(-15px, 0, 0);

}

.pricing-tabs .tab-item:hover{

  -webkit-transform: scale(1);

          transform: scale(1);

}

.tab-item:not(:hover).flou {

  -webkit-filter: blur(3px);

          filter: blur(3px);

}

.tab-item h1{

  margin: 0;

  font-size: 2.4rem;

  line-height: 5rem;

  background: #fbcb0f; /*фон заголовка*/

  border-radius: inherit;

}

.tab-item .price{

  font-size: 1.5rem;

  line-height: 2rem;

}

.underline {

  position: relative;

}

.underline:after {

  position: absolute;

  content: ' ';

  right: 5%;

  left: 5%;

  bottom: 0;

  height: 2px;

  background-image: linear-gradient(90deg, transparent, #fbcb0f, transparent);

}

.underline.black{margin-bottom: 40px;}

.underline.black:after{

  background-image: linear-gradient(90deg, transparent, #fbcb0f, #000, #fbcb0f, transparent);

}

.tab-item ul li{

  height: 35px;

  font-size: 1.2rem;

}
.tab-item ul li i{

  color: #ffc400; /*цвет подпункта второй карточки*/
}

.tab-item:last-child ul li i{

  color: #64dd17;

}
.tab-item:last-child ul li em{

  text-shadow: 1px 0px 0px #fbcb0f;

  font-size: 1.3rem;

}
.tab-item .btn-profiter{font-size: 1.7rem; letter-spacing: 1px;}

.tab-item:hover .btn-profiter{background: #000 !important;}

</style>
<div class="row">
<div class="s12 m8 pricing-tabs center">
<div class="col s12 m4 tab-item">
<h1>
Первые блюда</h1>
<div class="price">
горячие и холодные супы</div>
<span class="underline"></span>

<ul>
<li>суп 1</li>
<li>суп 2</li>
<li>суп 3</li>
<li>суп 4</li>
<li>суп 5</li>
<li>суп 6</li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

      </div>

<div class="col s12 m4 tab-item">
<h1>
Вторые блюда</h1>
<div class="price">
горячие и холодные</div>
<span class="underline"></span>

        <br />
<ul>
<li>блюдо 1
            <i class="material-icons">диетическое</i>
          </li>
<li> блюдо 2
            <i class="material-icons">диетическое</i>
          </li>
<li>блюдо 3
            <i class="material-icons">диетическое</i>
          </li>
<li>блюдо 4</li>
<li>блюдо 5
          </li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

      </div>

<div class="col s12 m4 tab-item">
<h1>
Напитки</h1>
<div class="price">
холодные и горячие</div>
<span class="underline"></span>
<ul>
<li>Чай  <em>Мате</em>
            <i class="material-icons">цена</i>
          </li>
<li>Кофе <em>Капучино</em>
            <i class="material-icons">цена</i>
          </li>
<li>Квас  <em>домашний</em>
            <i class="material-icons">цена</i>
          </li>
<li>Компот<em>Вишнёвый</em>
            <i class="material-icons">цена</i>
          </li>
<li>Минеральная вода
            <i class="material-icons">без газа</i>
          </li>
<li>Ещё в ассортименте</li>
</ul>
<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>
      </div>

Как вы обратили внимание

Первая карточка простой список
Вторая карточка список с подпунктами которые отмечены жёлтым цветом, как и заголовок карточки.
Третья карточка пункты, подпункты и ещё в тегах <i >дополнительная информация.

Другие пояснения в самом коде.

Уберите не нужные карточки при необходимости.

В примерах я сделала ссылки не кликабельные. Кроме кнопки Заказать( в моём примере). Но , чтобы пользователь перешёл на другую страницу, к каждому пункту (подпункту и тегу  i ) добавляем саму ссылку.

<a href="адрес страницы на которую ведёт ссылка">заказать</a>

Примерно вот так

<button class="btn btn-profiter grey darken-1"><a href="http://hpargallka.blogspot.ru/">заказать</a></button>

или так

<li><a href="http://hpargallka.blogspot.ru/">суп 1</a></li>

Принцип, думаю понять. Если где запутаетесь со стилями при применении у себя такой анимированной карточки или сразу всех, пишите в комментариях, разберёмся.

Пока писала пост попалось, как на подобии этого, оформлены интернет - магазины. Видела на сайтах для детей загадки с разгадками. Приложите фантазию к их применению.

Всем спасибо и до встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :