Автор

11 04.2013
Необычные эффекты при наведении

Необычные эффекты при наведении


 

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

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.

 

ДЕМО
ИСХОДНИКИ

 

Разметка HTML

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

<div class="imgholder">
        <div class="outer1 circle"></div>
        <div class="outer2 circle"></div>
        <figure>
            <img src="../images/linnea-ahlman.jpg" />
            <figcaption class="caption">Linnea Ahlman</figcaption>
        </figure>
</div>
<div class="imgholder">
        <div class="outer1 circle"></div>
        <div class="outer2 circle"></div>
        <figure>
            <img src="../images/daria-werbowy.jpg" />
            <figcaption class="caption">Daria Werbowy</figcaption>
        </figure>
</div>
    /* и другие миниатюры */

 

 

CSS

Определим некоторые основные CSS свойства и размеры миниатюр. Закруглить миниатюры мы можем с помощью свойства border-radius:

.imgholder
{
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}
/* thumbnails css | pcvector.net */
.imgholder img
{
   position: absolute;
   left: 0;
   top: 0;
   width: 120px;
   height: 120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   z-index: 5;
}
.imgholder figcaption
{
   position: absolute;
   left: 0;
   top: 120%;
   width: 120px;
   color: #004E87;
   text-shadow: -1px -1px 0 #fff;
   z-index: 4;
}
/* decoration css | pcvector.net */
.imgholder .circle
{
   position: absolute;
   width:120px;
   height:120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

 

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

.imgholder img
{
   opacity: 0.5;
   transition:
      opacity 0.7s ease-out 0.3s;
   -moz-transition:
      opacity 0.7s ease-out 0.3s;
   -webkit-transition:
      opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img
{
   opacity: 1;
}

 

Теперь стилизуем наш первый DIV элемент декорирования. Будем использовать этот элемент для создания фона и границы для миниатюр:

.imgholder .outer1
{
   top: -8px;
   left: -8px;
   z-index: 2;
   border: 8px solid;
   border-color: #DEEBFC;
   box-shadow: 0 0 3px #AFD3FF;
   -moz-box-shadow: 0 0 3px #AFD3FF;
   -webkit-box-shadow: 0 0 3px #AFD3FF;
   background: #ffffff;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
   transition:
      box-shadow 1s ease-out,
      border-color 1s;
   -moz-transition:
      -moz-box-shadow 1s ease-out,
      border-color 1s;
   -webkit-transition:
      -webkit-box-shadow 1s ease-out,
      border-color 1s;
}
.imgholder:hover .outer1
{
   border-color: #0088EA;
   box-shadow: 0 0 10px #0285E2;
   -moz-box-shadow: 0 0 10px #0285E2;
   -webkit-box-shadow: 0 0 10px #0285E2;
}

 

Следующий DIV элемент будет использоваться для создания внешней границы у миниатюры:

.imgholder .outer2
{
   top: -18px;
   left: -18px;
   width: 136px;
   height: 136px;
   z-index: 1;
   border: 10px solid;
   border-color: #9BC8FF;
   box-shadow: 0 0 3px #8EB9FF;
   -moz-box-shadow: 0 0 3px #8EB9FF;
   -webkit-box-shadow: 0 0 3px #8EB9FF;
   opacity: 0;
   transition:
      opacity 0.7s ease-out 0.3s,
      box-shadow 0.7s ease-out 0.3s;
   -moz-transition:
      opacity 0.7s ease-out 0.3s,
      -moz-box-shadow 0.7s ease-out 0.3s;
   -webkit-transition:
      opacity 0.7s ease-out 0.3s,
      -webkit-box-shadow 0.7s ease-out 0.3s;
}
.imgholder:hover .outer2
{
   opacity: 1;
   box-shadow: 0 0 20px #8EB9FF;
   -moz-box-shadow: 0 0 20px #8EB9FF;
   -webkit-box-shadow: 0 0 20px #8EB9FF;
}

 

Вот мы и рассмотрели первый пример, остальные изучайте по исходникам.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

04 06.2017
Необычные эффекты при наведении

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


06 06.2017
Необычные эффекты при наведении

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


07 04.2013
Необычные эффекты при наведении

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


12 05.2013
Необычные эффекты при наведении

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close