Верстка \ 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’а. Многие вебсайты через страницы-тизеры становятся очень популярными, поэтому добавить эту концепцию в свой инструментарий очень полезно. Применяйте ее к любому приложению или вебсайту, готовящемуся к запуску.

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

Верстка \ CSS 3

введение в css3

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

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

Верстка \ CSS 3

CSS3-анимация

От автора: модулю CSS ‘Animations’ от консорциума W3C не сразу удалось завоевать популярность. При своей ограниченной поддержке браузерами не утверждаю, что он является одним из самых широко используемых свойств CSS3. Он сто лет доступен в браузерах, основанных на Webkit – в Chrome’е начиная со второй версии и в Safari с версии 4, но не имеет поддержки в Opera, IE и Firefox…до сих пор. Недавно, впрочем, вышел Firefox 5, а вместе с ним появилась и поддержка модуля анимации. Поговаривают, что следующим будет Opera. Когда глобальная поддержка свойства оценивается уже примерно в 25%, самое время немного с ним поразвлечься!

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