logo

Необычное превью для «Главной»

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей.

Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи и при наведении курсора на нее открывется несколько кнопок — ссылок. Как это выглядит и работает смотри ниже. В качестве примера приведены превью двух статей ( ссылки, естественно никуда не ведут ).

Первая статья

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo .


Последующая статья

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo .


Для начала пишем HTML-код


<div class="alt__effect">
  <div class="alt__effect_links">
    <a href="#1" class="alt__effect_button ">Прочитать</a>
    <a href="#1" class="alt__effect_button ">Просмотреть</a>
    <a href="#1" class="alt__effect_button ">Скачать</a>
  </div>
  <div class="alt__effect_text">
    <h3 class="alt__effect_zag">Lorem ipsum dolor </h3> 
    <p class="alt__effect_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</div>
  • div class = «alt__effect_links» — блок в котором находятся кнопки — ссылки.
  • a class = «alt__effect_button» — кнопка — ссылка
  • div class = «alt__effect_text» — блок, содержащий заголовок и текст превью.

div class = «alt__effect» — Блок, объединяющий блок кнопок — ссылок и блок с текстом особенностей не имеет, кроме относительного позиционирования и указания величины перспективы. Ширина блока уменьшена до 85% из-за того, что при наведении курсора с блоком происходит трансформация и появляется тень, которая «наползает» на сайтбар ( в моем случае).


.alt__effect{
  font: 1rem "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative;

  width: 85%;
  height: 300px;
  margin: 10px auto;

  perspective: 800px;
}

Блок с кнопками первоначально повернут по оси Х на 70 градусов transform: rotateX(70deg);, «приспущен» вниз на 100рх bottom: 100px; и скрыт opacity: 0;. При наведении курсора он становиться видимым opacity: 1; ,»всплывая» вверх на 70рх при этом «поворачиваясь» в нулевое положение transform: rotateX(0deg) translateY(-70deg);.


.alt__effect_links{
  position: absolute;
  bottom: 100px;
  left: 0;
  z-index: 10;

  width: 100%;
  height: 100px;
  text-align: center;

  opacity: 0;
  transition: 0.6s;
  transform: rotateX(70deg);
}
.alt__effect:hover .alt__effect_links {
  opacity: 1;
  transform: rotateX(0deg) translateY(-70px);
}

Кнопки — ссылки трансформации при наведении курсора не подвергаются


.alt__effect_button {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 3%;

  font-weight: bold;
  text-decoration: none;

  border-radius: 15px;

  color: rgba(255,255,255,.8);
  background: rgb(27,106,184);
  text-shadow: 1px 1px rgba(0,0,0,.7);
  box-shadow:
   inset 0 0 3px 1px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.1),
   -2px -2px 5px rgba(0,0,0,.5);

  transition: .2s;
}
.alt__effect_button:hover {
  color: #fff;
  background: rgb(27,106,184);
}
.alt__effect_button:active {
  background: rgb(25,92,158);
  box-shadow:
   inset 0 0 5px 3px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.2),
   -2px -2px 5px rgba(0,0,0,.5);
}    

Текстовый блок абсолютно позицирован и изображение (миниатюра) здесь используется в качестве фона. А вот псевдоэлемент :before создает как бы подложку для текстового блока которая первоначально не видна opacity: 0; .

Псевдоэлемент создает точно такой по размерам и положению блок как и основной, но он не содержит никакого контента. Зато у него есть тень box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); и фоновый цвет background: rgba(0, 0, 0, 0.5); .

Дополнительно этот блок трансформирован transform:  rotateX(114deg)  translateZ(-26px)  translateY(110px)  scale(0.75); относитально нижней границы блока transform-origin: bottom; и имеет вид темно-серого параллелогра́мма.


.alt__effect_text {
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;

  height: 300px;
  padding: 20px;
  text-align: center;
  border: 1px solid #888;
  border-radius: 4px;

  color: #fff;
  background: url(images/img.jpg);
  background-size:cover;

  overflow: hidden;
  transition: 0.6s;
}

.alt__effect_text:before{
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transition: all 0.5s;
  transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
  transform-origin: bottom;
}

При наведении курсора на текстовый блок он поворачивается относительно оси Х на 70 градусов transform: rotateX(70deg);, а блок, созданый псевдоэлементом, становиться видимым на 30% opacity: 0.3;, создавая полную иллюзию объема, и «всплывающие» при этом кнопкки дополняют эффект.


.alt__effect:hover .alt__effect_text{
  overflow: visible;
  transform: rotateX(70deg);
} 
.alt__effect:hover .alt__effect_text:before {
  opacity: 0.3;
}   

И в конце немного адаптивности


@media(max-width:667px) {
  .alt__effect_button {
    margin: 0 2%;
    font-size: .9rem;
   }
}

@media(max-width:560px) {
  .alt__effect_button {
    padding: 7px 12px;
    margin: 5px 0;
    font-size: .85rem;
   }
}

@media(max-width:480px) {
  .alt__effect {
    top: 24px;

    width: 70%;
    margin-bottom: 40px;

    font-size: .85rem;
   } 

  .alt__effect_links {
    position: absolute;
    left: 15%;
    bottom: 150px;

    width: 70%; 
   }

  .alt__effect_button {
    display:block;
            
    padding: 7px 12px;
    margin: 5px 0;

    font-size: .85rem;
   }
}

Практические примеры 0

Рекомендую прочитать...

Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью
Оформление кнопок на сайте
Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

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

Читать полностью
Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.