Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…
Читать полностью »
Рубрика «css» - 122
Способы создания navicon
2013-07-30 в 7:58, admin, рубрики: css, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: адаптивный дизайнNavicon — это иконка для появляющегося меню на адаптивных сайтах при просмотре на мобильных устройствах. Обычно представляет собой три горизонтальный полоски. Пример можно видеть на множестве сайтов, например:
Существует несколько способов создания такой иконки. Ниже представлены несколько.Читать полностью »
Mojo Share — все социальные кнопки на CSS3 с иконочным шрифтом в одном месте
2013-07-30 в 7:46, admin, рубрики: buttons, css, css3, less, веб-дизайн, Веб-разработка, Кнопки социальных сетей, метки: buttons, css, css3, less, Кнопки социальных сетей Доброго времени суток уважаемые читатели. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисов хотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.
Сейчас в проекте более 40 векторных иконок. Все кнопки построены на CSS3 с использованием градиентов из фирменных цветов каждого отдельного сервиса. Плюс несколько стилистических классов, определяющих дизайн кнопки. А пользоваться этим удобно, потому что файл стилей на LESS.
Анимация логотипа сайта
2013-07-29 в 20:19, admin, рубрики: css, usability, анимация, интерфейсы, лого, метки: css, анимация, лого Читаю книгу Джефа Раскина «Интерфейс» и хочется обсудить идеи, которые приходят во время чтения.
Первая идея об анимации на сайтах.
Анимация нужна всем элементам, которые что-то делают. Ссылка меняет цвет при наведении, а фотография, которую можно увеличить по клику, даёт знать о себе иконкой, фоном или текстом, в общем анимацией.
Анимированный логотип Дропбокса
Читать полностью »
CSS-маски для hover-эффекта
2013-07-29 в 9:35, admin, рубрики: css, hover, веб-дизайн, Веб-разработка, эффекты, метки: css, hover, эффекты 
На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.Читать полностью »
Чертежи в SVG формате. Часть 5. — Черновик стандарта (обновляется)
2013-07-29 в 6:30, admin, рубрики: cad, cad online, CAD/CAM, css, javascript, jquery plugin, svg, Веб-разработка, векторная графика, сапр, метки: cad, cad online, css, javascript, jquery plugin, svg, векторная графика, сапр В "Чертежи в SVG формате. Часть 4 — Черновик стандарта (обновляется)" приведён пример рисования размеров. В продолжении рассмотрим использование JavaScript и сравним файлы чертежей в разных форматах.
Читать полностью »
Грамотное адаптивное выравнивание шапки сайта
2013-07-28 в 16:36, admin, рубрики: css, header, justify, веб-дизайн, Веб-разработка, выравниваниеЗачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.
Ниже описан лаконичный способ решения этой проблемы.Читать полностью »
Адаптивный поиск с фильтром
2013-07-26 в 10:34, admin, рубрики: css, адаптивный дизайн, веб-дизайн, Веб-разработка, дизайн, паттерны, поиск, фильтры, формыПеревод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".
Паттерны дизайна — очень полезная штука, особенно в адаптивном дизайне. Рассмотрим пример: на большом экране в блоке со вкладками по ширине помещается много табов, однако на мобильном устройстве верстка съедет. Решение — использование специального паттерна дизайна, который сжимает все табы в выпадающие пункты.
Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:
Основные ошибки при разработке адаптивного дизайна
2013-07-24 в 16:07, admin, рубрики: css, адаптивный дизайн, веб-дизайн, Веб-разработкаАдаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология. Ниже собраны самые частые ошибки, допускаемые при разработке адаптивного сайта, своеобразный чек-лист.
Скрывать контент
Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства. Мобильные пользователю хотят видеть тот же контент и функционал, что и пользователи десктопов. Нужно проектировать интерфейс так, чтобы по возможности помещалось все.Читать полностью »
Адаптивное меню с поддержкой retina
2013-07-22 в 13:40, admin, рубрики: css, веб-дизайн, Веб-разработка, меню, навигация, ретинаВ этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.
