Как стать автором
Обновить
37
0
sitecreator @sitecreator

Пользователь

Отправить сообщение

Адаптивные фоновые изображения

Время на прочтение 3 мин
Количество просмотров 138K
Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.

Фиксированное соотношение сторон


Читать дальше →
Всего голосов 71: ↑62 и ↓9 +53
Комментарии 15

Базовые стили и полезные CSS-сниппеты

Время на прочтение 6 мин
Количество просмотров 146K


В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
Читать дальше →
Всего голосов 163: ↑118 и ↓45 +73
Комментарии 54

Адаптивные колонки

Время на прочтение 2 мин
Количество просмотров 32K
При создании колонок обычно приходится применять специальные CSS-классы к первому и последнему элементу. В этой статье рассказано о небольшом трюке, который упрощает верстку колонок, а также делает их адаптивными.

Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).

Недостатки использования классов для первого и последнего элементов


Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:

Читать дальше →
Всего голосов 56: ↑51 и ↓5 +46
Комментарии 35

CSS3-генераторы. Лучшее

Время на прочтение 2 мин
Количество просмотров 199K








Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

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

Надеюсь, для многих ноу-хау станет хорошим помощником в процессе веб-разработки.
Читать дальше →
Всего голосов 114: ↑104 и ↓10 +94
Комментарии 26

Загадка выпадающего списка «Амазона»

Время на прочтение 2 мин
Количество просмотров 191K
Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
Читать дальше →
Всего голосов 558: ↑548 и ↓10 +538
Комментарии 90

Новое для веб-дизайнера за сентябрь 2012

Время на прочтение 1 мин
Количество просмотров 68K
Сделал небольшую подборку новых полезных материалов для веб-дизайнеров за сентябрь 2012. Надеюсь, будет полезна хабровчанам.

Полезные сервисы


Easel.io — отличный сервис для прототипирования прямо в браузере.

Читать дальше →
Всего голосов 136: ↑132 и ↓4 +128
Комментарии 21

Теория цвета

Время на прочтение 2 мин
Количество просмотров 297K
Первое впечатление — это все. Пословица «По одежке встречают, по уму провожают» актуальна не только в жизни, но и в дизайне. Впечатление от дизайна состоит из множества факторов, и один из важнейших — это цвет.

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

Основные цвета (Primary Colors)




Основные цвета палитры — красный, желтый и синий. Если говорить об основных цветах на экранах различных устройств — это RGB, красный, зеленый и синий.
Читать дальше →
Всего голосов 186: ↑160 и ↓26 +134
Комментарии 84

UICloud: Самая большая база пользовательских интерфейсов

Время на прочтение 1 мин
Количество просмотров 34K


UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.
Всего голосов 163: ↑161 и ↓2 +159
Комментарии 40

Новое для веб-дизайнера за октябрь 2012

Время на прочтение 2 мин
Количество просмотров 70K
Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты


Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

Читать дальше →
Всего голосов 122: ↑114 и ↓8 +106
Комментарии 23

Комфортная работа с Юникодом

Время на прочтение 3 мин
Количество просмотров 9.2K
Цель заметки — показать один онлайновый сервис просмотра символов Юникода, поскольку в нём их удобно искать, и сравнить его с множеством похожих. Периодически бывает нужно найти среди множества текстовых символов, поддерживаемых некоторым шрифтом, те, которые наиболее точно передают мысль или отражают суть высказывания. Этим давно пользуются посетители различных соцсетей, где выразительные способности символов давно оценены и существуют руководства с перечислением сотни-другой интересных символов. Каких? Самых оригинальных, и, казалось бы, не нужных серьёзным разработчикам, для которых адресована данная статья: звёзды разных очертаний, стрелки, снеговики, часы, эмоции.

Разработчикам фронтенда бывают нужны символы для быстрого прототипирования страниц. Вместо того, чтобы потратить время на поиск или отрисовку символа, его возможно найти в шрифте, например, Arial или Helvetica и создать временный элемент интерфейса. Иногда нужно посмотреть и использовать символы редкого языка, иероглифы. Многообразие символов уже имеется в некоторых шрифтах некоторых ОС, остаётся «лишь» выбрать. В программах и самой ОС есть средства просмотра и выбора символов любого шрифта системы (пример). Но не всегда эти средства удобны и не всегда предоставляют нужную информацию. Становится нужен хотя бы один онлайновый сервис, чтобы взять, и быстро (попытаться) найти подходящее. Раньше помогал поиск таблиц юникода в интернете, но удручал их вид, редкость и слабая оформленность. И тут недавно появляется сервис, в котором создатели решили исправить ряд досадных интерфейсных недостатков поиска.
Что же это за чудо такое?
Всего голосов 24: ↑24 и ↓0 +24
Комментарии 6

Информация

В рейтинге
Не участвует
Откуда
Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность