Архив тегов: анимация

Материальный дизайн — Объекты в трехмерном пространстве

Перевод раздела Objects in 3D space официальной документации Google: http://www.google.com/design/spec/material-design/.

Между организацией объектов в реальном мире и в их расположении в материальном пространстве существуют параллели. В реальном мире объекты могут накладываться друг на друга, но не могут проходить сквозь друг друга. Объекты могут отбрасывать тени и отражать свет.

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

(далее…)

Материальный дизайн — Свойства материала

Перевод раздела Material properties официальной документации Google: http://www.google.com/design/spec/material-design/.

Материал обладает некоторыми неизменными характеристиками и характерной линией поведения. Понимание этих свойств поможет вам манипулировать материалом в соответствии с концепциями материального дизайна.

Физические свойства

Материал обладает изменяющимися размерами по осям x и y (измеряются в dps) и единой толщиной (1dp). Толщина материала не может быть равной 0.

(далее…)

Материальный дизайн — Окружающая среда

Перевод раздела Environment официальной документации Google: http://www.google.com/design/spec/material-design/.

Трехмерный мир

Материальная среда является трехмерным пространством, а это значит, что все объекты располагаются в плоскостях x, y и z. Ось z расположена перпендикулярно плоскости отображения, и ее положительная шкала направлена на зрителя. Каждый лист материала занимает единицу пространства на оси z и имеет стандартную толщину  1dp.

(далее…)

Материальный дизайн — Введение

Перевод раздела Introduction официальной документации Google: http://www.google.com/design/spec/material-design/.

Введение

materialdesign_introduction

Мы поставили перед собой задачу по созданию для своих пользователей визуального языка, который бы сочетал в себе классические принципы хорошего дизайна с инновациями и возможностями технологий и науки. Перед вами материальный дизайн. Данная спецификация всё еще находится в разработке и будет обновляться по мере развития правил и специфик материального дизайна.

(далее…)

Руководство по SVG-анимациям (SMIL)

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суэйдан. Публикуется с разрешения автора.

Перед вами гостевой постинг Сары Суэйдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.

Введение

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

  • <animate> — позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;
  • <set> — являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойства visibility;
  • <animateMotion> — позволяющий двигать элемент по заданной траектории;
  • <animateColor> — изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент <animateColor> устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.

В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят:

(далее…)

Inspiration #14

Сегодня среда, а значит время посмотреть четырнадцатый выпуск нашей еженедельной рубрики Inspiration. Мы поменяли название рубрики на более короткое, понятное и вдохновляющее :) Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Креатив

Хочу сегодня с вами поделиться интересной подборкой сайтов. Каждый из этих сайтов кардинально отличается характерным и особым подходом в оформлении интерфейса. Этому способствует креатив.

Обложка

(далее…)

Inspiration #13

Сегодня среда, а значит время посмотреть тринадцатый выпуск нашей (почти) еженедельной рубрики Inspiration. Мы поменяли название рубрики на более короткое, понятное и вдохновляющее. :) Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Простые сайты с интересными решениями.

Друзья, предлагаю сегодня новую подборку красивых сайтов. В веб-дизайне постоянно появляется невероятное количество новых сайтов, поражающие своей креативностью нетрадиционным подходом к созданию интерфейса.
Устойчивым трендом продолжают оставаться сайты одностраничники, большие фоновые изображения для веб-сайтов. Остаются актуальными на своих позициях типографика, минимализм и адаптивный веб-дизайн, который обусловлен массовым использованием мобильного интернета. Пользуется популярностью плавная анимация с использованием HTML5, CSS3 и jQuery. Относительно новые тенденции — это плоский дизайн. Ко всему прочему — для творческих людей нужно постоянно находить новые идеи, решения, поэтому здесь вы сможете почерпнуть массу интересного для себя.

(далее…)

Анимированная типографика на CSS3

Каждая буква создана с помощью нескольких элементов HTML и каждая часть буквы будет иметь собственное объявление CSS-анимации, но с разными задержками. Это отзывчивая типографика. Лучше всего она будет смотреться на экранах с разрешением 1920px или 1000px и ниже. Типографика будет трансформироваться в том случае, если ширина экрана будет 1280px и 1024px.

HTML:

<!--[if lte IE 10]>
<style type='text/css'>
html body #typo-wrap {
  margin:0 auto !important;
  padding:10px;
}
</style>
<![endif]-->
<section id="typo-wrap">
	<h1><!--
	--><span class="char char-w collapsed">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
		--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-b clear">B<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-t">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-h">H,<br><!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-w collapsed clear">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
	--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char same char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char same char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-f clear">F<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-d">D<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel bevel-right-bottom"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-o">O<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top bevel-left-bottom"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel-right-bottom"></span><!--
	--></span><!--
	--><span class="char char-m">M<!--
		--><span class="part-1"></span><!--
		--><span class="part-2 bevel bevel-top-middle"></span><!--
		--><span class="part-3 bevel bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="blink">.</span>
	</h1>
	<div class="clear"></div>
</section>

(далее…)

Плавающий текст на CSS3 и JavaScript

Плавающий текст! В основном CSS-анимации, легко реализуемые на чистом CSS, всё же не могут запросто изменить целое слово, сделав его плавающим. Хорошо работает в вебкитах, в других похуже…

HTML:

    <!-- try changing the text -->
    <p>Floating</p>

(далее…)

Круглые светящиеся кнопки

Пара Милых Круглых Светящихся Кнопок сделаных на CSS3!  Для левой кнопки мы использовали плавную анимацию с помощью CSS3 свойства transition, которое создаёт плавный переход между двумя состояниями :hover и  :active. 3D эффект достигается благодаря правильному использованию таких свойств, как box-shadow, border и gradient.

С помощью свойства border-radius мы предал кнопкам круглую форму.  Анимация не будет работать в браузерах IE 6-9, т.к. в них нет её поддержки.

(далее…)

Меню с эффектом LavaLamp на чистом CSS3

Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery). Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.

(далее…)