Верстка \ CSS 3

Как оптимизировать CSS-анимацию с помощью свойства will-change

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

К счастью, больше нет необходимости прибегать к хакам, т.к. у нас появилось новое CSS-свойство, которое поможет нам с обработкой сложной анимации и переходов.

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

Верстка \ CSS 3

Как применять CSS-инструменты отсечение и маскировка

От автора: Технология CSS постоянно совершенствуется, и в ней появляются новые инструменты. В этой статье я расскажу об одной новой возможности: отсечении (clipping) с помощью свойства clip-path и маскировке (masking).

clip-path и masking – это два свойства, немного раздвигающие границы нашего текущего представления о блочной модели (box model).

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

Верстка \ CSS 3

Как сделать прокручиваемую сплэш заставку с помощью CSS3 и jQuery

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

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

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

Верстка \ 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.

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