5 способов добавить динамики в ваш сайт

5 способов добавить динамики в ваш сайтМы уже не раз писали о новых возможностях CSS3 и HTML5. Так что хотелось бы сегодня просто добавить парочку трюков в нашу копилку,а именно некоторые стандартные эффекты, которые теперь можно описать только при помощи CSS. Все анимации корректно работают в последних версиях браузеров Firefox, Safari, or Chrome.

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

header {
    /* Основные стили*/
    background: black;
    color: white;
    height: 100px;
    position: relative;
}
@-moz-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}
@-webkit-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}
header {
    /* Основные стили */
    background: black;
    color: white;
    height: 100px;
    position: relative;
 
    /* Для браузера Firefox 4+ */
    -moz-animation-name: header-drop;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 1s;
 
    /* Для браузеров, которые поддерживают Webkit */
    -webkit-animation-name: header-drop;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: once;
    -webkit-animation-duration: 1s;
}

2. Изменения цвета фона изображения. Для этого эффекта нам необходимо изображение (к примеру, логотип), которое будет иметь прозрачный фон.

#logo {
/* Убедитесь в том, что вы установили фоновые цвета для тех браузеров, которые не поддерживают анимацию */
    background: red;
    -moz-animation-name: colour-change;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 30s;
}
 
/* Устанавливаем анимацию */
@-moz-keyframes colour-change {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}

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

.spinner {
    height: 10px;
    width: 10px;
    border: 10px solid #888;
    border-radius: 20px;
 
    -moz-animation-name: loading;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1s;
}
@-moz-keyframes loading {
    0% { border-top: 10px solid black; }
    25% { border-right: 10px solid black; }
    50% { border-bottom: 10px solid black; }
    75% { border-left: 10px solid black; }
    100% { border-top: 10px solid black; }
}

4. Подсвечивание  полей, которые должны были быть заполнены возможно только при помощи CSS? теперь необязательно подключать скрипты

input[type="text"].error {
    border: 1px solid #D11919;
    border-radius: 6px;
 
    -moz-animation-name: glow;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 500ms;
}
@-moz-keyframes glow {
    0% { box-shadow: 0 0 5px #D11919; }
    100% { box-shadow: 0 0 15px #D11919; }
}

5. Мигание подводки полей в случае, если возникла ошибка

form {
    background: #CCC;
    border: 1px solid #888;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    position: relative;
 
    -moz-animation-name: shakey;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 200ms;
}
@-moz-keyframes shakey {
    0% { left: -10px; }
    25% { left: 10px; }
    50% { left: -10px; }
    75% { left: 10px; }
    100% { left: 0px; }
}


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

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