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

Question

[Николай]

Столкнулся с задачей создать систему оценки на CSS. Решил найти интересный вариант и нашел вот такой референс на dribbble.


И вот вопрос, а можно как-то сделать такие фигуры (скошенные глаза, улыбка смайла) на CSS? В каком направлении изучать материал чтобы реализовать подобное?

Comments

[Ярослав Иванов]

Эс Вэ Гэ

Answer 1

[ⓒⓢⓢ]

вообще не согласен с "эсвэгэ" комментаторами, непонятно почему нельзя рисовать на css, теоретически любой свг можно описать css стилями.
практически, примеры
www.tortorse.com/demo/css3angrybirds.html
jsfiddle.net/AlexanderN/onjsw3kv/2
https://bennettfeely.com/csscreatures/

Comments

[Алексей Ярков]

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

[ⓒⓢⓢ]

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

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

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

[Алексей Ярков]

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

[Николай]

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

[Moskus]

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

[ⓒⓢⓢ]

Moskus,

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

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

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

[Moskus]

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

[ⓒⓢⓢ]

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

[lamer350]

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

[Hyubert]

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

[Anton fon Faust]

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

[Николай]

JRK_DV,

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

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

Answer 2

[lamer350]

Как на референсе - на чистом css не реализовать!
js, svg, css3, html5 минимум который здесь необходим. Все фигурки должны быть в SVG, их анимация на js, а стилизация на css.

Comments

[Николай]

Да, интересно было сделать именно на CSS. Вариант с SVG уже реализован labus.me/projects/feedback

[lamer350]

Piterski, тогда это будет без плавности, просто в png смайлы нарезать и все.

[hckn]

Piterski, какой чистый CSS тут, ты с дубу рухнул? Только SVG

[Павел Антонов]

Piterski, а не подскажете в какую сторону читать про svg анимацию, посмотрел код вроде все просто, но понял что не умею так) что-то почитать бы

[Николай]

Павел Антонов, Да я бы сам с удовольствием почитал, про SVG анимацию только слышал. Пример реализован не мной.

Answer 3

[ThunderCat]

svg, спрайты, разные картинки в png, canvas...

Comments

[Алексей Ярков]

Канвас... Сурово...