ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивый эффект с помощью 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 стиль первого варианта

Код

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 Октября 2015 Просмотров: 2434 Комментариев: (15)

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

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

Kosten

Комментарии: 15
Порядок вывода комментариев: Dimstrik 15 Октября 2015 15:27¹ 0 Мне вообще этот скрипт понравился когда я его первый раз увидел, хоть думаю и мне не нужен он но на uCoze он должен быть, и взял адаптировал. Kosten 15 Октября 2015 15:42² 0 В гнем винтов сного, но на сайт можно безусловно его пристроить. Kvint 15 Октября 2015 17:18³ 0 Не могу представить на сайте такой эффект, это просто лишнее, возможно только для чего то другого. Canon 15 Октября 2015 17:22⁴ 0 Если на AVATAR то это лишнее, только вес странице прибавить, в фотоальбоме не вижу смысла ставить, так как не идет увеличение. ZruBkul 15 Октября 2015 17:28⁵ 0 Вот говорите что не где не возможно его поставить. Вот вам идея, кино сайт, делаем страницу актеров или там героев фильма, наводим, как говорите название в низ отъезжает, так оно может быть под ссылкой и перейти по ней можно. По мне отличная идея и так можно что то другое придумать, главное, чтоб было. AnTron 15 Октября 2015 17:34⁶ 0 Но там как посмотреть 3 эффекта и все под одну дудку созданы. Самый красивый это третий, и что с ним делать, путь у того кому нужно соображалка работает.) Kvint 15 Октября 2015 17:40⁷ 0 Есть сайты, это портфолио или системные, где такой эффект может и пригодиться. Kosten 15 Октября 2015 17:46⁸ 0 Да много где можно поставить, к примеру возьмем, сайт разработали, тот, потом, редактор, там много групп можно подтянуть и род этот эффект и как правильно было сказано, под ссылку и на его профиль.
1 2 »