Лого SiteHere.ru

Потрясающие эффекты CSS3 при наведении

Потрясающие эффекты CSS3 при наведении

В этом уроке мы создадим 7 видов эффектов CSS при наведении курсора мыши на ссылку или изображение. Сейчас мы может делать круглые формы изображений и блоков с помощью свойства border-radius, не используя при этом изображения. Но куда более интересным становится интерактивное изображение или ссылка, которая изменяется при наведении. Стандартное изменение цвета в CSS ссылки при наведении очень банально. Поэтому сегодня мы рассмотрим действительно необычные эффекты.

Пример можно увидеть здесь:

Посмотреть примерСкачать



Потрясающие эффекты CSS3 при наведении курсора

В демо есть 7 примеров с разными эффектами. Будем рассматривать их по порядку.



Пример 1

CSS3 эффект: появление внутреннего круга

HTML часть

Структура HTML в данном случае выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item ch-img-1">
                <div class="ch-info">
                    <h3>Текст 1</h3>
                </div>
            </div>
        </li>
        ...
    </ul>
</section>


CSS часть

А эффект — это появление внутреннего круга с текстом и прозрачным фоном. Для него будут следующие стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    opacity: 0;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
 
    -webkit-backface-visibility: hidden;
}
 
.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}


Пример 2

CSS3 эффект: закрашивание круга снаружи

HTML часть

Структура HTML точно такая же как и в первом примере.



CSS часть

А вот CSS отличается, так как здесь другой эффект(круг закрашивается снаружи), также используем другие изображения:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
.ch-item:hover {
    box-shadow: 
        inset 0 0 0 110px rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.1);
}


Пример 3

CSS3 эффект: гвоздик

HTML часть

В данном случае структура несколько иная, потому что у нас есть две части формы: та что мы видим изначально, и та, которая показывается при наведении:

1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h3>Текст</h3>
                </div>
                <div class="ch-thumb ch-img-1"></div>
            </div>
        </li>
        ...
    </ul>
</section>


CSS часть

Эффект здесь также интересный: изображение как бы прибито гвоздиком, и при наведении съезжает вниз одна часть:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}


Пример 4

CSS3 эффект: внутренний поворот

HTML часть

Как и в предыдущем примере здесь есть две части формы: видимая и невидимая. Поэтому HTML структура очень похожа:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item ch-img-1">				
                <div class="ch-info-wrap">
                    <div class="ch-info">
                        <div class="ch-info-front ch-img-1"></div>
                        <div class="ch-info-back">
                            <h3>Текст 1</h3>
                        </div>	
                    </div>
                </div>
            </div>
        </li>
        ...
    </ul>
</section>


CSS часть

Очень красивый эффект поворота внутренней части:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.ch-info-wrap {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        0 0 0 20px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-info {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
 
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
 
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
 
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
.ch-info .ch-info-back {
    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}
 
.ch-item:hover .ch-info-wrap {
    box-shadow: 
        0 0 0 0 rgba(255,255,255,0.8), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-item:hover .ch-info {
    -webkit-transform: rotate3d(0,1,0,-180deg);
    -moz-transform: rotate3d(0,1,0,-180deg);
    -o-transform: rotate3d(0,1,0,-180deg);
    -ms-transform: rotate3d(0,1,0,-180deg);
    transform: rotate3d(0,1,0,-180deg);
}


Пример 5

CSS3 эффект: уменьшение и замена внутреннего круга

HTML часть

Структура точно такая же, как в прошлом примере, здесь также есть видимая и невидимая часть формы.



CSS часть

Суть эффекта состоит в следующем: внутренний круг уменьшается и заменяется содержимым с текстом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        0 0 0 20px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
}
 
.ch-info .ch-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
 
.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
} 
 
.ch-item:hover .ch-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}


Пример 6

CSS3 эффект: открывается вниз

HTML часть

В HTML всё точно также, как и в прошлых двух примерах, поэтому ничего не меняем.



CSS часть

