Search
Write a publication
Pull to refresh
37
0
sitecreator @sitecreator

User

Send message

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

Reading time3 min
Views141K
Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

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

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


Читать дальше →

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

Reading time6 min
Views151K


В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
Читать дальше →

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

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

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

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


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

Читать дальше →

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

Reading time2 min
Views199K








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

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

Надеюсь, для многих ноу-хау станет хорошим помощником в процессе веб-разработки.
Читать дальше →

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

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



Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
Читать дальше →

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

Reading time1 min
Views68K
Сделал небольшую подборку новых полезных материалов для веб-дизайнеров за сентябрь 2012. Надеюсь, будет полезна хабровчанам.

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


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

Читать дальше →

Теория цвета

Reading time2 min
Views299K
Первое впечатление — это все. Пословица «По одежке встречают, по уму провожают» актуальна не только в жизни, но и в дизайне. Впечатление от дизайна состоит из множества факторов, и один из важнейших — это цвет.

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

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




Основные цвета палитры — красный, желтый и синий. Если говорить об основных цветах на экранах различных устройств — это RGB, красный, зеленый и синий.
Читать дальше →

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

Reading time1 min
Views35K


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

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.

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

Reading time2 min
Views71K
Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

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


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

Читать дальше →

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

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

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

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Date of birth
Registered
Activity