Форум[S-R] | Развлекательный форум

Правила форума

Подписки

Статистика Форума

Последние обновленные темы

Самые популярные темы

Самые активные

Новые участники

Баннерообмен с SVK Portal (2)

Hibernation Evil - Эпизод... (0)

Народная Солянка 2016 [OG... (0)

У костра (193)

Вступить в группировку (40)

У костра (193)

Анекдоты (145)

Города (94)

Обновление сайта (68)

Создание НПС (63)

StraNNik (1366)

RamzeS (523)

Каратель (178)

Narkostalker (127)

Кракен (93)

serzhkalin (30.11.2020)

cobragign86 (29.11.2020)

karafnurdin (28.11.2020)

Zarig (19.11.2020)

alekseitsarapckin (15.11.2020)

Страница 1 из 1
1

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Реализация красивых эффектов с помощью CSS3 на сайтах uCoz

Реализация красивых эффектов с помощью CSS3 на сайтах uCoz

Бармен

Пропуск №: 63

Регистрация: 12.04.2014

Ранг: Познающий

Сообщений: 74

Карма: 1 | Хабар: 8

stalkers

Дата: Вторник, 19.05.2015, 21:47/ Сообщение №: 1

Скрипт вам покажет и вы сможете установить на свой отличные эффекты при наведение на изображения работающие на стилях 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);
}

После того как вы выберите стили нужного вам варианта то вам нужно будет их дописать в ващи стили сайта в самый низ и сохранить.

Вот и всё на это установка закончена.

Страница 1 из 1
1

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Поддержка сайта Near Bet | Рекомендуем AdGuard
© 20.11.2013-02.12.2020