Только CSS: сообщение, выпадающее сверху экрана

В данном уроке мы разберемся, как сделать средствами CSS выскакивающее сверху окна браузера сообщение, которое скрывается через определенное время.

Делаем простой div:

    <div id="note">
        Текст сообщения будет написан здесь.
    </div>

Затем задаем для него стили и помещаем вверх экрана:

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

Определим анимацию, которая будет скрывать наше сообщение выше области просмотра и выводить его на короткое время.

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

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

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

Здесь 1.0s задержка перед запуском анимации. Сообщение, которое появляется не сразу, а с задержкой, является более заметным.

Добавим кнопку закрытия в наш код HTML:

    <div id="note">
        Текст сообщения будет написан здесь. <a id="close">[закрыть]</a>
    </div>

И придется использовать JavaScript, чтобы закрыть сообщение в тех браузерах, которые не поддерживают анимации и трансформации:

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

Никаких библиотек не используем. Остается только скрыть кнопку закрытия для поддерживающих анимации браузеров:

.cssanimations.csstransforms #close {
  display: none;
}

Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/rseLzUwfYXU/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Только CSS: сообщение, выпадающее сверху экрана | | 2012-06-19 12:03:51 | | Статьи Web-мастеру | | В данном уроке мы разберемся, как сделать средствами CSS выскакивающее сверху окна браузера сообщение, которое скрывается через определенное время.Делаем простой div: Текст сообщения будет написан | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: