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

В состоянии постоянного подключения...
Главная » Архив за 2015 год

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

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

4 простых hover-эффекта для кнопки на чистом CSS

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

Эффект пульсации при клике с помощью CSS3 и jQuery

Материальный дизайн (Material Design) от компании Google, в котором анимации не просто оживляют интерфейс, но и представляют пользователю, что происходит. Завораживающие идеи о трехмерном пространстве не оставили равнодушными большую часть сообщества веб-разработчиков и дизайнеров всех мастей. Фрейморки использующие принципы материального дизайна выходят в свет один за одним и используются не только для унификации интерфейсов приложений ОС ...

Плавное подчёркивание ссылки при наведении

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

Бесплатные раздачи от Envato в августе 2015

Очередная порция бесплатных ресурсов от торговой площадки EnvatoMarket предоставленная для свободного скачивания в августе месяце 2015 года. Давайте вместе пробежимся по всем продуктам, которыми с барского плеча, порадовали буржуины своих пользователей на этот раз. Как всегда, халявный набор состоит из 8-и продуктов для веб-разработки, дизайна и программирования. В августовском пакете представлены: блоговая тема Wordpress, игровая слот-машина ...

Набор правил CSS для формирования уведомлений

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

Новый видеокурс о работе в фреймворке CakePHP

      «Видеокурс о работе в фреймворке CakePHP» снят с продаж! Каталог курсов: webformyself.com С Уважением, Андрей . Буду всем признателен, если поддержите проект - добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

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

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

Фиксированные подписи к изображениям

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

15 Адаптивных jQuery плагинов Lightbox

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

CSS — Макет Контактной Формы

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

Bamboo Элегантная тема для блогов WordPress

Bamboo Элегантная тема для блогов WordPress Продолжаем знакомиться с последними новинками крупнейшего распространителя тем оформления Wordpress Themeforest. Сегодня хочу представить вам, великолепную тему премиум-класса для персональных блогов, работающих на движке Wordpress. Bamboo - Простая, с лёгким налётом минимализма, элегантная тема, отлично подойдёт для оформления динамично развивающегося личного блога. Тема Bamboo настолько гибкая в настройках, что её можно использовать для ...

5 Вариантов одного меню аккордеон

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

Фон в виде диагональной сетки на CSS

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

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

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

Набор стилей css для создания кнопок

Набор стилей css для создания кнопок Пару месяцев назад делал простенький шаблон на заказ, использовал отдельные элементы фреймворков LumX и Materialize. В частности из LumX выделил в отдельный набор классы для создания динамичных кнопок. Отсёк всё ненужное(исключительно для меня), разбавил шрифт-иконками от Font Awesome и получился, вполне себе автономный, небольшой наборчик стилей, с помощью которого можно быстро интегрировать на страницы сайта, довольно симпатичные кнопки. ...

Cikonss — Библиотека иконок на чистом CSS

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

Фон в виде шахматной доски на чистом CSS3

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

Выделение внешних ссылок с помощью CSS

Выделение внешних ссылок с помощью CSS При написании статей мы так или иначе нет-нет да используем ссылки на внешние сайты, это могут быть ссылки на первоисточники, различные веб-приложения, каталоги и т.д. Большинство из нас никак не выделяет внешние ссылки, чаще ограничиваясь атрибутом target="_blank" в ссылке, определяющим открытие этой самой ссылки в новом окне, ну, или же стандартные подсказки через атрибут title. Давайте рассмотрим простейший пример того, как с помощью ...

Liveweave — Новый онлайн-редактор HTML5, CSS3 и JavaScript

Давно прошли те времена, когда весь инструментарий веб-дизайнеров и разработчиков ограничивался только лишь специализированными десктопными приложениями. Времена настали новые, интересные, в интернетах, от года в год, стало появляться большое количество различных веб-приложений и площадок, существенно облегчающих жизнь разработчиков. В том числе, нам стали доступны множество онлайновых редакторов, предоставляющих готовую среду для написания и ...
1 2
Рейтинг@Mail.ru