При наведении на данный блок, видимая часть смещается вниз и мы видим текст, который находится за видимой частью:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
 
.ch-info .ch-info-front {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
 
    z-index: 100;
    box-shadow: 
        inset 2px 1px 4px rgba(0,0,0,0.1);
}
 
.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: rotate3d(1,0,0,-180deg);
    -moz-transform: rotate3d(1,0,0,-180deg);
    -o-transform: rotate3d(1,0,0,-180deg);
    -ms-transform: rotate3d(1,0,0,-180deg);
    transform: rotate3d(1,0,0,-180deg);
 
    box-shadow: 
        inset 0 0 5px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(0,0,0,0.3);
}
 
.ch-item:hover .ch-info-back {
    background: rgba(230,132,107,0.6);
}


Пример 7

CSS3 эффект: 3D преобразование

HTML часть

Здесь опять же ничего не меняем, оставляем как в прошлом примере.



CSS часть

В этом примере используется 3D преобразование и смотрится оно очень красиво:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;
}
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
 
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
 
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}
 
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}


Вывод

Мы рассмотрели 7 очень красивых и оригинальных эффектов, которые можно использовать на своём сайте. Я очень редко встречаю подобные вещи на сайтах. Они придадут вашему сайту оригинальность и неповторимость, но только не переборщите с ними, чтобы все эти преобразования не мешали посетителям просматривать ваш сайт.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

