Дизайн логотипа на CSS3

Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта. ???
Эту фразу можно сразу в хабра-юмор) На сколько увеличится загрузка сайта?
Зачем парится и тратить время на создания логотипа в CSS3?

Как пример интересно, но все таки картинкой мне кажется удобнее и кроссплатформеннее.

Если уж пошла такая пьянка, то тельце можно с помощью градиентов и background-size раскрасить, избавившись от кучи дополнительной разметки :)

Пчиилайно-дроид получился

>> Для лучшего результата, проверьте демо в Chrome или Safari (последних версий).

В ФФ 9 пчела-инвалид :)

В разных браузерах разные лого.

В Firefox12 выглядит так:

Залез в код (правило .left_wings .wing2) и… удивился.

                -o-transform:rotate(45deg);
                -moz-transform:rotate(45deg);
                -ms-transform:rotate(45deg);
                -webkit-transform:rotate(-45deg);
                transform:rotate(45deg);

В вебките всё, как оказалось, хорошо :) А остальные пускай мучаются.
К слову, не надо было пихать дивы с разными классами. Можно было просто пустить и задавать при помощи псевдокласса :nth-of-type(), если вам угоден такой способ.

Бизнес-идея: сделать сайт-сервис «Сделай лого на CSS».
В котором элементы конструируются онлайн и собирается картинка.
(Конечно, без таких ошибок и с чёткими гарантиями работы. Для самопиара пойдёт.)

Одна рука и одна нога, лиса 10

css3_logo.html — 6 Kb
css3_logo.gif — 2.2 Kb
в чём выигрыш?

Хорошая демонстрация CSS3. Но что-то мне подсказывает, что в png эта пчела будет не только быстрее грузиться, но и меньше весить.

А давайте не будем ерундой заниматься, а будем для построения векторного гипертекстового фидонета использовать SVG. Ну а CSS будем использовать для того, для чего он был придуман.

Cute animals made with CSS3:
demos.paranoida.com/css_animals/

-o-transform: rotate(-30deg);
и
-o-transform: rotate(30deg);
и для остальных движков где? :)

То у вас только -webkit и -moz-префиксы для трансформаций, то все нормальные (-ms и -o). То у вас просто border-radius, то внезапно с -webkit и -moz-префиксами. Я понимаю, что оригинал по ссылке, но своя же голова есть, правильно?

Во-первых, для этих целей (векторная графика) надо использовать SVG/VML (работает даже в 6-м IE). (Кто-то написал в комментариях, не работает на андроиде — ну че, пишите Брину, никто ради маргинального браузера не будет код править).

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

Подправил листинги CSS приведенные в топике.

> все основные браузеры, такие как Chrome, Safari и Firefox
Спасибо, посмеялся. Ну и. да, код какой-то кривой, но за меня уже указали на это картинкой в виде пчелы-инвалида. Она теперь будет сниться мне в кошмарах.

Мне кажется, что эта статья больше не для реального использования, а для поднятия собственного рейтинга

Зашёл на статью на сайте — настойчиво перенаправляет… куда-то… Зачем так делать? Вполне можно смотреть сайт и при отключенном js, нет же, закроем сайт от всех пользователей NoScript.
Кстати, временно включил скрипты — ничего не изменилось кроме добавления кнопки «Вверх». А, ну ещё подсветка кода и кнопки соцсетей.