Автор

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

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


 

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

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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D. В тексте урока префиксы браузеров опущены для большей наглядности. Полный код можно посмотреть в исходниках к уроку.


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close