Когда мне было очень мало, интернет выглядел как я, то есть, не очень (в начале 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.