Автор

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

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


 

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только 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;
}

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


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

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close