Формирование сообщений с использованием CSS3 и jQuery
В наши дни интерфейс пользователя является решающим фактором, определяющим успех продукта или системы. Чтобы осчастливить посетителя, разработчики прилагают титанические усилия для формирования великолепного функционала и интерактивности дизайна.
Информационные сообщения представляют важную часть интерфейса пользователя и игнорировать их - просто преступление. Сообщения должны появляться всякий раз, когда посетитель выполняет важную операцию.
В данном уроке мы создадим отличные сообщения с помощью CSS3 и jQuery.
Типы сообщений
Ниже приводится список распространенных типов сообщений:
- Информация
- Ошибка
- Предупреждение
- Успех
Информация
Назначение данного типа сообщений - информировать пользователя в соответствующем стиле.
Ошибка
Когда операция прерывается ошибкой, пользователь должен знать об этом. Пример таких сообщений: “Данные не могут быть удалены.” или “Ваши установки не сохранились” и так далее.
Предупреждение
Данный тип сообщений предназначен для информирования пользователя о различных ситуациях, которые могут вызвать проблемы в дальнейшем.
Успех
Успешное завершение операции должно сопровождаться соответствующим сообщением.
Код HTML
<div class="info message"> <h3>Примите к сведению!</h3> <p>Простое информационное сообщение.</p> </div> <div class="error message"> <h3>Ой, произошла ошибка!</h3> <p>Пример сообщения об ошибке.</p> </div> <div class="warning message"> <h3>Предупреждение (последнее китайское)!</h3> <p>Тип сообщения с предупреждением.</p> </div> <div class="success message"> <h3>Поздравляю!</h3> <p>Сообщение об успешном завершении операции.</p> </div>
CSS
.message { -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; background-size: 40px 40px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)), color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; position: fixed; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); -webkit-animation: animate-bg 5s linear infinite; -moz-animation: animate-bg 5s linear infinite; } .info { background-color: #4ea5cd; border-color: #3b8eb5; } .error { background-color: #de4343; border-color: #c43d3d; } .warning { background-color: #eaaf51; border-color: #d99a36; } .success { background-color: #61b832; border-color: #55a12c; } .message h3 { margin: 0 0 5px 0; } .message p { margin: 0; } @-webkit-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } @-moz-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } }
Обратите внимание на свойство animate-bg
, которое анимирует фоновые диагональные полоски. Эффект будет виден только в браузерах семейства Webkit или Mozilla 5+.
Сообщения изначально скрыты. Для этого используется фиксированное позиционирование (значение absolute
используется только для IE6, так как он не поддерживает position:fixed
).
position: fixed; _position: absolute; /* только для IE6 */
jQuery
Определяем массив с типами сообщений:
var myMessages = ['info','warning','error','success'];
Следующая функция скрывает сообщение. Сообщения могут иметь высоту, которая будет изменяться динамически. Поэтому высота сообщений вычисляется, чтобы скрывать сообщения корректно.
function hideAllMessages() { var messagesHeights = new Array(); // В данном массиве хранится высота для каждого сообщения for (i=0; i<myMessages.length; i++) { messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); $('.' + myMessages[i]).css('top', -messagesHeights[i]); //Выводим элемент из окна просмотра } }
Функция showMessage
вызывается, когда документ готов.
function showMessage(type) { $('.'+ type +'-trigger').click(function(){ hideAllMessages(); $('.'+type).animate({top:"0"}, 500); }); }
После загрузки мы скрываем все сообщения: hideAllMessages()
. Затем для каждого триггера выводим соответствующее сообщение :
$(document).ready(function(){ // Изначально скрываем все hideAllMessages(); // Выводим сообщение for(var i=0;i<myMessages.length;i++) { showMessage(myMessages[i]); } // Когда пользователь нажимает на сообщение, скрываем его $('.message').click(function(){ $(this).animate({top: -$(this).outerHeight()}, 500); }); });
Готово!
Использование CSS3 открывает бесконечные перспективы для дизайна сообщений. Выше приведенный пример является одним из простых вариантов (без использования изображений).
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Y5VZrA2a3nk/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
"Я придерживаюсь простого правила: все дела этого дня должны быть сделаны в этот день". Герцог Веллингтон. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.