porcelanosa Mar 27 2010 at 01:30

Высокохудожественные картинки на CSS

1 min

4.4K

CSS*

+40

Comments 58

UFO landed and left these words here

porcelanosa Mar 27 2010 at 02:44

Да, наверное, но свой fun они тут ловят.
Пишут же люди сапер на bush или еще того хуже на bat-никах

bolk Mar 27 2010 at 10:47

На bash.

izzik Mar 27 2010 at 02:05

Весьма иронично

homm Mar 27 2010 at 09:31

Вы же понимаете, что дело не в длине волшебной палочки, а в мастерстве волшебника:
twitter.com/pepelsbey/status/10366928782

Leprechaun Mar 27 2010 at 11:48

Вот когда будет одна реализация для всех браузеров, тогда я буду рад.

dima_smol Mar 27 2010 at 12:54

особенно забавно он смотрится в FF )))

homm Mar 27 2010 at 13:45

После добавления -moz- свойств выглядит неотлчимо от оперы. А вот в хроме проблемы.

Forastero Mar 27 2010 at 02:55

На Сафари прекрасно работает

Forastero Mar 27 2010 at 03:01

А, не, вру. Это картинка. А вот логотип Оперы нормально отображается. Разные технологии?

crea7or Mar 27 2010 at 03:17

технология одна — css, разные реализации.

porcelanosa Mar 27 2010 at 03:22

Недоделано слегка. Тут заточено под Firefox с его -moz атрибутами. Но по идее ничто не мешает и под остальные браузеры подогнать.
В ближайшем будущем, надеемся, что будет везде стандартная поддержка CSS3, без оглядки на браузеры.

hazg Mar 28 2010 at 13:04

