Анимированная чашечка чая на CSS 3
Когда мне было очень мало, интернет выглядел как я, то есть, не очень (в начале 90-х). В то время у меня не было даже компьютера, про интернет я вобще молчу. Я впервые увидел интернет, когда он уже стал довольно «красивым» и развитым, чем он сильно обязан каскадным таблицам стилей (CSS), которые были приняты как стандарт 17 декабря 1996 года.
В то время эти стили позволяли вебмастеру следующее возможности:
- Устанавливать параметры шрифтов (гарнитуры, размер, стиль);
- Управление цветом элементов;
- Задать атрибуты текста (межсимвольный и межстрочный интервал, а также расстояние между самими словами);
- Возможности выравнивания текста, изображений, таблиц и других элементов;
- Управление свойствами блоков (высота, ширина, внутренние и внешние отступы, рамки).
Так появился стандарт CSS1, которого дополнил CSS2 в мае 1998 года. В свою очередь, сам стандарт CSS2 первой редакции служит верой и правдой по сей день.
На текущий момент все ожидают официальную рекомендацию консорциума всемирной паутины по поводу CSS3, которому уже наступает на «пятки» 4-я версия, разработка которых ведётся с сентября 2011 года.
Немного про CSS3
CSS3 по сравнению со своим родителем шагнул очень далеко вперёд и несмотря на то, что стандарт ещё не принят официально примеры его возможностей можно встретить на подавляющем количестве современных сайтов — от закруглённых углов в элементах сайта до целых интерактивных баннеров.
Чтобы долго не рассказывать об этом мы использовали в качестве демонстрации возможностей CSS3 — анимированную чашку чая, которая стоит в правом верхнем углу этой страницы.
Чашка чая написана на CSS3, при этом не использовано ни одного рисунка и кода на JavaScript. Основные свойства, которые задействованы:
- box-shadow — для теней;
- box-radius — для закруглённых углов (в этом случае, чтобы сделать круг из блока);
- transition — для замедления, и эффектов анимации;
- nth-child — селектор для управления двумя сахарочками 🙂
Автор идеи и исполнитель — Вадим Макеев. По ссылке Вы найдёте урок о том, как нарисовать чашку на CSS3.
Как этот код вставить в WordPress — читайте у Voffa.