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

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

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

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

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

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

Адаптивное модальное окно строго по центру

Как сделать стопроцентно адаптивное модальное окно на чистом CSS, которое к тому же выводилось строго по центру, и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, ...

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

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

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

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

Доработал стили для панели постраничной навигации

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

Набор стилей для формирования постраничной навигации сайта на CSS3

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

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

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

Создаем многоуровневое горизонтальное меню с эффектом анимации на CSS3

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

Модальные всплывающие окна с помощью CSS3 без Javascript

Модальные всплывающие окна с помощью CSS3 без Javascript В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3. Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, ...
1 2 3 4
Рейтинг@Mail.ru