Когда же наконец можно будет без «оглядки на браузеры»? ((((

porcelanosa Mar 28 2010 at 13:35

ну идет работа в этом направлении
Рядовым пользователям в большинстве всего поддержка стандартов не важна
А давление со стороны вебмастеров сильное, но недостаточное, точнее некоторые считают, что его вполне можно игнорировать.
Ведь фраза: «теперь наш браузер поддерживает border-radius!!!» вряд ли привлечет обычного пользователя.

homm Mar 27 2010 at 09:27

Если работает только под Firefox 3.6+, и это еще нужно портировать на другие браузеры, то это не CSS.

hirviko Mar 27 2010 at 10:04

Это искусство ради искусства.

koshak Mar 27 2010 at 10:03

интересно то, что кривизну бублика всё равно никто правильно не отображает…

Equ Mar 27 2010 at 10:21

Глядя на это сразу вспомнил банку кока-колы, нарисованную с помощью CSS www.romancortes.com/blog/pure-css-coke-can/

bolk Mar 27 2010 at 10:53

Разве она нарисована с помощью CSS?

Equ Mar 27 2010 at 11:21

Прошу прощения, я имел в виду эффект, созданный с помощью CSS.

reimax Mar 27 2010 at 13:48

Очень интересный эффект

Imposeren Mar 27 2010 at 10:44

Пора уже сделать генератор таких css картинок из, например, SVG

putnik Mar 27 2010 at 13:53

Пора уже сделать нормальную поддержку SVG, и не надо будет извращений с генераторами.

Imposeren Mar 27 2010 at 13:55

Вы не поняли моей идеи. Генератор нужен, что бы выпендриться(=

Tchekhin Mar 27 2010 at 12:04

В Safari тоже всё работает =/

rabsa Mar 27 2010 at 12:25

Нет слов. ЦСС рулит!

Dalero Mar 27 2010 at 13:01

если так пойдет дальше, не далеко до графических редакторов реализующих css графику.

Lemoor Mar 27 2010 at 13:21

Круто. Жаль что IE как всегда в *опе и не отображает нормально

Denai Mar 27 2010 at 13:53

Так поставьте уже браузер и не пользуйтесь «этим». Или Вы с работы?

Lemoor Mar 27 2010 at 20:19

По работе сайты корпоративные пишу и администрирую. Много народу, которые смотрят сайты фирмы где работаю сидят на «осле» (сам на Opera Dragonfly и lynks сижу), поэтому приходится все подгонять в первую очередь под него :'(, поэтому приходится обходится без большинства CSS-вкусностей

Denai Mar 27 2010 at 20:25

Не думаю что и остальные вкусности тоже нормально работают. Обидно конечно делать дурную работу по 2-3 раза для каждой разновидности осликов. у Вас надеюсь 6 версию уже похоронили или всё ещё упорно держится?

Lemoor Mar 27 2010 at 22:49

Моими усилиями похоронили. Радуюсь хотя бы этому. Хотя и с 7-ым и 8-ым осликами мороки полно. Даже при использовании jQuery и то проблем много.

Denai Mar 27 2010 at 13:42

Что-то смотрю на mozilla.seanmartell.com/raindrop/ и CSS выглядит приятнее чем картинка под ним. так и надо или это ошибка?

porcelanosa Mar 27 2010 at 14:20

в картинке еще есть градиенты — Шон не стал с ними морочиться.

homm Mar 27 2010 at 14:29

Меня смущает грязный развод чуть ниже центра.

porcelanosa Mar 27 2010 at 15:25

аха — это и есть градиент, типа внутренность капли просвечивает ;-)

tarantul85 Mar 27 2010 at 14:45

Это уже называется «векторная графика», детка. Скоро она придёт и в сеть. Будем рисовать в векторном CSS-редакторе каком-нибудь.

vrmzar Mar 27 2010 at 16:42

Карты будут в векторе) Это был бы номер))

tarantul85 Mar 27 2010 at 20:55

Да. Только объём CSS-файлов придётся делить по городам или районам, например. Трафик бы уменьшился конечно, но опять же нужно что ВСЕ браузеры поддерживали ВСЁ! А то такое ощущение, что мелкомягкие живут в своём мире, ничего не видят вокруг и не с кем не считаются.

porcelanosa Mar 27 2010 at 21:47

Всему свое время

tarantul85 Mar 28 2010 at 05:22

Ох, что-то я сомневаюсь… Опять сделаю упор на каой-нибудь ни кому не нужной «масштабной» фигне, а про элементарные вещи забудут. Они же «смотрят в будущее».

Denai Mar 27 2010 at 21:49

В 9 ие многое заработает так как надо. Будем надеяться что в погоне за понтами не забудут самое важное и сделают так чтобы логичные вещи логично же и работали. Ну не может же быть у них группа сумасшедших разработчиков, выпускающих УГ, которым все поклоняются и боятся внести что-то хорошее и вменяемое.
Интересно когда же будет релиз той самой девятой версии и вирус, который прогрейдит ие на всех компах до версии, способной носить звание «браузер».

Lemoor Mar 27 2010 at 22:45

Думаю не скоро. Так как большинство CSS-вкусностей 8-я не держит, а то, что держит — с жутким скрипом, часто через хаки. А ведь за столько лет можно было бы нормально реализовать большую часть…

tarantul85 Mar 28 2010 at 05:29

Конечно! Ждём не дождёмся. Но скорее не дождёмся. Linux тоже стабильнее, быстрее и безопаснее. Однако статистика популярности ОС говорит сама за себя.

Lemoor Mar 28 2010 at 09:15

Ну тут ситуация от Linux немного отлична. Большинство людей, которые сидят на осликах делают это, так как просто не знаю, что есть альтернатива либо не могут ее сами поставить — компьютерная грамотность большинства людей сегодня очень низкая. Так же слышал от одного клиента не так давно аргумент: «Я к нему привык и не буду больше ни на что переходить». Ситуация может меняться начать сейчас, так как антимонопольщики MS в некоторых странах (навскидку где именно не вспомню, пару месяцев назад читал об этом) обязали при установки давать выбор какой браузер хочет поставить пользователь (как реализовано это — инсталяторы с нета при установке сливаются или они уже на диске с дистрибутивом валяются — я не знаю, но уже радует сам факт).

tarantul85 Mar 29 2010 at 23:30

Ну вот и на лицо разница между бесплатными ПО и коммерческими.
А про браузер — это очень хорошо. Я всем своим клиентам ненавязчиво рекомендую Хром. Хотя сам юзаю огнелиса. ^^

Aux Mar 29 2010 at 14:01

Карты в векторе уже давно есть. SVG!

pvasili Mar 27 2010 at 15:16

Канадский флаг (href=«mattread.com/examples/css/flag.php),
США (http://www.cssplay.co.uk/menu/banner), (http://www.cssnewbie.com/example/us-flag/)
Английский флаг (http://www.cssplay.co.uk/menu/flag), (http://ago.tanfa.co.uk/css/borders/ukflag.html) — тут ещё примеры интересные с часам…

AYShestakov Mar 27 2010 at 15:40

немножко другая техника. О градиентах в ваших примерах речь и не идет. Есть гораздо более впечатляющие примеры. С помощью обычного border можно много чего сделать. Но градиенты и border-radius сильно увеличивают «художественную» сторону произведения и упрощают реализацию.
В вышеописанном рисунке всего лишь 8 (восемь!!!) блоков. Все остальное CSS делает