RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Фев
13

CSS эффекты при наведении

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

Эффекты CSS.

Итак, приступим. Все три эфеекта CSS в дефолтном варианте имеют круглые  обрамления вокруг изображений это достигается свойством: border-radius: 100px. Эффекты над изображениями могут иметь и не круглое обрамление, а к примеру квадратное. Для этого значение свойства border-radius во всем коде измените на 0px.

В первом варианте изображение в неактивном состоянии, приобретает прозрачность при помощи визуального эффекта CSS: filter, а в активном состоянии при наведении курсора, прозрачность исчезает и плавно появляются разноцветные кольца. При желании можете поэкспериментировать с этим свойством CSS.

CSS3 эффекты при наведении

скачатьdemo

Разметка 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>
<imgsrc="../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*/

.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*/

.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;
}

Вот и все. Спасибо за внимание.

Получай первым обновления блога!

Введите Ваш e-mail:

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


вверх