Мини-конкурс "Сады Семирамиды"

[Vlad]

На тему «Сады Семирамиды» нарисовать картинку с помощью свойств CSS3, при этом следует соблюсти ряд условий.

• Минимальный размер картинки 800х600 пикселов, допустимо сделать её масштабируемой в зависимости от размеров окна браузера.
  
• В процессе работы нельзя использовать любые изображения (включая base64), SVG, VML, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS.
  
• Работа должна корректно отображаться в современных браузерах Firefox 6+, Chrome 13+, Safari 5.1, Opera 12, IE10 (т.е. фильтры можно не включать).
  

Картинка может содержать анимированные элементы также созданные с помощью CSS3. Это условие не обязательно, но «живая» картинка выглядит более эффектно и, соответственно, имеет больше шансов на победу.

Приём работ завершается 14 ноября в 10:00 UTC (13 часов Киева, Минска, 14 Москвы, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска).

Все работы будут выставлены на общее голосование, победителем становится участник, набравший максимальное количество голосов. Участники, занявшие первые три места получают книги по их выбору, плюс 30 к репутации и медальку победителя. Все участники, независимо от занятого места, получают плюс 10 к репутации и медальку лауреата.

Для справки.

Семирамида — легендарная ассирийская царица. Греческие историки рассказывают, что ею были построены «висячие сады» в Вавилоне; сады эти древний мир считал одним из «семи чудес света». Отсюда выражение «сады Семирамиды» получило значение: нечто чудесное, великолепное.

[Aristotel]

Влад, я не нашел никакую инфу в вашем сайте об анимации в css3, о ее селекторах и их функциях! создайте такую статью - очень интересно будет почитать!

Спасибо заранее за внимание =)

[Vlad]

Раздел о CSS3 в процессе написания, скоро будет трансформация и анимация.

[rus]

Vlad, а ты не мог бы привести картинку этих садов, а то результат поиска на столько разнящийся, что непонятно как именно в итоге должен выглядеть результат. Или это не столь важно?

[Анна]

Vlad, а ты не мог бы привести картинку этих садов, а то результат поиска на столько разнящийся, что непонятно как именно в итоге должен выглядеть результат. Или это не столь важно?

За отсутствием очевидцев, что бы вы ни нарисовали никто не сможет вас упрекнуть в том, что это не сады Семирамиды.

[Vlad]

Сами сады до наших дней не дошли, рисунки это воображение художников, так что как нарисуете, так и будет. Вдобавок, есть второе значение, как нечто чудесное, под это вообще можно что угодно подвести.

[Nekromancer]

Имхо, нарисовать/сверстать на CSS это одно. А нафантазировать это другое. Чисто физически если нет художественного дара ничего красиво не получится, извините, но это не правильно.

[psywalker]

Имхо, нарисовать/сверстать на CSS это одно. А на фантазировать это другое. Чисто физически если нет художественного дара ничего красиво не получится, извините, но это не правильно.

+1

[sigma77]

Имхо, нарисовать/сверстать на CSS это одно. А нафантазировать это другое. Чисто физически если нет художественного дара ничего красиво не получится, извините, но это не правильно.

Можно же и на основе существующих рисунков сделать.

Да и не интересно бы было, если все рисовали одну и туже картинку.

[Softlink]

Можно же и на основе существующих рисунков сделать.

Да и не интересно бы было, если все рисовали одну и туже картинку.

Поддерживаю. Не обязательно же выдумывать. Яндекс картинки вам в помощь

[Nekromancer]

Можно же и на основе существующих рисунков сделать.

Это понятно, даже из последней строки первого поста. Так и придётся делать.

Да и не интересно бы было, если все рисовали одну и туже картинку.

Тогда что бы было интересно каждый должен придумать свою картинку. А так на самом деле тоже не особо интересно будет.

П.С. Как вариант найти веркоторый клипарт, перевести его SVG, написать парсер на JS и выдать всё это в CSS.

Можно же и на основе существующих рисунков сделать.

Да и не интересно бы было, если все рисовали одну и туже картинку.

Поддерживаю. Не обязательно же выдумывать. Яндекс картинки вам в помощь

"Атмосфера" конкурса явно указывает на то, что больший упор здесь идёт на креативность и фантазию. Если встанет вопрос - клипарт vs. придуманная картинка, при условии одинаково качества - победит второе. Это опять же не верно.

[sigma77]

Тогда что бы было интересно каждый должен придумать свою картинку. А так на самом деле тоже не особо интересно будет.

Почему нет?

<img src="" /> - это было бы не интересно. А так всё равно большое поле для творчества.

П.С. Как вариант найти веркоторый клипарт, перевести его SVG, написать парсер на JS и выдать всё это в CSS.

Это как?

Не всё же тупо кругами и квадратами ограничивается...

"Атмосфера" конкурса явно указывает на то, что больший упор здесь идёт на креативность и фантазию. Если встанет вопрос - клипарт vs. придуманная картинка, при условии одинаково качества - победит второе. Это опять же не верно.

При условии одинакового качества - неизвестно, что победит. Либо мы по разному понимаем понятие "качество".

[psywalker]

Поддерживаю Артура, потому что, вот у меня например совершенно нет вкуса, да и рисовать я в жизни не умел, картинки из Яндекса очень трудные для преобразования их в CSS. Две недели на это точно не хватит, да и не уверен, что это вообще возможно. Остаётся только выдумывать своё, т.е. рисовать

