Удивительно простой, но красивый CSS-эффект

    Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



    Демонстрация эффекта и процесс написания.

    Реализация крайне проста:
    <a href="#" class="one"></a>
    <a href="#" class="two"></a>
    <a href="#" class="three"></a>
    <br />
    <a href="#" class="yon"></a>
    <a href="#" class="goo"></a>
    <a href="#" class="rok"></a>
    <a href="#" class="ryk"></a>
    <br />
    <a href="#" class="x7"></a>
    <a href="#" class="x8"></a>
    <a href="#" class="x9"></a>
    


    CSS:
    body {
    	padding: 100px 20px;
    }
    
    a {
    	background-image: url(data:image/gif;base64,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);
    	background-position: 50% 50%;
    	background-repeat: no-repeat;
    	background-origin: border-box;
    	
    	display: inline-block; width: 100px; height: 100px;
    	border-width: 50px;
    	border-color: rgba(0,0,0,0);
    	
    	border-radius: 100%;
    	-moz-border-radius: 100%;
    	-webkit-border-radius: 100%;
    	
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	
    	-webkit-transition: 0.5s ease;
    	-moz-transition: 0.5s ease;
    	-ms-transition: 0.5s ease;
    	-o-transition: 0.5s ease;
    	transition: 0.5s ease;
    }
    
    a:hover {
    	border-width: 0;
    	border-color: rgba(0, 0, 0, 0.5);
    }
    
    .one{border-style: solid;}
    .two{border-style: dashed;}
    .three{border-style: dotted;}
    
    .yon {border: 50px solid rgba(0, 0, 0, 0.7);}
    .goo {border: 50px dashed rgba(0, 0, 0, 0.7);}
    .rok {border: 50px dotted rgba(0, 0, 0, 0.7);}
    .ryk {border: 50px double rgba(0, 0, 0, 0.7);}
    .yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}
    .goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}
    .rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}
    .ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}
    
    .x7, .x8, .x9 {
    	border-radius: 0;
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    }
    .x7 {border: 50px solid rgba(0, 0, 0, 0.7);}
    .x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}
    .x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}
    .x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}
    .x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}
    .x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}
    
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 31
      +3
      Действительно, чудесно!
      Временааа…
        0
        Знать бы где будет работать еще…
          +1
          это ж бордер… Насколько помню, были разночтения насчет него у разных броузеров… Тут вопрос освещен подробно
            +4
            Жаль в ие все неадекватно =(
            большой скрин
            image
              +19
              По-моему, Опера переплюнула ИЕ в этот раз (Opera 12.02 1578 x64):
                +2
                аналогично.
                Версия: 12.01
                  +9
                  Вы будете смеяться, но неправильна отрисовка ка раз в Хроме. Чтобы в этом убедиться, достаточно поменять время анимации с ,5 секунда на 5 секунд и внимательно посмотреть. В Опере не верно отрисовывается только последний вариант.
                    +1
                    Второй слева в среднем ряду — вылитый PacMan!
                      +1
                      IE 9.0.8 в этом деле мастер, его не переплюнешь ) вообщем под ним не работает ни один из вариантов…
                        0
                        считаю пора на сайтах выводить сообщение, об устаревшем браузере не только для IE 6, но и IE 9 =)
                          +2
                          «вы используете Internet Explorer, для работы с сайтом установите браузер»
                      +2
                      ЕМНИП, тут про неадекватность говорить не приходится, т.к. в стандарте про крайние случаи ничего не сказано.
                        +1
                        В 10 IE аналогично
                        0
                        здорово, особенно первые 3 варианта понравились в применении по клику на элемент (:active).
                        А по поводу Opera — действительно, 12.02 версия, все печально. Но не велика потеря.
                          0
                          А что именно печально? Вы можете сказать, каким стандартом регулируется поведение браузера в данной ситуации?
                          +9
                          Во всех движках ведет себя абсолютно по-разному :) Больше всего понравилось как в FF, в WebKit'е не так красиво…
                            +1
                            К слову, вы уже можете не писать вендорное правило -ms-transition — IE10 понимает беспрефиксное правило, само же вендорное правило использовалось лишь в IE10PP. caniuse.com/#search=transition
                              0
                              Эффект прекрасен (у меня в Файерфоксе), но я посмотрел в комментариях скриншоты из других браузеров и вздрогнул.
                                +3
                                А вот вы, Мицгол, лучше возьмите иные браузеры да и гляньте, как реально в них выглядит эффект. В частности, второй эффект в Опере гораздо интереснее (в файерфоксе он, почему-то, совпадает с первым). Ну и третий вариант у файерфокса от остальных тоже дюже отличается.
                                Хотя да, согласен, что качество обработки эффектов в разных браузерах доставляет… такое ощущение, что они все дюже в различных моментах ошибаются.
                                +5
                                О боже! Не показывайте это дизайнерам! (думалось, время свистелко-перделок на сайтах прошло, ан нет)
                                  +2
                                  Морально поддерживаю (по-другому не получается =)). Не могу представить себе ни одного сайта с подобным рюшечками, кроме как портфолио, где можно похвастаться, что так умеешь.
                                    +3
                                    Отчего бы не показать. Если дизайнер нормальный — придумает куда это можно применить. Если не нормальный — то это же самое на javascript, flash или анимированных гифах сделает. Дурное дело не хитрое.
                                      0
                                      Поздно, уже твитнул и разослал ссылку коллегам…

                                      P.S. Шучу, я слишком уважаю труд верстальщика что бы так выносить ему мозг ;)
                                    –2
                                    В сафари под маком последним не работает, даже хуже, чем на скриншотах выше.
                                      +1
                                      Вы еще людей под маком не видели — о работоспособности не может быть и речи.
                                        +2
                                        Позвольте не согласиться, работает и в Сафари, примерно на уровне Хрома — две пары эффектов совпадают. В Опере, конечно, выглядит забавнее всего. В фф анимируется вообще иначе, но наиболее плавно.
                                        +1
                                        Первый слева (в каждом из рядов) ещё ничего, остальные вызывают устойчивые ассоциации с 90-ми, когда на страничке каждого кулхацкера (на boom.ru или narod.ru, разумеется) просто обязательно должно было быть с десяток анимированных гифок и обязательно теги «blink» (для NN) или «marquee» (для IE).
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            А бегущая строка?
                                              +2
                                              marquee она и есть
                                              0
                                              А еще JS часы в строке состояния…

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое