Верстка \ HTML&CSS

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

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

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

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

Верстка \ Препроцессоры css

Начинаем работать с препроцессором Sass

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

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

Верстка \ CSS 3

Эффект плавного изменения размера с помощью CSS3

От автора: обращали когда-нибудь внимание, что при изменении размера окна браузера в открытом Gmail (или Asana, или других сайтов) элементы экрана автоматически изменяют свой размер с плавной анимацией? Такое можно сделать с помощью JavaScript’а или jQuery, а можно – с применением переходов CSS3 и селекторов @media.

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

Верстка \ HTML&CSS

Псевдоклассы и переходы для ссылок и кнопок

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

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

Верстка \ HTML&CSS

Многоуровневое выдвижное меню

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

Сегодня мы хотим поделиться с вами еще одним экспериментальным меню. Конечно, вы уже знакомы с так называемой off-canvas-навигацией (скрытой и открывающейся по требованию, например, при нажатии на кнопку) в мобильных приложениях и его реализацией для адаптивных вебсайтов вроде этого, созданного Дэвидом Бушелом (David Bushell). Мы пытались исследовать возможность создания вложенного многоуровневого меню, что могло оказаться весьма кстати для меню с большим количеством контента (такого, как навигация онлайн-магазинов). Результатом стало «выдвижное» меню, способное (теоретически) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается еще больше, при этом видимым остается кусочек родительского меню. На выбор – его можно оставить видимым, а можно убрать, в таком случае подменю просто закроет родительский элемент.

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

Верстка \ HTML&CSS

Изящный выскальзывающий футер сайта

От автора: в этом коротком учебнике мы собираемся с помощью небольшого количества CSS создать интересный выскальзывающий нижний колонтитул. Скачайте zip-файл, нажав выше кнопку download, откройте его в любимом редакторе кода и начните читать!

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

Верстка \ HTML&CSS

Применение пользовательских атрибутов данных и псевдоэлементов

От автора: Учебник о том, как (зло)употреблять пользовательские атрибуты данных и псевдоэлементы для создания привлекательных изображений-заголовков.

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

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

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

Меню как в Facebook’е (адаптивное)

От автора: несомненно, адаптивная технология становится все более популярной. Она позволяет нам сэкономить время при разработке дизайна, предназначенного для применения на множестве устройств: от мобильных до широкоэкранных компьютеров. Не нужно разрабатывать отдельные версии сайта для каждого формата (устройства). Сегодня мы создадим новое адаптивное меню, которое выглядит, как в facebook’е. Для его создания не понадобится javascript, все выполняется с помощью одного CSS3 (для IE7-IE10, Firefox, Opera, Safari, Chrome и iPad/iPod/iPhone).

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

Верстка \ HTML&CSS

Placehold – быстрое добавление картинок

От автора: в этом уроке я хотел бы поделиться с вами инструментом, который без сомнения может пригодиться каждому верстальщику. Это сервис PLACEHOLD.IT

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

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

Верстка \ HTML&CSS

Эффекты загрузки элементов сетки с помощью анимации CSS

От автора: вдохновляемся эффектами загрузки элементов сетки с помощью анимации CSS.

Сегодня мы хотели бы поделиться с вами эффектами загрузки элементов сетки. Идея в том, чтобы показывать элементы в сетке с анимацией, когда те оказываются в окне просмотра. Эти возможности бесконечны и мы хотели бы немного вдохновить вас. Некоторые эффекты взяты из великолепных эффектов прокрутки CSS3 Хакима эль Хаттаба (Hakim El Hattab), а идея навеяна мозаичной анимацией, подсмотренной в приложении Google Plus.

Так как Masonry является популярной библиотекой разметки сеток, мы подумали, что в этом демо-примере использовать ее было бы неплохо. Если хотите применить другую, или вообще обойтись без библиотеки, вам придется удалить инициализацию из скрипта и отрегулировать селекторы и т.д. Это очевидно.

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