Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание изображения HAL 9000 c использованием только CSS

15 марта 2014 | Опубликовано в css | 2 Комментариев »

Этот урок по созданию изображения HAL 9000 покажет вам, какие широкие возможности предоставляет современный CSS и как вы можете использовать эти методы в своей работе. HAL 9000 — это вымышленный компьютер из цикла произведений «Космическая одиссея» Артура Кларка. HAL 9000 также может быть отличной кнопкой уведомлений для веб-приложений. В этом уроке мы расскажем, как создать HAL 9000 с нуля, используя только CSS. Давайте приступим.

 

 

Демонстрация работы – Скачать исходный код

Создание HAL 9000

Давайте начнем с корпуса HAL 9000. Мы использовали простой градиентный фон, чтобы создать гладкий корпус HAL 9000. Рамка и линза — сложные части. Мы использовали отдельный блок для рамки вместо того, чтобы использовать свойства границы, чтобы можно было добавить фону рамки стиль градиента, который создает глубину. Для бликов света и теней на рамке мы использовали сочетание нескольких слоев тени блока, что создало правдоподобную поверхность.

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

Вы можете посмотреть на пример кода ниже:

CSS

notification {
    background: #2D2A2B;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#494852), to(#2A2A30));
    background-image: -webkit-linear-gradient(#494852, #2A2A30);
    background-image: -moz-linear-gradient(#494852, #2A2A30);
    background-image: -o-linear-gradient(#494852, #2A2A30);
    background-image: linear-gradient(#494852, #2A2A30);
    box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 0px rgba(255,255,225,0.25),0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #231F20;
    width: 100px;
    height: 100px;
}
.metal {
    width: 70%;
    height: 70%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    background: #417d9f;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#43637c), to(#2c3c4b));
    background-image: -webkit-linear-gradient(#43637c, #2c3c4b);
    background-image: -moz-linear-gradient(#43637c, #2c3c4b);
    background-image: -o-linear-gradient(#43637c, #2c3c4b);
    background-image: linear-gradient(#43637c, #2c3c4b);
    border-top: 2px solid #b8ccd7;
    margin: 15%;
    padding: 5px;
    box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -moz-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -webkit-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6);
}
.light {
    position: relative;
     border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    background: #ffe913;
    background: #920000;
    background: -moz-radial-gradient(center, ellipse cover, #920000 39%, #2d0408 67%, #000000 71%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(39%,#920000), color-stop(67%,#2d0408), color-stop(71%,#000000));
    background: -webkit-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%);
    background: -o-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%);
    background: -ms-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%);
    background: radial-gradient(ellipse at center, #920000 39%,#2d0408 67%,#000000 71%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#920000', endColorstr='#000000',GradientType=1 );
}

.glowing-red {
    position: absolute;
    background: #F11A08;
    width: 45%;
    height: 45%;
    margin:28%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 15px #F11A08;
    -moz-box-shadow: 0 0 15px #F11A08;
    -webkit-box-shadow: 0 0 15px #F11A08;
}
.glowing-yellow {
    background: #FFE913;
    width: 50%;
    height: 50%;
    margin:24%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 5px #FFE913;
    -moz-box-shadow: 0 0 5px #FFE913;
    -webkit-box-shadow: 0 0 5px #FFE913;
}

HTML

<div class="notification">
    <div class="metal">
        <div class="light">
            <div class="glowing-red">
                <div class="glowing-yellow"></div>
            </div>
        </div>
    </div>
</div>
  

Оживление HAL 9000

Теперь, когда мы создали HAL 9000, давайте оживим его с помощью анимации. Давайте начнем с того, что заставим желтые и красные части линзы светиться. Как вы можете видеть в коде ниже, мы определили два ключевых кадра анимации: мигание красным и мигание желтым. Эти ключевые кадры определят, как будет происходить анимация. Каждый ключевой кадр увеличивает и уменьшает размер желтой и красной частей линзы, чтобы создать у HAL 9000 эффект свечения. Мы так же настроили анимацию так, чтобы она продолжалась бесконечно.

Так как Вы можете захотеть использовать HAL 9000 как кнопку уведомления, мы сделали так, чтобы эти анимации включались, только если у основного блока класса notification также был и класс active.

Вы можете посмотреть на пример кода ниже:

CSS

.notification {
    background: #2D2A2B;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#494852), to(#2A2A30));
    background-image: -webkit-linear-gradient(#494852, #2A2A30);
    background-image: -moz-linear-gradient(#494852, #2A2A30);
    background-image: -o-linear-gradient(#494852, #2A2A30);
    background-image: linear-gradient(#494852, #2A2A30);
    box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 0px rgba(255,255,225,0.25),0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #231F20;
    width: 100px;
    height: 100px;
}
.metal {
    width: 70%;
    height: 70%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    background: #417d9f;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#43637c), to(#2c3c4b));
    background-image: -webkit-linear-gradient(#43637c, #2c3c4b);
    background-image: -moz-linear-gradient(#43637c, #2c3c4b);
    background-image: -o-linear-gradient(#43637c, #2c3c4b);
    background-image: linear-gradient(#43637c, #2c3c4b);
    border-top: 2px solid #b8ccd7;
    margin: 15%;
    padding: 5px;
    box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -moz-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -webkit-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
}
.light {
    position: relative;
     border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    background: #ffe913;
    background: #920000; /* Для старых браузеров */
    background: -moz-radial-gradient(center, ellipse cover, #920000 39%, #2d0408 67%, #000000 71%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(39%,#920000), color-stop(67%,#2d0408), color-stop(71%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* IE10+ */
    background: radial-gradient(ellipse at center, #920000 39%,#2d0408 67%,#000000 71%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#920000', endColorstr='#000000',GradientType=1 ); /* для совместимости с горизонтальным градиентом в IE6-9 */
}

.glowing-red {
    position: absolute;
    background: #F11A08;
    width: 45%;
    height: 45%;
    margin:28%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 15px #F11A08;
    -moz-box-shadow: 0 0 15px #F11A08;
    -webkit-box-shadow: 0 0 15px #F11A08;
}

.glowing-yellow {
    background: #FFE913;
    width: 50%;
    height: 50%;
    margin:24%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 5px #FFE913;
    -moz-box-shadow: 0 0 5px #FFE913;
    -webkit-box-shadow: 0 0 5px #FFE913;
}

/* Определение активного состояния кнопки */
.notification.active .light{
    /* Добавление анимации для Hal9000 */
    animation: blink-red-shadow 2s infinite ease-in-out;
    -moz-animation: blink-red-shadow  2s infinite ease-in-out;
    -o-animation: blink-red-shadow  2s infinite ease-in-out;
    -webkit-animation: blink-red-shadow  2s infinite ease-in-out;
}
.notification.active .light .glowing-red{
    /* Добавление анимации для Hal9000 */
    animation: blink-red 2s infinite ease-in-out;
    -moz-animation: blink-red  2s infinite ease-in-out;
    -o-animation: blink-red  2s infinite ease-in-out;
    -webkit-animation: blink-red  2s infinite ease-in-out;
}
.notification.active .light .glowing-yellow{
    /* Добавление анимации для Hal9000 */
    animation: blink-yellow 2s infinite ease-in-out;
    -moz-animation: blink-yellow  2s infinite ease-in-out;
    -o-animation: blink-yellow  2s infinite ease-in-out;
    -webkit-animation: blink-yellow  2s infinite ease-in-out;
}

/* Определение мигающей анимации для Hal9000 */
@-webkit-keyframes blink-red {
  from {
    box-shadow: 0 0 5px #F11A08;
    -moz-box-shadow: 0 0 5px #F11A08;
    -webkit-box-shadow: 0 0 5px #F11A08;
    width: 45%;
    height: 45%;
  }
  50% {
    box-shadow: 0 0 25px #ff6b5f;
    -moz-box-shadow: 0 0 25px #ff6b5f;
    -webkit-box-shadow: 0 0 25px #ff6b5f;
    width: 70%;
    height: 70%;
    margin:17%;
  }
  to {
    box-shadow: 0 0 5px #F11A08;
    -moz-box-shadow: 0 0 5px #F11A08;
    -webkit-box-shadow: 0 0 5px #F11A08;
    width: 45%;
    height: 45%;
  }
}

@-webkit-keyframes blink-red-shadow {
    from {
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
  }
  50% {
    box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
    -moz-box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
    -webkit-box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
  }
  to {
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
  }
}
@-webkit-keyframes blink-yellow {
  from {
    box-shadow: 0 0 5px #ffeb1c;
    -moz-box-shadow: 0 0 5px #ffeb1c;
    -webkit-box-shadow: 0 0 5px #ffeb1c;
  }
  50% {
    box-shadow: 0 0 25px #fff;
    -moz-box-shadow: 0 0 25px #fff;
    -webkit-box-shadow: 0 0 25px #fff;
  }
  to {
    box-shadow: 0 0 5px #ffeb1c;
    -moz-box-shadow: 0 0 5px #ffeb1c;
    -webkit-box-shadow: 0 0 5px #ffeb1c;
  }
}

HTML

<div class="notification active">
    <div class="metal">
        <div class="light">
            <div class="glowing-red">
                <div class="glowing-yellow"></div>
            </div>
        </div>
    </div>
</div> 

Взаимодействие с HAL 9000

Теперь, когда мы оживили HAL 9000, давайте создадим интерактивную анимацию. Давайте добавим интересную анимацию отражения для моментов, когда пользователь наводит указатель мыши на HAL 9000. Чтобы создать такой эффект, воспроизводящий отражение источников света на блестящей поверхности, мы добавили новый блок, названный hover-effect.

Вы можете увидеть в примере или в коде ниже, что мы применили плавный переход свойства ширины границы, уменьшив ширину границы с 15 пикселей до 0, чтобы создать анимацию отражения.

Вы можете посмотреть на пример кода ниже:

CSS

.notification {
    background: #2D2A2B;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#494852), to(#2A2A30));
    background-image: -webkit-linear-gradient(#494852, #2A2A30);
    background-image: -moz-linear-gradient(#494852, #2A2A30);
    background-image: -o-linear-gradient(#494852, #2A2A30);
    background-image: linear-gradient(#494852, #2A2A30);
    box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 0px rgba(255,255,225,0.25),0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #231F20;
    width: 100px;
    height: 100px;
    position: relative;
}
.metal {
    width: 70%;
    height: 70%;
    margin: 15%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    background: #417d9f;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#43637c), to(#2c3c4b));
    background-image: -webkit-linear-gradient(#43637c, #2c3c4b);
    background-image: -moz-linear-gradient(#43637c, #2c3c4b);
    background-image: -o-linear-gradient(#43637c, #2c3c4b);
    background-image: linear-gradient(#43637c, #2c3c4b);
    border-top: 2px solid #b8ccd7;
    padding: 5px;
    box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -moz-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
    -webkit-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
}
.light {
    position: relative;
     border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    background: #ffe913;
    background: #920000; /* Для старых браузеров */
    background: -moz-radial-gradient(center, ellipse cover, #920000 39%, #2d0408 67%, #000000 71%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(39%,#920000), color-stop(67%,#2d0408), color-stop(71%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #920000 39%,#2d0408 67%,#000000 71%); /* IE10+ */
    background: radial-gradient(ellipse at center, #920000 39%,#2d0408 67%,#000000 71%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#920000', endColorstr='#000000',GradientType=1 ); /* для совместимости с горизонтальным градиентом в IE6-9 */

}

.glowing-red {
    position: absolute;
    background: #F11A08;
    width: 45%;
    height: 45%;
    margin:28%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 15px #F11A08;
    -moz-box-shadow: 0 0 15px #F11A08;
    -webkit-box-shadow: 0 0 15px #F11A08;
}

.glowing-yellow {
    background: #FFE913;
    width: 50%;
    height: 50%;
    margin:24%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-shadow: 0 0 5px #FFE913;
    -moz-box-shadow: 0 0 5px #FFE913;
    -webkit-box-shadow: 0 0 5px #FFE913;
}

/* Определение активного состояния кнопки */
.notification.active .light{
    /* Добавление анимации для Hal9000 */
    animation: blink-red-shadow 2s infinite ease-in-out;
    -moz-animation: blink-red-shadow  2s infinite ease-in-out;
    -o-animation: blink-red-shadow  2s infinite ease-in-out;
    -webkit-animation: blink-red-shadow  2s infinite ease-in-out;
}
.notification.active .light .glowing-red{
    /* Добавление анимации для Hal9000 */
    animation: blink-red 2s infinite ease-in-out;
    -moz-animation: blink-red  2s infinite ease-in-out;
    -o-animation: blink-red  2s infinite ease-in-out;
    -webkit-animation: blink-red  2s infinite ease-in-out;
}
.notification.active .light .glowing-yellow{
    /* Добавление анимации для Hal9000 */
    animation: blink-yellow 2s infinite ease-in-out;
    -moz-animation: blink-yellow  2s infinite ease-in-out;
    -o-animation: blink-yellow  2s infinite ease-in-out;
    -webkit-animation: blink-yellow  2s infinite ease-in-out;
}

/* Определение мигающей анимации для Hal9000 */
@-webkit-keyframes blink-red {
  from {
    box-shadow: 0 0 5px #F11A08;
    -moz-box-shadow: 0 0 5px #F11A08;
    -webkit-box-shadow: 0 0 5px #F11A08;
    width: 45%;
    height: 45%;
  }
  50% {
    box-shadow: 0 0 25px #ff6b5f;
    -moz-box-shadow: 0 0 25px #ff6b5f;
    -webkit-box-shadow: 0 0 25px #ff6b5f;
    width: 70%;
    height: 70%;
    margin:17%;
  }
  to {
    box-shadow: 0 0 5px #F11A08;
    -moz-box-shadow: 0 0 5px #F11A08;
    -webkit-box-shadow: 0 0 5px #F11A08;
    width: 45%;
    height: 45%;
  }
}

@-webkit-keyframes blink-red-shadow {
    from {
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
  }
  50% {
    box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
    -moz-box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
    -webkit-box-shadow: inset 0 3px 0px #52352E, inset 0 5px 0 #312A25;
  }
  to {
    box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
    -webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
  }
}

@-webkit-keyframes blink-yellow {
  from {
    box-shadow: 0 0 5px #ffeb1c;
    -moz-box-shadow: 0 0 5px #ffeb1c;
    -webkit-box-shadow: 0 0 5px #ffeb1c;
  }
  50% {
    box-shadow: 0 0 25px #fff;
    -moz-box-shadow: 0 0 25px #fff;
    -webkit-box-shadow: 0 0 25px #fff;
  }
  to {
    box-shadow: 0 0 5px #ffeb1c;
    -moz-box-shadow: 0 0 5px #ffeb1c;
    -webkit-box-shadow: 0 0 5px #ffeb1c;
  }
}

/* Эффект взаимодействии при наведении указателя мыши */
.notification.active {
    cursor: pointer;
}
.notification.active .hover-effect {
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    border:15px solid rgba(184, 204, 215, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.notification:hover  .hover-effect {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border:0 solid rgba(184, 204, 215, 0.5)
} 

HTML

<div class="notification active">
    <div class="hover-effect"></div>
    <div class="metal">
      <div class="light">
          <div class="glowing-red">
              <div class="glowing-yellow"></div>
         </div>
     </div>
</div>

Демонстрация работы – Скачать исходный код

Заключение

И это все, мы создали интерактивное изображение для Вашего веб-сайта. Сочетание анимации отражения и эффекта свечения делает HAL 9000 отличной кнопкой уведомлений для веб-приложений. Надеемся, Вам понравился этот урок.

Автор урока Pete R.

Перевод Дежурка

Смотрите также:


�


Комментарии

  1. лекс
    22 марта 2014 в 23:56
    Thumb up Thumb down 0

    опера мини вообще не в курсе что такое CSS 2, 3.

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые