Верстка \ Адаптивная верстка

Адаптация дизайна

От автора: Это – история того, чему мы научились во время переделки дизайна для нашего самого требовательного клиента — самих себя! В этой статье из собственного опыта обновления вебсайта нашего агентства я объясню, почему мы забросили отдельный мобильный сайт, и сделаю обзор процесса создания нового адаптивного дизайна.

У себя в Cyber-Duck на протяжении уже нескольких лет мы делали сразу и адаптивные вебсайты, и адаптивные мобильные сайты. Оба варианта, конечно, имеют свои «за» и «против». На отдельном мобильном вебсайте есть возможность приспосабливать к контексту своих пользователей содержимое и даже взаимодействие, тогда как адаптивный вебсайт означает лучшее контентное равенство для пользователей и поддержку единственного вебсайта.

Продолжить чтение

Верстка \ Адаптивная верстка

Создание трехуровневого адаптивного выпадающего меню

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

Продолжить чтение

Верстка \ HTML&CSS

10 CSS селекторов, без которых не следует верстать

От автора: Каждый раз при использовании CSS мы применяем селекторы. Но, несмотря на это, селекторы CSS –один из самых пренебрегаемых разделов спецификации.

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

Продолжить чтение

Верстка \ Статьи по верстке

Подсказки: применение видео в качестве фонов

От автора: Итак, вы видели в сети видеоролики, используемые в качестве фонов, и думали: «Как это сделать?». Основная проблема тут – добиться того, чтобы ролик закрыл весь экран. Обычно при установке видео оно масштабируется в соответствии с соотношением размеров, что значит, оно не сможет закрыть весь фон. Но не беспокойтесь, потому что я здесь для того, чтобы сопроводить вас в вашем захватывающем квесте к свободе фонового видео. Читайте, юный воин.

Продолжить чтение

Верстка \ CSS 3

Определение поддержки свойств с помощью @supports CSS

От автора: С момента своего возникновения браузерная поддержка CSS3 была непостоянной, выполнение поддержки свойств не просто хорошая идея, а лучшая практика.

Хотя такая проверка обычно делается с помощью JavaScript, было бы идеально проводить ее внутри CSS, и вот где @supports выходит на первый план. Правило CSS @supports дает нам простое и чистое определение возможностей браузера, которое не полагается на другие техники, и работает даже при отключенном JavaScript’е.

Продолжить чтение

Верстка \ HTML&CSS

Применение min-width к тянущимся изображениям

От автора: существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.

Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.

Продолжить чтение

Верстка \ HTML&CSS

Семь методов центрирования с помощью CSS

От автора: Центрирование элементов HTML на веб-странице кажется простым делом. Иногда это действительно так… но сложные разметки часто исключают некоторые решения, заставляя веб-разработчиков работать без сетки.

Продолжить чтение

Верстка \ HTML&CSS

Настройка подзаголовков с помощью CSS

От автора: Подзаголовки – это типографские компоненты, которые организуют для читателя структуру содержимого, обеспечивая краткий обзор последующего содержимого. Мы можем пользоваться ими как точками привлечения визуального внимания или просто как вспомогательной навигацией, постепенно раскрывающей содержимое. Однако представляемые браузером стили подзаголовков по умолчанию могут казаться слишком общими. Если вам хочется некоторого разнообразия, то интересных эффектов можно добиться при помощи CSS.

Продолжить чтение

Верстка \ Адаптивная верстка

Как бесплатно протестировать адаптивный дизайн

От автора: «Прекрати менять размер этого браузера, он уже скоро сотрется!» Как часто вы это слышите? Ну, ладно, может и не так уж часто, но если вы разрабатываете адаптивные веб-сайты, то знаете, о чем я говорю: при каждом редактировании DOM или CSS вы таскаете туда-сюда край браузера, тестируя изменения и отыскивая неточности.

В общем, по большей части такие усилия – это попытка имитировать размеры экрана разных устройств.

Продолжить чтение

Верстка \ HTML&CSS

Создание вкладок (табов)

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

Библиотека jQuery UI предлагает нам виджет Табы (http://jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

Продолжить чтение