Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Записи по метке: уроки

Отзывчивый аккордеон с помощью jQuery

Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального "аккордеона", плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию "аккордеонов", как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле "аккордеон", точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на jQuery или на чистом CSS3. ...

Коллекция модальных окон и форм

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

jQuery & CSS3 меню аккордеон с помощью CSS Menu Maker

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

Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3

Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали "мягкотелые", когда выпустили в ...

Адаптивные вкладки (табы) на CSS3

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

Вертикальное меню в стиле аккордеон CSS и jQuery

Различными блоками, менюшками выполненных в стиле "аккордеон", сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных исключительно на CSS. Сегодня хочу познакомить вас с ещё одним вариантом компактного, вертикального меню в стиле "аккордеон", которое отлично впишется в боковую колонку любого сайта. Работа меню основана на небольшом jQuery плагине в связке с ...

Как сделать простое адаптивное меню с помощью CSS3

Как сделать простое адаптивное меню с помощью CSS3

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

Привлекательные кнопки с помощью магии CSS3

Создать кнопки для сайта можно используя любой графический редактор ( Photoshop, Paint.Net, Gimp и др.), можно, не особо заморачиваясь по поводу изучения свойств CSS, воспользоваться специальными генераторами кнопок, благо таких инструментов выпущено предостаточно в последнее время. Меня больше привлекает возможность использования новых стандартов CSS3 при создании различных элементов дизайна современных сайтов, в том числе и возможность ...

Пример адаптивной верстки Портфолио с фильтрацией работ на jQuery

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

Адаптивный шаблон страницы ошибки 404

Страница ошибки 404 важна для любого сайта или блога, как и все его содержание. Без нее не обходится ни один мало-мальски приличный сайт имеющий хоть какое-то наполнение. Наверное каждому из вас частенько, при попытке зайти на какой-либо сайт, приходилось видеть страницу с сообщением об ошибке 404, вещающей о том, что ссылка, по которой вы сюда попали — нерабочая, т.е битая напрочь.

Создаем эффектные вкладки (табы) для сайта

Данная статья больше не актуальна в связи с тем, что в процессе применения были выявлены ряд существенных ошибок данного решения. Дабы восполнить нарисовавшийся пробел, замутил свою, более лёгкую и стабильную версию плагина для создания вкладок (табов) Dm-tabs.js   Растет армия пользователей использующих для серфинга в интернете различные мобильные устройства: iPhone, iPad, мобильные телефоны и т.д и т.п. Все эти современные гаджеты ...

Выводим твиты на любом сайте с помощью jQuery

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

Пример верстки контактной формы для сайта с помощью CSS3

Всем доброго времени суток! Контактна форма очень важный элемент любого сайта или блога. Удивительно, что оформлению форм обратной связи не уделяется должного внимания, за редким исключением, это стандартный набор полей ввода, обрамленные куцей рамкой и банальная кнопка "Отправить". В свое время, я опубликовал ряд статей посвященных контактным формам. В статье о стиле контактной формы, мы рассмотрели вариант верстки с использованием ...

Создаем всплывающую контактную форму для сайта

Все мы привыкли видеть контактные формы на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей ...
1 2 3 4 5
Рейтинг@Mail.ru