porcelanosa26 мар 2010 в 22:30

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

1 мин

4.5K

CSS *

+40

Комментарии 58

НЛО прилетело и опубликовало эту надпись здесь

porcelanosa 26 мар 2010 в 23:44

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

bolk 27 мар 2010 в 07:47

На bash.

izzik 26 мар 2010 в 23:05

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

homm 27 мар 2010 в 06:31

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

Leprechaun 27 мар 2010 в 08:48

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

dima_smol 27 мар 2010 в 09:54

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

homm 27 мар 2010 в 10:45

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

Forastero 26 мар 2010 в 23:55

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

Forastero 27 мар 2010 в 00:01

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

crea7or 27 мар 2010 в 00:17

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

porcelanosa 27 мар 2010 в 00:22

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

hazg 28 мар 2010 в 09:04

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

porcelanosa 28 мар 2010 в 09:35

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

homm 27 мар 2010 в 06:27

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

hirviko 27 мар 2010 в 07:04

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

НЛО прилетело и опубликовало эту надпись здесь

Equ 27 мар 2010 в 07:21

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

bolk 27 мар 2010 в 07:53

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

Equ 27 мар 2010 в 08:21

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

reimax 27 мар 2010 в 10:48

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

Imposeren 27 мар 2010 в 07:44

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

putnik 27 мар 2010 в 10:53

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

Imposeren 27 мар 2010 в 10:55

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

Tchekhin 27 мар 2010 в 09:04

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

rabsa 27 мар 2010 в 09:25

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

Dalero 27 мар 2010 в 10:01

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

Lemoor 27 мар 2010 в 10:21

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

Denai 27 мар 2010 в 10:53

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

Lemoor 27 мар 2010 в 17:19

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

Denai 27 мар 2010 в 17:25

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

Lemoor 27 мар 2010 в 19:49

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

Denai 27 мар 2010 в 10:42

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

porcelanosa 27 мар 2010 в 11:20

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

homm 27 мар 2010 в 11:29

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

porcelanosa 27 мар 2010 в 12:25

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

tarantul85 27 мар 2010 в 11:45

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

vrmzar 27 мар 2010 в 13:42

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

tarantul85 27 мар 2010 в 17:55

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

porcelanosa 27 мар 2010 в 18:47

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

tarantul85 28 мар 2010 в 01:22

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

Denai 27 мар 2010 в 18:49

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

Lemoor 27 мар 2010 в 19:45

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

tarantul85 28 мар 2010 в 01:29

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

Lemoor 28 мар 2010 в 05:15

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

tarantul85 29 мар 2010 в 19:30

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

Aux 29 мар 2010 в 10:01

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

pvasili 27 мар 2010 в 12: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 27 мар 2010 в 12:40

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