68 комментариев к записи
  • Ajax

    Спасибо за столь шикарный пост. Из всех семи мне больше всего понравился именно первый эффект. Думаю, что он приживется у меня на сайте 🙂 А за исходники респект.

     
    • Юрий

      А мне больше всего понравился 5-й 🙂 . Но и первый ничего)

       
      • Антон

        Мне тоже больше всего пятый понравился broken heart

         
  • Саматакая

    Огромное спасибо 😎

     
  • Александр

    Шикарные примеры! Даже Explorer11 их нормально отображает Надо будет взять на вооружение. Спасибо.

     
  • Елена

    Здравствуйте, Юрий! Получаю на свою почту Ваши новые посты и с интересом всегда их читаю, пока читаю. Всё не решаюсь что-либо применить у себя на сайте, т.к. чувствую себя пока не уверенно с HTML и CSS. У меня к Вам вопрос: в какое месте нужно размещать предложенные вами исходники? Можно ли использовать картинку, как ссылку, если на её наведешь и человека перенаправит туда, куда именно я укажу. Спасибо!

     
    • Юрий

      Здравствуйте, Елена! Не бойтесь что-то сделать не так, всегда можно всё исправить! Вы используете WordPress?

       
  • Елена

    Да, Юрий,я использую WordPress.

     
    • Юрий

      По шагам:
      1. Скачайте исходники и откройте тот, который вам больше всего понравился. Скопируйте структуру нужного элемента и вставьте его себе на сайт.

      2. Затем откройте соответствующий файл стилей. Он подключен между тегами head. Скопируйте из его все стили и вставьте в конец вашего файла style.css(он находится в папке с активной темой).

      3. Скопируйте необходимые изображения и вставьте в папку images(которая находится в папке вашей темы).

      Если у вас что-то не получается или вы не уверены, то напишите мне на почту: nemetsyuriy@gmail.com

       
      • артем

        вы пишете в пункте 1: «…скопируйте структуру нужного элемента и вставьте его себе на сайт.». нельзя ли подробнее, куда именно прописывать этот код? и второй вопрос: где прописывать url изображений?

         
        • Юрий

          Здравствуйте, Артем! Код HTML вы вставляете к нужное место, где хотите видеть эту кнопку(в код шаблона вашего сайта). А url прописываются в файле стилей.

           
          • артем

            эффекты, конечно, интересные, но, думаю, под силу их применить только программисту. такому нубу, как я необходима более подробная инструкция по полочкам и со стрелочками. спасибо.

             
  • Елена

    Спасибо большое, Юрий за помощь! Я обязательно напишу, что у меня получилось на сайте.

     
  • Slader

    Здравствуйте! Читаю автора блога почти полгода, и не успеваю удивляться его щедрости в публикации очень полезных вещей! Эффекты обалденные, и однозначно благодарить за них будут очень многие! Я сам безмерно благодарен! Подскажите пожалуйста один нюанс, как быть если картинки будут не круглые, а например прямоугольные? Хочу применить этот эффект для баннеров внутри сайта.

     
    • Юрий

      Спасибо, что читаете мои статьи, очень приянто) На самом деле изображения и есть прямоугольные, но из-за того что свойство border-radius: 50% невидимая часть отсекается.

       
      • Slader

        Огромное спасибо! Буду осваивать! Если получится что-нибудь путное, обязательно похвастаюсь. Успехов Вам и удачи!

         
  • Валентина Александровна

    Юра здравствуйте, скажите пожалуйста а вообще для чего эти кнопочки? Мне они очень понравились, но можно ли менять текст и картинку на свой сайт. И хотелось бы дизайн под мой сайт. Спасибо. ❗

     
    • Юрий

      Здравствуйте, Валентина! Эти кнопки можно использовать как обычные ссылки или как способ показать какую-нибудь дополнительную информацию (при наведении они показывают какой-нибудь текст). Картинку и текст конечно можно изменять как вам этого хочется 🙂 .

       
  • aleks

    Спасибо за эффекты!
    Только вот №4 в IE не заработал, точнее заработал но не так как должен 🙂 ,
    есть ли шанс поправить?

     
    • Юрий

      А в какую версию IE вы используете?

       
      • aleks

        версия 11.0.9600.17280 установил сегодня, до этого был ie10, ничего не изменилось,
        при этом все остальные демо отлично работают, кроме №4

         
  • Гулин Антон

    Крутяк
    Но что то номер 5 у меня заглючил …

    http://youtu.be/JImtKpznJUc

     
    • Юрий

      Антон, а какая у Вас версия браузера?

       
  • Артем

    Очень хорошие эффекты, а вот описано лениво….
    В 7-м примере нет свойства изображения

     
  • HazyaevNet

    Привет! Подключил все замечательно понравился 3 вариант, рыскав в коде не понял одного зачем мы используем класс «main» если он в стилях не указан?

     
  • Алексей

    Доброго времени суток. Очень понравились примеры, только не знаю как внести их на сайт под Joomla. 🙁
    Если можете, пожалуйста дайте совет, заранее спасибо 😉

     
    • Юрий

      Здравствуйте, Алексей!
      Вы используете шаблон, у которого есть файл стилей (чаще всего style.css). В нём Вам необходимо разместить только CSS код данных эффектов. А затем Вы можете размещать либо в файлах темы, либо в статьях уже HTML структуру элементов из данной статьи.

       
  • Михаил1111

    Юрий, здравствуйте. Пробовал этот урок и еще некоторые, ничего не получается на моем сайте, может для ucoz сайтов не подходят ваши уроки?

     
    • Юрий

      Здравствуйте, Михаил!

      Уроки подходят для любого сайта и CMS. Главное чтобы у Вас был доступ к теме, а для сайтов на ucoz есть всё необходимое чтобы повторить любой урок на сайте.

       
  • Александр

    Автору огромное спасибо! Всё очень интересно!!! Буду пробовать!!!

     
  • Александр

    В догонку, — а есть видеоурок с этими эффектами?

     
    • Юрий

      Здравствуйте, Александр!

      Видеоурока нет, ведь здесь всё просто — HTML и CSS только. В соответствующие файлы разместить и всё.

       
  • Artem

    Здравствуйте Юрий! Очень понравились данные эффекты. Но есть проблемы с их установкой… Сайт на joomla. Я стили добавил в файл шаблона template.css, создал материал и добавил туда html код из примера 1. Ничего к сожалению не получилось… Помогите пожалуйста. Куда надо картинки вставить?

     
    • Юрий

      Здравствуйте, Артем!

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

      P.S. Если проблема останется, лично смогу помочь на консультации.

       
  • Вадим

    Скачал архив)хочу разместить у себя на сайте попробывать!у меня друпал!можно по подробней что и куда разместить?

     
    • Юрий

      Вам необходимо разобраться со структурой Вашей темы, потому что именно в файл стилей Вашей темы нужно вставить CSS. А HTML структуру уже сами выбирайте: либо в код шаблона, либо в статью.

       
  • Алексей

    как сделать чтобы круги не перекрывались другими divaми у которыхстоит  position:relative;и  position:absolute;?

     
    • Юрий Немец

      Для этого необходимо управлять свойством z-index.

       
  • Юрий

    Шикарно !!!!! Спасибо за такую информацию. Но не смог найти где " Сейчас мы может делать круглые формы изображений и блоков с помощью свойства border-radius" 

    Подскажите ,где с этим ознакомится 

     
    • Юрий Немец

      Здравствуйте, Юрий!

      Я имел в виду, что можно делать круглые формы изображений или блоков лишь прописав им в CSS:

      .image_class {
          border-radius:50%;
      }

       

       
  • Андрей

    Все здорово. Только куда этот код надо конкретно вставлять чтобы работали именно нужные иконки а не усе подряд? Во ту меня нет знания GSS, я понимаю что если я скопирую код понравившегося мне  эффекта, то куда его вставить на сайт под GMS Joomla, я не знаю, чтобы это работало. Буду признателен если подскажете.

     
    • Юрий Немец

      Здравствуйте, Андрей. HTML необходимо вставить в статью (в HTML редакторе), а CSS в Ваш файл стилей (то есть файл стилей Вашей темы, чаще всего это style.css).

       
  • Андрей

    Юрий спасибо за ответ, есть еще вопрос, а в файл style.gss куда именно поставить надо? В начало, вконец? или как то иначе?

     
    • Юрий Немец

      Лучше всего в самый конец и перед этим поставить комментарий, чтобы потом знать что удалить, если что-нибудь пойдет не так:

      /*здесь напишите понятный для себя комментарий*/

       

       
  • ИГорь

    Кто-нибудь разобрался с жумлой? Пробовал на разных шаблонах, выводит в лучшем случае текст. Пробовал и с модулем и со статьей. Хром при просмотре кода часть ксс зачеркивает. Вот такой код

     -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
     
    • Юрий Немец

      Здравствуйте, Игорь!

      Если выводит текст, значит неправильно подключили стили.

      Хром зачеркивает, потому что ему другие свойства с префиксами не нужны, а другие браузеры будут использовать строчку с соответствующим префиксом.

       
      • ИГорь

        Беру первый пример. В модуль вписал 2 суффикса  ch-item ch-img-1. Появилась овальная картинка и вываливающийся из нее текст. При добавлении суффикса ch-info вообще все исчезает.

        Может для джумлы какая-то хитрость есть, где недостаточно просто скопировать код в файл ксс? Я подозреваю, что какие-то дефолтные могут мешать нормально выводить картинки. Хром при просмотре кода показывает, что все на месте

         
  • ИГорь

    Дело не в джумле. Сделал простую html страницу, в тело вставил html код. Подключил файл ксс, который скачал, вставил картинки тоже из архива. В итоге у меня картинка стала овальной и растянулась на всю страницу. Вернее картинка не растянулась а повторяется и по вертикали по горизонтали. При наведении происходит нужный эффект, то текст вылетает из картинки в верхний левый угол. Где я мог накосячить?

     
    • Юрий Немец

      Игорь, внимательно проверьте все классы в HTML и структуру, а затем файл стилей.

       
      • ИГорь

        Я исходники скопировал, как они есть. Возможно из-за недостатка знаний что-то в html упустил. Вот такой код у меня 

        <html>

           <head>
                     <link rel="stylesheet" type="text/css" href="style.css">
           </head>

           <body>
                <section class="main">
            <ul class="ch-grid">
                <li>
                    <div class="ch-item ch-img-1">
                        <div class="ch-info">
                            <h3>Текст 1</h3>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="ch-item ch-img-2">
                        <div class="ch-info">
                            <h3>Текст 2</h3>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="ch-item ch-img-3">
                        <div class="ch-info">
                            <h3>Текст 3</h3>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
           </body>

        </html>

         
  • Кирилл

    Добрый день, Юрий! Спасибо за статью!! Есть один вопрос, как сделать эффект как у Вас? Я говорю про обводку изображения, как бы бордер, но только с изображением. Я мучался, мучался, но так и не получилось пришлось оставить так. http://itmag.es/1OuUI Я хочу сделать так, как у вас.. Изображение продолжается в окантовку http://itmag.es/A95w Спасибо заранее!

     
    • Юрий Немец

      Кирилл, это не изображение продолжается в окантовку, а просто сверху есть слой полупрозрачный по кругу. В статье он делается с помощью свойства:

      box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.1)

       

       
  • Роман

    Юрий, доброго дня! Спасибо за статью, все понятно и доходчиво!

    Возник вопрос. Если к примеру на лэндинге на одно странице я хочу использовать два разных эффекта в разных местах страницы, как быть в этом случае? Т.к. я настроил один эффект (демо 1), чуть ниже на странице я решил использовать другой эффект (демо 4) и когда я в хэдере прописываю путь к нужному css (там их теперь два), то первый эффект  (style1) летит, т.к. реагирует на добавленный путь к css (style4). Возможно ли на одной странице использовать несколько разных эффектов? Заранее благодарен!

     
    • Юрий Немец

      Здравствуйте, Роман!

      Конечно, вы можете использовать сколь угодно много данных эффектов на одной странице. Вам необходимо не полностью подключать файл стилей, а данные стили скопировать в свой файл стилей CSS.

       
  • Роман

    не получается. там много пресечений что в 1 что в 4 стилях. Пробовал из 4 поэтапно переносить стили в 1 css, а они сразу рушат стили у 1 и наоборот…

     
  • Роман

    как вариант может попробовать классы переиvеновать, и тогда подключить два стиля css

     
  • Роман

    да, все получилось! Добавил в новом стиле в классах единичку, теперь не пересекается по этой части

     
    • Юрий Немец

      Отлично!

       
    • Тимофей

      Привет, у меня возникла проблема, я хотел сделать чтобы этот эффект действовал не только на 1 контейнер, попробовал изменить все классы добавив "1" ко всем, не мог бы ты показать как именно нужно добавляет"1"(изменять имена классв)

      Спасибо!

       
  • Артём

    Добрый день. Начал учить css пару дней назад. Не могу разобраться куда подключать сам адрес изображения. Грубо говоря есть название картинки — detal.jpg . Что нужно прописать чтоб она использовалась в анимации? crying

     
    • Юрий Немец

      Добрый день, Артём!

      Вы скачали архив со всеми примерами? (если увидите структуру, поймете где подключаются изображения и как они расположены в папках). Архив с примерами находится в начале статьи.

      Вы все правильно написали, адреса изображений находятся в соответствующих файлах стилей. Для каждого примера свой файл стилей.

       
  • Олег

    На  Joomla Не работает, как ни старался, овальный круг и все!!! До этого пробовал со списками, тоже не работает, одна циферка га первом списке и все, может знающие и разберутся, а для новичков как то мутно  все. Возможно нужно и скрипт подцеплять т.к в скаченном архиве есть папка js.

     
  • susann1969

    Добрый день, Юрий!
    Попробовала переделать 4 эффект. Все получилось. Поменяла овал на прямоугольник, размер увеличила, вместо надписи поворачивает картинку. Единственное, что не получается, это задняя рамка. Она остается старого размера. Где исправить — не нашла. Не подскажете?

     
  • Димыч

    В css что-то происходит если наводишь курсор, а есть ли такой вариант чтобы элемент сам крутился? Или это уже яваскрипт?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *