Верстка \ CSS 3

8 простых переходов CSS3

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

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

Верстка \ CSS 3

Эффект буквицы с помощью CSS3

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

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

Верстка \ CSS 3

Градиенты CSS

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

Градиенты обычно состоят из одного цвета, переходящего в другой, но в CSS можно контролировать каждый аспект этого процесса, от его направления до цветов (сколько угодно много) до того, где будет происходить изменение этих цветов. Давайте все из них рассмотрим.

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

Верстка \ CSS 3

Стеклянное меню на CSS3

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

Демо-пример приведен ниже.

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

Верстка \ CSS 3

Уменьшаем количество вендорных префиксов

От автора: Для активации определенных свойств в некоторых браузерах большая часть веб-разработчиков сейчас применяют вендорные префиксы в CSS. Это отлично, но иногда я вижу примеры кода и инструменты добавления префиксов, где с излишним энтузиазмом добавляются все возможные из когда-либо употреблявшихся префиксов (а иногда даже те, которые никогда не применялись). Я считаю, что для многих свойств CSS можно безопасно прекратить использование вендорных префиксов или, по крайней мере, значительно сократить их количество.

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

Верстка \ CSS 3

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

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

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

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

Верстка \ CSS 3

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

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

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

Верстка \ CSS 3

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

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

Верстка \ CSS 3

современные hover эффекты на CSS3

От автора: свойство CSS transition дает нам возможность анимировать изменения значения свойства CSS. Это можно использовать для постепенного гладкого изменения значения, а с помощью задержки имитировать переход элементов. Свойство CSS transform позволяет преобразовать элементы в двух- или трехмерном пространстве. В этом учебнике мы применим 2D-преобразования.

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

Верстка \ CSS 3

Анимация путей по окружности с помощью CSS3

От автора: Долгое время я предполагал, что нельзя применять CSS Transitions или анимацию для передвижения объектов DOM каким-либо другим образом, кроме движения по прямой. Конечно, разработчик мог бы применить множество ключевых кадров для создания списка прямых путей и симулировать кривую, но не думал, что можно определить кривую с помощью всего двух ключевых кадров или простого CSS transition. Я ошибался.

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