[Nekromancer]

Это как?

Не всё же тупо кругами и квадратами ограничивается...

Векторное изображение может быть любой сложности. При желании его можно перевести в CSS. Даже растовое можно, блоки по одному пикселю никто не отменял Но это уже не то.

При условии одинакового качества - неизвестно, что победит. Либо мы по разному понимаем понятие "качество".

Почему по разному? Одинаковое качество это одинаковая точность линий/фигур, компактность/правильность кода и тому подобные вещи. Конечно, если кто то повторит клипарт из Яндекса, а кто то нарисует 2 квадратика и скажет, что это сады - вопросов не будет.

[sigma77]

Векторное изображение может быть любой сложности. При желании его можно перевести в CSS. Даже растовое можно, блоки по одному пикселю никто не отменял Но это уже не то.

Мёсье знает толк в извращениях

Хотя пиксельарт - тоже интересная тема

Почему по разному? Одинаковое качество это одинаковая точность линий/фигур, компактность/правильность кода и тому подобные вещи. Конечно, если кто то повторит клипарт из Яндекса, а кто то нарисует 2 квадратика и скажет, что это сады - вопросов не будет.

Ну да. Шансы при этом равные.

[Nekromancer]

]

Ну да. Шансы при этом равные.

Вообще то я имел введу, что в последнем случае победит естественно клип арт.

Мёсье знает толк в извращениях

Хотя пиксельарт - тоже интересная тема

Ну прям по пикселю это будет плохой алгоритм. А вот выделить наиболее частый цвет для строки/столбца и потом накладывать поверх линкии например через через альфа канал. Некоторые конечно придётся залитыми пикселями. Кстати хорошая идея, надо попробовать.

[laird]

а есть вообще какие-то примеры картинок, сделанных чисто на html и css?

[Softlink]

а есть вообще какие-то примеры картинок, сделанных чисто на html и css?

какие-то есть

раз, два

[Akaciya]

http://cssworld.ru/gomer-na-css/ Гомер Симпсон на css

http://www.romancortes.com/blog/homer-css/ оригинал

Edited November 1, 2011 by Akaciya

[Nanto]

На тему «Сады Семирамиды» нарисовать картинку с помощью свойств CSS3, при этом следует соблюсти ряд условий.

• Минимальный размер картинки 800х600 пикселов, допустимо сделать её масштабируемой в зависимости от размеров окна браузера.
  
• В процессе работы нельзя использовать любые изображения (включая base64), SVG, VML, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS.
  
• Работа должна корректно отображаться в современных браузерах Firefox 6+, Chrome 13+, Safari 5.1, Opera 12, IE10 (т.е. фильтры можно не включать).
  

Картинка может содержать анимированные элементы также созданные с помощью CSS3. Это условие не обязательно, но «живая» картинка выглядит более эффектно и, соответственно, имеет больше шансов на победу.

Приём работ завершается 14 ноября в 10:00 UTC (13 часов Киева, Минска, 14 Москвы, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска).

Все работы будут выставлены на общее голосование, победителем становится участник, набравший максимальное количество голосов. Участники, занявшие первые три места получают книги по их выбору, плюс 30 к репутации и медальку победителя. Все участники, независимо от занятого места, получают плюс 10 к репутации и медальку лауреата.

Для справки.

Семирамида — легендарная ассирийская царица. Греческие историки рассказывают, что ею были построены «висячие сады» в Вавилоне; сады эти древний мир считал одним из «семи чудес света». Отсюда выражение «сады Семирамиды» получило значение: нечто чудесное, великолепное.

Я валяюсь!.. Вот во что превращается идея следовать самым новым веяниям в развитии html/css... 12-ая то откуда? Разработчиков хотите удивить!

[Softlink]

Я валяюсь!.. Вот во что превращается идея следовать самым новым веяниям в развитии html/css... 12-ая то откуда? Разработчиков хотите удивить!

Как бы 12-я в бете уже есть. А разработчики в свою очередь заявляют, что некоторые баги (на css3) будут поправлены. По большому счету это указано с тем умыслом, что некоторые свойства могут не работать в опере 11.52, например, но это будет не критично для конкурса.

[laird]

Ну вообще красиво - примерчики картинок чисто на css...

Интересно, а если сделать таблицей с заливкой bg каждой ячейки, которых будет 800х600 штук? сойдет такой вариант? или это непрофессионально?

[ViStefan]

http://vistefan.narod.ru/a1.html

На скорую руку написанной мной прогой отрендерил первую попавшуюся картинку. Протестируйте свой браузер и интернет-соединение )

Тут на таблице всё,так что сори за оффтоп, но интересный эксперимент

Извиняюсь, возникло недоразумение, временно ссыль предоставить не могу

Edited November 2, 2011 by ViStefan

[ShumNo]

http://vistefan.narod.ru/a1.html

На скорую руку написанной мной прогой отрендерил первую попавшуюся картинку. Протестируйте свой браузер и интернет-соединение )

Тут на таблице всё,так что сори за оффтом, но интересный эксперимент

404

[Splin]

http://vistefan.narod.ru/a1.html

На скорую руку написанной мной прогой отрендерил первую попавшуюся картинку. Протестируйте свой браузер и интернет-соединение )

Тут на таблице всё,так что сори за оффтом, но интересный эксперимент

Дай норм ссылку!