Vlad

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

Recommended Posts

На тему «Сады Семирамиды» нарисовать картинку с помощью свойств 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 к репутации и медальку лауреата.

Для справки.

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

+1

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Почему нет?

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

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

Это как? :blink:

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Это как? :blink:

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites
]

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

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

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

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

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

Share this post


Link to post
Share on other sites

На тему «Сады Семирамиды» нарисовать картинку с помощью свойств 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-ая то откуда? Разработчиков хотите удивить!

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Edited by ViStefan

Share this post


Link to post
Share on other sites

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

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

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

404

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Member Statistics

    46,441
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.