Скрипты,шаблоны для ucoz
Реализация красивых эффектов с помощью CSS3 на сайтах uCoz
| 17.10.2015, 15:40 |
Скрипт вам покажет и вы сможете установить на свой отличные эффекты при наведение на изображения работающие на стилях CSS3 . Так же сразу хочу вас предупредить о том что данный скрипт будет работать только на современных браузерах, таких как Chrome, Firefox и Safari так как старые браузеры не поддерживают CSS3.
Скрипт работает полностью на CSS3 и по этому установка будет быстрой и лёгкой. Данный пример эффектов можно использовать в любых целях на своём сайте .
Я пробовал сделать вид материалов модуля фотографии и у меня получилось а так же я пробовал внутри разместить аватарки пользователей и у меня тоже это получилось, было даже очень оригинально смотреть на них в виде комментариев.
И так для того что бы установить данный эффект к себе на сайт в первую очередь вам нужно установить код который я расположил чуть ниже.
HTML код
Код <div class="imgholder"> <div class="outer1 circle"></div> <div class="outer2 circle"></div> <figure> <img src="Ссылка на изображения" /> <figcaption class="caption">Название изображения</figcaption> </figure> </div>
В HTML коде вы можете наблюдать две надписи Ссылка на изображения и Название изображения, в замен ссылки на изображение вам нужно указать ссылку к вашей картинки или код который выводит ваше изображения.
В замен названия изображения вы можете прописать своё название изображения или вставить код который сам будет выводить названия изображения или Ник пользователя.
Теперь установите стили для ваших эффектов для изображения!
CSS3 стиль первого варианта
Код .imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
z-index:5;
opacity:0.5;
filter: alpha(opacity = 50);
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
box-shadow:0 0 5px #000;
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;
filter: alpha(opacity = 100);
}
.imgholder figcaption{
position:absolute;
left:0;
top:120%;
width:120px;
color:#004E87;
text-shadow:-1px -1px 0 #fff;
z-index:4;
}
/* decorations style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:120px;
height:120px;
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;
}
.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;
filter: alpha(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;
filter: alpha(opacity = 100);
box-shadow:0 0 20px #8EB9FF;
}
CSS3 стиль второго варианта
Код .imgholder{
position:relative;
width:120px;
height:120px;
float:left;
margin:40px 30px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
/* thumbnails style */
.imgholder figure{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
margin:0;
overflow:hidden;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder img{
position:absolute;
left:0;
top:0px;
width:120px;
height:120px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition:
opacity 1s ease-in,
transform 1.5s;
-moz-transition:
opacity 1s ease-in,
-moz-transform 1.5s;
-webkit-transition:
opacity 1s ease-in,
-webkit-transform 1.5s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:-5px;
top:40%;
width:130px;
opacity:1;
filter: alpha(opacity = 100);
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition:
opacity 1s,
transform 1s ease;
-moz-transition:
opacity 1s,
-moz-transform 1s ease;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
/* decoration style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:120px;
height:120px;
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 1.5s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.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;
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10px solid;
border-color: #9BC8FF;
box-shadow:0 0 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition:
opacity 1s ease 0.3s,
transform 1s ease-out 0.3s;
-moz-transition:
opacity 1s ease 0.3s,
-moz-transform 1s ease-out 0.3s;
-webkit-transition:
opacity 1s ease 0.3s,
-webkit-transform 1s ease-out 0.3s;
}
.imgholder:hover .outer2{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
CSS3 стиль третьего варианта
Код .imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:-5px;
top:40%;
width:130px;
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}
.imgholder:hover figcaption{
top:120%;
}
/* decorations style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:120px;
height:120px;
z-index:2;
border:8px solid;
border-color:#DEEBFC;
box-shadow:0 0 3px #AFD3FF;
-moz-ox-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 );
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-box-shadow:0 0 10px #0285E2;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow:0 0 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);
transition:
opacity 0.5s,
transform 0.7s ease-out;
-moz-transition:
opacity 0.5s,
-moz-transform 0.7s ease-out;
-webkit-transition:
opacity 0.5s,
-webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
opacity:0.9;
filter: alpha(opacity = 90);
transform: scale(1,1) rotate(-10deg);
-ms-transform: scale(1,1) rotate(-10deg);
-moz-transform: scale(1,1) rotate(-10deg);
-webkit-transform: scale(1,1) rotate(-10deg);
}
После того как вы выберите стили нужного вам варианта то вам нужно будет их дописать в ващи стили сайта в самый низ и сохранить.
Вот и всё на это установка закончена и вы чуток ниже можете просмотреть демонстрацию данныйх эффектов которые работают на CSS3
|
|
Категория: Скрипты для uCoz | Добавил: Дмитрий |
| Просмотров: 502 | Загрузок: 0
| Рейтинг: 0.0/0 |
|
| Статистика |
Сейчас онлайн: 3 Гостей: 3 Пользователей: 0 |
|