все самое интересное о веб-дизайне

Кнопки, эффект гаражной двери и другие CSS3 мануалы с примерами

08-10-2012

Кнопки, эффект гаражной двери и другие CSS3 мануалы с примерамиПервый мануал — это элегантное раскрывающееся ресторанное меню, далее — впечатляющий слайдер со сменяющимися полноэкранными видео. Симпатичные кнопки on/off всегда пригодятся при создании сайта. Очень интересен эффект динамической типографики с дымчатым эффектом. Эффект гаражной двери — это способ смены картинки на надпись в горизонтальном меню. Для тех, кто хочет добиться, чтобы текст обтекал картинку между столбцами поможет соответствующий мануал. А динамическая объемная тень — это не только сегодняшний тренд, но и стильный оформительский прием.

Прыгающий шар, параллакс-слайдер и другие CSS3 мануалы с примерами

04-09-2012

Прыгающий шар, параллакс-слайдер и другие CSS3 мануалы с примерамиЗа последнее время появились очень и очень интересные CSS мануалы с различными необычными фишками для сайта. Начнем с тройного объемного слайдера, эффекта при наведении на круги и оригинального лайтбокса. Далее мне очень понравилась идея стильного оформления цитаты. Симпатичный эффект раскрывающегося круга однозначно поразит посетителей вашего сайта. Очень необычно выглядит динамическое меню в виде палитры цветов. Сейчас модной тенденцией стала плавная постраничная прокрутка страниц вниз. Соответствующий мануал расскажет о том, как это сделать с помощью CSS.

20 мануалов по созданию меню навигации с помощью HTML5 и CSS3

10-05-2012

20 мануалов по созданию меню навигации с помощью HTML5 и CSS3Здесь представлены мануалы по созданию очень красивых и удобных меню навигации. Причем это не только традиционные горизонтальные и вертикальные меню, но также и необычной круглой формы, и в виде функциональных закладок или табов. Отдельного внимания заслуживают интересные динамические эффекты, сделанные с размахом и выдумкой. Несомненно, такое меню сделает сайт броским и запоминающимся. Очень красиво смотрятся раскрывающиеся меню-аккордеоны и целые блоки-подменю. Есть меню с возможностью комбинирования цветовой гаммы.

20 мануалов по созданию графиков и диаграмм с помощью HTML5 и CSS3

11-04-2012

20 мануалов по созданию графиков и диаграмм с помощью HTML5 и CSS3Представляю очередную тематическую подборку мануалов по HTML5 и CSS3, которая сегодня посвящена исключительно визуальным графикам и диаграммам. Наглядное представление информации, однозначно, легче воспринимается зрителем в плане усвоения и восприятия. Графики бывают разные. Это может быть гистограмма а виде цветных полосок за значениями на шкале координат. Или круговая диаграмма с полями, соответствующими значениям переменных. Или это просто линейный график и эффектным анимационным эффектом. В общем, визуальное разнообразие радует возможностью выбора.

Угловая лента, иконка-календарь, эффект боке и другие CSS3 мануалы с примерами

10-03-2012

Угловая лента, иконка-календарь, эффект боке и другие CSS3 мануалы с примерамиВ этой подборке я собрала CSS3 мануалы по созданию динамического блока Related Posts, сложенной стопки листов бумаги, треугольников, кнопки с иконками, угловой ленты и эффекта боке. Также интересно будет узнать как стильно оформить галерею картинок, сделать эффект смены страницы, анимированное меню и контент-слайдер. Очень интересен динамический эффект разноцветного текста, поляроидного слайдера и анимированного чека с ценой, реагирующего на нажатие мышкой. Напоследок припасен вертикальный аккордеон и динамическое оформление цитаты.

20 впечатляющих возможностей технологии CSS3 с мануалами за январь

10-02-2012

20 впечатляющих возможностей технологии CSS3 с мануалами за январьДавайте посмотрим, какие новые приемы и способы изобрели волшебники CSS3 за последнее время и как это все выглядит на практике. Сначала вдохновимся интересным эффектом с текстом, слайдшоу со всплывающими предпросмотрами и фильтрами для картинок из галереи. Потом нас порадуют замечательный эффект для превьюшек картинок, полноразмерное слайдшоу для бэкграунда и всплывающий лайтбокс для галереи картинок. Далее следуют блюр-эффект, меню с эффектом прокрутки, объемные кнопки, эффектный таймер и виджет с текущими записями.

20 мануалов по созданию контактных форм с помощью HTML5 и CSS3

16-01-2012

20 мануалов по созданию контактных форм с помощью HTML5 и CSS3Как правило, контактная форма занимает на сайте отдельную соответствующую страничку или же скромно располагается в футере. В любом случае, контактная форма — это удобное средство коммуникации и взаимодействия на сайте. В представленных ниже уроках подробно рассказано как можно разнообразить этот важнейший элемент на веб-сайте с помощью технологий HTML5 и CSS3. Все контакт формы отличаются друг от друга количеством и содержанием функциональных полей, различным оформлением на любой вкус, ну и, конечно, степенью исполнительской сложности.

20 впечатляющих возможностей технологии CSS3 с примерами за ноябрь

21-12-2011

20 впечатляющих возможностей технологии CSS3 с примерами за ноябрьПервым среди представленных CSS мануалов в этой подборке идет очень необычный анимированный эффект с текстом. Даже не верится, что запросто можно сделать такую анимированную типографику. Далее идет вполне обычная карусель из картинок с предпросмотрами. Меню-аккордеон мне очень нравится как элемент дизайна. Здесь тоже можно посмотреть, как его сделать. Следующие на очереди два вида меню с различными эффектами и эффект навигации с кругом. Больше всего мне в этой подборке нравятся анимированные кнопки с призывам подписаться. Очень неплохо смотрятся оптический zoom для картинок и текста, а также меню с динамическим маркером-магнитом.

20 мануалов CSS3 по созданию всплывающих подсказок на сайте

22-11-2011

20 мануалов CSS3 по созданию всплывающих подсказок на сайтеВплывающая подсказка (tooltip) на сайте это довольно симпатичный элемент оформления. Причем внешний вид такой всплывающей подсказки можно сделать очень даже привлекательным и нетривиальным. Во-первых, можно настроить форму всплывающего контейнера, его цвет и размер. Во-вторых, можно запросто управлять содержимым всплывающей подсказки, добавляя туда различные элементы и блоки по своему усмотрению. Ниже представлены подробные мануалы как это можно сделать с помощью технологии CSS3. Каждый урок имеет наглядное демо того, что в итоге получится.

Топ 20 популярных бесплатных слайдеров и ротаторов картинок

11-10-2011

Топ 20 популярных бесплатных слайдеров и ротаторов картинокСлайдер представляет собой великолепный инструмент для ротации и представления картинок на сайте. То есть, это небольшой блок, как правило вверху страницы или в сайдбаре, где посредством меняющихся картинок посетителя знакомят с самыми интересными материалами на сайте. Демонстрация картинок может сопровождаться небольшим сопроводительным текстом. Также у слайдера есть небольшая навигация в виде управляющих стрелок, динамических маркеров и предпрсмотров картинок. Размер слайдера также может регулироваться от совсем маленького до полноразмерного экрана.