Верстка \ 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. Я ошибался.

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

Верстка \ CSS 3

Создаем фотоэффект глянца с помощью CSS3

От автора: все чаще и чаще мы создаем эффекты, которые обычно делались в графических редакторах, например Adobe Photoshop, применяя один лишь CSS. А последнее время от CSS3 можно добиться дополнительных новых эффектов.

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

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

Верстка \ CSS 3

Введение в функцию CSS3 Calc()

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

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

Верстка \ CSS 3

Создаем эффект сложенной бумаги с помощью CSS3

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

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

Верстка \ CSS 3

Идеально поворачиваем и маскируем пиктограммы с помощью CSS3

От автора: видели когда-нибудь вебсайт, показывающий слегка повернутые изображения-пиктограммы? Это простой эффект, придающий налет зрительной индивидуальности. Притом, если вы не можете добиться этого поворота с помощью CSS, то трудитесь слишком тяжко! Узнайте, как сделать вращение в CSS3 правильно!

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

Верстка \ CSS 3

создание тизера с помощью CSS3

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

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