4.05.13, 13:59
0 комментарий
  Разное

CSS эффекты при наведении на изобрадение (аватар)

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

Эффекты CSS.

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

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



Разметка 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;
 }


Вот и все.
Наслаждайтесь!

СКАЧАТЬ

Вес файла
142.18 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204