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

[@sera2007]

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

[@Skull]

Как урок — да, пойдет.
Как технология разработки логотипов — довольно долго, не все логотипы легко реализуются. Да и в ИЕ8 пчела выглядит как квадратный R2D2 с крылышками

[@invidia]

урок/пример

Ага, пример того, как лучше не делать

[@Softlink]

М?

[@coocheenin]

SVG сейчас вроде все уважающие себя браузеры держат

Понятно, что поделия от Microsoft сложно к ним отнести, но все-же.
А поддержка SVG заявляется начиная только с IE9, который ставится только на новые машины с Вистой и 7.
Так что о поддержке ведущими браузерами говорить пока рановато.

Просто мои пять копеек.

[@coocheenin]

Пока что PNG — самое, для этого, кросcбраузерное решение ;)

[@Vend3tta]

Ну, если говорить о кроссбраузерности, то для SVG есть либа Raphael. Правда, она сама по себе довольно увесистая штука…

[@david_mz]

Андроид SVG не держит, к сожалению.

[@Artoha]

Это ж каким гиком нужно быть, чтобы делать такое.

[@QtRoS]

Но существенно увеличит нагрузку на процессор…

[@iPirat]

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

[@Vend3tta]

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

[@EzS]

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

[@ddenisyuk]

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

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

[@StipJey]

В опере вообще Опа квадратная О_о

[@0mm]

Почему сразу инвалид? Пчела-гимнаст! Или она гопак танцует… как поглядеть

[@Kuper]

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

[@Nico_izo]

В 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(), если вам угоден такой способ.

[@Nico_izo]

Прошу прощения,

<div></div>

украл парсер.

[@spmbt]

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

[@Nico_izo]

Хм, я, возможно, предложу не самое элегантное решение, но в ваш body::after в content добавить "\A V" (перенос строки, пробел, V)

[@Squier]

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

[@pvasili]

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

[@Nico_izo]

Чистый (очень сильно ужатый и без вендорных префиксов) CSS от SelenIT2 получается 1284 символа. Меньше, чем гифка.

[@Stdit]

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

[@Stdit]

Дело не в количестве эффектов. Мне понравился стиль изложения. В остальном, согласен.

[@Stdit]

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

[@glazs]

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

[@art_tk]

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

[@NekitoSP]

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

[@Ekstazi]

Спасибо.

[@pepelsbey]

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

[@wcoder]

Спасибо, подправил

[@egorinsk]

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

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

[@wcoder]

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

[@ilre]

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

[@Illorian]

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

[@Wave]

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