Наташа Клевер
Веб-дизайн / Тренды
10-05-2012
Здесь представлены мануалы по созданию очень красивых и удобных меню навигации. Причем это не только традиционные горизонтальные и вертикальные меню, но также и необычной круглой формы, и в виде функциональных закладок или табов. Отдельного внимания заслуживают интересные динамические эффекты, сделанные с размахом и выдумкой. Несомненно, такое меню сделает сайт броским и запоминающимся. Очень красиво смотрятся раскрывающиеся меню-аккордеоны и целые блоки-подменю. Есть меню с возможностью комбинирования цветовой гаммы.
Представляю очередную тематическую подборку мануалов по HTML5 и CSS3, которая сегодня посвящена исключительно визуальным графикам и диаграммам. Наглядное представление информации, однозначно, легче воспринимается зрителем в плане усвоения и восприятия. Графики бывают разные. Это может быть гистограмма а виде цветных полосок за значениями на шкале координат. Или круговая диаграмма с полями, соответствующими значениям переменных. Или это просто линейный график и эффектным анимационным эффектом. В общем, визуальное разнообразие радует возможностью выбора.
Итак, самые стильные элементы в оформлении интерфейсов из увиденных мной в феврале. Парад открывает действительно впечатляющая админ панель в классическом сочетании ведущего серого и цветных активных элементов. Прямо эстетическое удовольствие какое-то. Далее светло-серая гамма в стиле Ютуба для следующего интерфейса. Потом симпатичное оформление профиля в светло-голубых и кофейных тонах. А такую форму для ввода логина и пароля я сам в первый раз вижу. Прикольно. Впрочем, классический стиль оформления таких блоков ничуть не проигрывает. Ну а красные угловые флажки, безусловно, относятся к моим любимчикам.
В этой подборке я собрала CSS3 мануалы по созданию динамического блока Related Posts, сложенной стопки листов бумаги, треугольников, кнопки с иконками, угловой ленты и эффекта боке. Также интересно будет узнать как стильно оформить галерею картинок, сделать эффект смены страницы, анимированное меню и контент-слайдер. Очень интересен динамический эффект разноцветного текста, поляроидного слайдера и анимированного чека с ценой, реагирующего на нажатие мышкой. Напоследок припасен вертикальный аккордеон и динамическое оформление цитаты.
Давайте посмотрим, какие новые приемы и способы изобрели волшебники CSS3 за последнее время и как это все выглядит на практике. Сначала вдохновимся интересным эффектом с текстом, слайдшоу со всплывающими предпросмотрами и фильтрами для картинок из галереи. Потом нас порадуют замечательный эффект для превьюшек картинок, полноразмерное слайдшоу для бэкграунда и всплывающий лайтбокс для галереи картинок. Далее следуют блюр-эффект, меню с эффектом прокрутки, объемные кнопки, эффектный таймер и виджет с текущими записями.
Как правило, контактная форма занимает на сайте отдельную соответствующую страничку или же скромно располагается в футере. В любом случае, контактная форма – это удобное средство коммуникации и взаимодействия на сайте. В представленных ниже уроках подробно рассказано как можно разнообразить этот важнейший элемент на веб-сайте с помощью технологий HTML5 и CSS3. Все контакт формы отличаются друг от друга количеством и содержанием функциональных полей, различным оформлением на любой вкус, ну и, конечно, степенью исполнительской сложности.
Итак, с наступлением нового года мы опять будем пытаться заглянуть в будущее и понять, какие же дизайнерские тренды будут востребованы в наступившем году. Некоторые тенденции уже годами стабильно находятся в числе хедлайнеров и используются дизайнерами с очевидным постоянством. Например, большая фотография на фоне, крупный активный шрифт или использование векторного персонажа. Некоторые заявили о себе совсем недавно, например фиксированное меню или многоколоночное меню. Ну а некоторые тренды прислушиваются к техническому прогрессу и идут в ногу с ним.
Первым среди представленных CSS мануалов в этой подборке идет очень необычный анимированный эффект с текстом. Даже не верится, что запросто можно сделать такую анимированную типографику. Далее идет вполне обычная карусель из картинок с предпросмотрами. Меню-аккордеон мне очень нравится как элемент дизайна. Здесь тоже можно посмотреть, как его сделать. Следующие на очереди два вида меню с различными эффектами и эффект навигации с кругом. Больше всего мне в этой подборке нравятся анимированные кнопки с призывам подписаться. Очень неплохо смотрятся оптический zoom для картинок и текста, а также меню с динамическим маркером-магнитом.
Вплывающая подсказка (tooltip) на сайте это довольно симпатичный элемент оформления. Причем внешний вид такой всплывающей подсказки можно сделать очень даже привлекательным и нетривиальным. Во-первых, можно настроить форму всплывающего контейнера, его цвет и размер. Во-вторых, можно запросто управлять содержимым всплывающей подсказки, добавляя туда различные элементы и блоки по своему усмотрению. Ниже представлены подробные мануалы как это можно сделать с помощью технологии CSS3. Каждый урок имеет наглядное демо того, что в итоге получится.
Слайдер представляет собой великолепный инструмент для ротации и представления картинок на сайте. То есть, это небольшой блок, как правило вверху страницы или в сайдбаре, где посредством меняющихся картинок посетителя знакомят с самыми интересными материалами на сайте. Демонстрация картинок может сопровождаться небольшим сопроводительным текстом. Также у слайдера есть небольшая навигация в виде управляющих стрелок, динамических маркеров и предпрсмотров картинок. Размер слайдера также может регулироваться от совсем маленького до полноразмерного экрана.
ВП шаблон на продажу - 950 руб.