Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

HTML, CSS, JS. Сверстайте солнышко!

MadBrozzeR Мастер (1415), закрыт 4 года назад
Предыстория (для тех, кому лень читать, условие в последнем абзаце). Еду я как-то на электричке, года три назад, в город Ярославль. На коленях ноутбук, пишу свой очередной проект. На сиденье передо мной сидят девочка лет 5-6 и её мама. Девочка любопытная, проявляя интерес к моему усердному труду, разговорилась со мной не на шутку. От неё я узнал, например, что, дословно: "Если на улитку наступить, то она задохнётся и сдохнет!"... но суть не в этом. Ещё я узнал, что она умеет рисовать солнышко. Спрашивает меня, умею ли я. Отвечаю, разумеется: "Конечно!" Вот только сказал, что на бумаге - это скучно. Договорились, что нарисую на компьютере. #яжпрограммист.
Открываю крышку ноутбука, и тут до меня потихоньку начинает доходить, что ОС я поставил совсем недавно, и никаких графических редакторов я пока не ставил, так как не было необходимости. И это не винда, так что пэинтов никаких там тоже нет. И интернета в дороге нет, чтобы скачать любимый InkScape, даже мобильного - по пути одна глушь. Но делать нечего, уже пообещал - нужно исполнять. Открываю текстовый редактор и начинаю верстать солнышко.
В итоге, за 15 минут, творением своим и я остался доволен, и девочку порадовал. Дома потом ещё и css анимацию прикрутил.

И мне очень хотелось бы узнать, есть ли желающие показать, как бы вы справились с этой задачей? Условия простые: только html, css и js, и никаких картинок или сторонних библиотек - мы ведь с пустым ноутбуком вдали от цивилизации. Для демонстрации есть codepen, jsfiddle, jsbin и прочие. Но кому как удобно.
Дополнен 4 года назад
Девочку я уже не найду, поэтому решение ей показано всё равно не будет. Просто хочу отдать лучший ответ наиболее интересному решению.
Или здесь все скучные?
Лучший ответ
Dmitriy Develop Гуру (2839) 4 года назад
MadBrozzeRМастер (1415) 4 года назад
Очаровательно вышло!
Вендорных префиксов многовато, на мой взгляд, но это не важно.
Пока не дошёл до строчки с keyframe, даже не заметил, что есть анимация. И, кажется, без неё было бы ровно так же хорошо, как и с ней.
Dmitriy Develop Гуру (2839) Спасибо) Возможно вы правы, но я люблю детали)
Остальные ответы
Nikita Ermolenko Мастер (2442) 4 года назад
Вот код:
< img src="" >
Туда вставь это
MadBrozzeRМастер (1415) 4 года назад
Прочти условие - оно в последнем абзаце.
Тиранозавр Мудрец (19390) 4 года назад
Когда как, смотря какое солнышко нужно. Самый простой вариант

< div style="width: 100px; height: 100px; background-color: yellow; border-radius: 100px;" >< /div >
MadBrozzeRМастер (1415) 4 года назад
Жёлтый кружок - это тоже вариант, но я ожидал что-то соревновательного характера. Мол кто интереснее изобразит.
Тиранозавр Мудрец (19390) Девочка не заказчик, ей не нужно писать прям так, чтобы оно через монитор даже грело как настоящее)
Elepsis Eclipse Гений (64066) 4 года назад
https://jsfiddle.net/OPTlMUS/0Lfeg142/ осторожно, жрет много CPU - условие задачи не в производительности, а "лишь бы работало и было красиво" )

Оставлю картиинку без анимации тут:
.
MadBrozzeRМастер (1415) 4 года назад
Здорово выполнено с точки зрения техники.
nowhere man Мудрец (16105) 4 года назад
Исключительно из любви к исскуству:

https://jsfiddle.net/wg2my1fs/1/
nowhere manМудрец (16105) 4 года назад
MadBrozzeR Мастер (1415) Моему сыну сначала больше всего этот вариант понравился.
Похожие вопросы