Верстка \ HTML&CSS

50 фрагментов CSS полезных каждому дизайнеру

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

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

Верстка \ HTML&CSS

Подсказка: Помните о стилях альтернативного текста

От автора: атрибут alt внутри тэга img обеспечивает альтернативный контент для пользователей, которые не могут скачивать изображения, или тех, у кого они отключены. Мы все время пользуемся этим атрибутом, чтобы сделать свой контент более доступным, но вы задумывались когда-нибудь, как на самом деле это смотрится?

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

Верстка \ HTML&CSS

Примеры анимации и переходов псевдоэлементов

От автора: творческие эксперименты с применением анимации и переходов к псевдоэлементам для создания интересных эффектов.

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

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

Верстка \ HTML&CSS

CSS: reset или normalize?

От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.

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

Верстка \ HTML&CSS

Красивое меню на CSS без JavaScript

От автора: меню — это элемент, который присутствует практически на каждом сайте. Красивое меню, безусловно, становится украшением сайта. В этом уроке мы с Вами создадим простое, но вместе с тем красивое меню. При этом мы не используем ни строчки JavaScript-кода.

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

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

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

Адаптивное меню для экранов RETINA

От автора: адаптивное меню для Retina с поддержкой сенсорного ввода и тремя разметками для разных размеров браузера.

Сегодня мы создадим яркое адаптивное и подходящее к экранам Retina меню, вдохновленное цветовой палитрой Maliwan, производителя игры «Borderlands». Меню автоматически изменяется под одну из трех разных разметок в зависимости от размера окна браузера: встроенную версию «десктопа», оптимизированную под «таблетку» версию с двумя колонками и мобильную версию с ссылкой на меню для отображения и сокрытия навигации для маленьких экранов. Чтобы сделать меню полностью под retina, мы применим шрифты-иконки с тем, чтобы иконки меню при изменении размера не поддавались пикселизации.

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

Верстка \ HTML&CSS

Применение CSS attr и content для создания подсказки

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

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

Верстка \ HTML&CSS

Расположение блоков с помощью display:table

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

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

Верстка \ HTML&CSS

Набор страничных переходов

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

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

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

Верстка \ HTML&CSS

Простой эффект меню YouTube

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

Сегодня мы покажем вам, как воспроизвести эффект маленького меню, которое можно видеть слева на YouTube при просмотре видео (где написано «Гид»). Меню состоит из маленькой иконки, метки и списка пунктов, который появляется при щелчке по метке или иконке. При щелчке иконка меню скользит вправо, а метка сдвигается вверх при последовательном появлении пунктов списка. Чтобы стало интереснее, мы добавим к нему еще немного стилей и эффектов.

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