Как сделать смайлы (эмоции) на CSS?

Теоретически можно и программу написать с помощью нулей и единиц. А надо ли?

Алексей Ярков,

Теоретически можно и программу написать с помощью нулей и единиц.

почему теоретически? почитайте историю
Глупо отрицать, то что можно рисовать на чистом css

JRK_DV, так я и не отрицаю, перечитайте коммент =)
Но зачем это, если можно свг нарисовать и анимировать. Это же проще.

Значит таки можно сделать. Возможно это получится не так плавно. Но честно говоря я пока не нашел решения как можно "скосить" глаза как я выделил на картинке, в голову лезут безумные идеи с тем, чтобы "надвинуть" другим блоком)

JRK_DV, это традиционный спор про "можно, но зачем", который, на самом деле, сводится к тому, готов ли автор вопроса и отвечающие на него тратить время на возню с CSS, которая на порядок менее продуктивна, чем рисование в SVG. Никто не говорит, что нельзя это сделать на CSS, но это просто глупо делать на CSS из-за траты времени.

Moskus,

Никто не говорит, что нельзя это сделать на CSS

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

Piterski,
чтобы скосить глаза можно попробовать поиграть с border-radius
как нибудь так jsfiddle.net/mwtq1zha

JRK_DV, только lamer350 пишет категорично "не реализовать".
Ответы в духе "наплевать на практическую сторону, если постараться, то можно трахаться и стоя в гамаке" - это всё от желания поспорить и показаться умнее других. В "цирковой" вёрстке нет никакого смысла, приблизительно как в олимпиадном программировании (супер-замысловатый говнокодинг на скорость). Зато есть вред: есть принцип разделения разметки, оформления, логики и контента (грубо - HTML, CSS+изображения, JS, текст/изображения), а когда кто-то ставит всё с ног на голову, это способствует развитию каши в голове.

Moskus, "никто"\"только" - всё у вас абстрактно, вы хоть фактами какими поделитесь
да и подумать над реализаций, того или иного, никак не способствует развитию каши в голове - наоборот будет отчего отталкиваться для выбора решения задачи

Moskus, Я сказал что не реализовать как на референсе на чистом css, плавность анимации и трансформация линий (глаза, рот) никак не реализовать без svg/js. Я уверен что никто этого не сделает, а все только на словах можно)
Для меня несовпадение реализации и задание свыше чем на 5% - это не реализация, а иной вариант реализации который не соответствует задачи.
Потому я высказался так категорично. В иной интерпретации конечно это реализуемо, я не спорю - но это не будет соответствовать задачи.

JRK_DV, Извините вмешаюсь в ваш спор с Алексей Ярков
Вы правы можно реализовать и на css, но только не забивайте что автору вопроса нужны переходи, а на svg они будут плавнее...

lamer350, без js - никак, согласен. Обработку dragndrop на css не сделаешь.
Все остальное вполне реализуемо средствами css.
Да, придется помучаться с расчетами, но было бы желание.

JRK_DV,

чтобы скосить глаза можно попробовать поиграть с border-radius
как нибудь так jsfiddle.net/mwtq1zha

Это великолепно, спасибо! С улыбкой я разобрался, остался только вопрос как сделать открытый рот в крайнем правом положении, есть идеи?