Сегодня мы рассмотрим, очень интересные эффекты CSS которые можно реализовать при оформлении дизайна сайта. Эффекты очень красивые и могут быть использованы к примеру в качестве галереи изображений или аватарки в комментариях.
Эффекты CSS.
Итак, приступим. Все три эфеекта CSS в дефолтном варианте имеют круглые обрамления вокруг изображений это достигается свойством: border-radius: 100px. Эффекты над изображениями могут иметь и не круглое обрамление, а к примеру квадратное. Для этого значение свойства border-radius во всем коде измените на 0px.В первом варианте изображение в неактивном состоянии, приобретает прозрачность при помощи визуального эффекта CSS: filter, а в активном состоянии при наведении курсора, прозрачность исчезает и плавно появляются разноцветные кольца. При желании можете поэкспериментировать с этим свойством CSS.
Разметка HTML.
Рассмотрим разметку только для Демо 1, разметку других примеров можете сами посмотреть в исходных файлах, скачав архив.Во-первых мы создадим заголовок для наших миниатюр с помощью HTML5 тега figure. Два DIV элемента будут добавлены к каждой миниатюре для декорирования.
Linnea Ahlman
Daria Werbowy
/* и другие миниатюры */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;
}Вот и все.
Наслаждайтесь!