» »

Красивый эффект с помощью CSS3 на сайте uCoz


Красивый эффект с помощью CSS3 на сайте uCoz

Всегда красиво смотрится, когда вы наводите на картинку и происходит красивый эффект с ней. И этот скрипт будет делать его, что можете посмотреть. Будет несколько Avatar с надписью, и когда все будет происходить, то надпись съезжает в низ и все смориться шикарно. Скрипт вам покажет и вы сможете установить на свой отличные эффекты при наведение на изображения работающие на стилях 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.
15.10.2015 Просмотров: 590 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 15
Dimstrik
Dimstrik 15.10.2015 15:271
0
Мне вообще этот скрипт понравился когда я его первый раз увидел, хоть думаю и мне не нужен он но на uCoze он должен быть, и взял адаптировал.
Kosten
Kosten 15.10.2015 15:422
0
В гнем винтов сного, но на сайт можно безусловно его пристроить.
Kvint
Kvint 15.10.2015 17:183
0
Не могу представить на сайте такой эффект, это просто лишнее, возможно только для чего то другого.
Canon
Canon 15.10.2015 17:224
0
Если на AVATAR то это лишнее, только вес странице прибавить, в фотоальбоме не вижу смысла ставить, так как не идет увеличение.
ZruBkul
ZruBkul 15.10.2015 17:285
0
Вот говорите что не где не возможно его поставить. Вот вам идея, кино сайт, делаем страницу актеров или там героев фильма, наводим, как говорите название в низ отъезжает, так оно может быть под ссылкой и перейти по ней можно. По мне отличная идея и так можно что то другое придумать, главное, чтоб было.
AnTron
AnTron 15.10.2015 17:346
0
Но там как посмотреть 3 эффекта и все под одну дудку созданы. Самый красивый это третий, и что с ним делать, путь у того кому нужно соображалка работает.)
Kvint
Kvint 15.10.2015 17:407
0
Есть сайты, это портфолио или системные, где такой эффект может и пригодиться.
Kosten
Kosten 15.10.2015 17:468
0
Да много где можно поставить, к примеру возьмем, сайт разработали, тот, потом, редактор, там много групп можно подтянуть и род этот эффект и как правильно было сказано, под ссылку и на его профиль.
kos
kos 15.10.2015 19:409
0
удобно для портфолио smile
Сопрано
Сопрано 15.10.2015 21:0910
0
Красиво бы смотрелось, если на сайт поставить, знаю что глупо, но вдруг. А что за ссылку, то ее там нет и нужно самому делать.
Kosten
Kosten 15.10.2015 21:1411
0
Думаю опытный веб мастер найдет место и применение этим эффектам.
avatar
Юлиан 09.11.2015 19:4612
0
Привет! А куда хтмл код устанавливать?
Kosten
Kosten 09.11.2015 19:5613
0
Но если не написано, думаю где видеть хотите этот скрипт.
Dimstrik
Dimstrik 10.11.2015 06:2214
0
Это полностью ваше желание, этот скрипт предоставлен как пример этой реализации а куда именно устанавливать поможет вам ваша фантазия!
Dimstrik
Dimstrik 10.11.2015 06:3015
0
Где написано ссылка на изображение вы можете указать адрес аватарки а где название изображения там можно ник на сайте
avatar