Нашел на днях интересный пример использования CSS3 и решил поделиться им с сообществом. Примеры сделаны для движка webkit, но все должно работать и в других браузерах, поддерживающих css3.
В этой статье мы рассмотрим, как можно сделать AT-AT Walker из V эпизода Звездных войн с помощью CSS3 анимации. Начнем с обзора тех свойств CSS3, которые делают эту анимацию возможной. Затем рассмотрим список частей AT-AT и CSS код для движения каждой части.
Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.
Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.
Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.
Скачать (.zip, 20 кб)