Бьющееся сердце на CSS3

[artyomst]

P.S.: Мне кажеться, что данное сердечко будет отличным подарком девушке-айтишнице на День влюблённых. Как вы считаете?

Мне так не кажется.

[Isis]

Хватит вороват мягкие знаки!

[positivecrash]

никто ничего не своровал

[ruslansavenok]

Мне кажется за такой подарок вы останетесь без девушки (:

[Seldon]

По моему будет очень прикольным подарком, главное чтобы не единственным ))

[0mm]

Не забывайте, что прежде всего, она девушка, а уже потом айтишница. Букет цветов, мне кажется, ей понравится значительно больше.

[random1911]

в прошлом году были топики про замечательную гиковскую бижутерию. Но если верстальщик подарит на 14 февраля только сайт с такой вот открыткой — едва ли это ее сильно порадует. Особенно, если она не имеет понятия, чем отличается анимация CSS3 от различных GIF-открыток, коих в интернете пруд пруди, одна ужаснее другой.

[makzimko]

у меня лично есть пару знакомых подруг которые занимаются версткой сайтов
думаю им такое получить будет приятно и они оценят

[ibnteo]

Жаль что они тоже читают хабр.

[Kirhgoff]

Мужчина же подчеркнул — девушке айтишнице. Если шарит в стилях, то понравится :)

[kirushik]

Угу. В стилях шарит, а Хабр — не читает?

[Kirhgoff]

Резонно. Тогда сразу будет как-то не очень. Мало того, что подарок айтишный, так ты его еще и не сам придумал, а дернул с хабра.

[AndreyNagih]

А моя жена уже шарит, но еще не читает =)
Но на подарок, конечно не тянет, так, с утра ссылкой порадовать :-)

[Stmf]

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

[goss]

А можно я использую это в качестве подарка своим студентам в виде лабораторной работы по веб-технологиям, а не для девушки-айтишницы?

[Nagg]

когда я смотрю на префиксы типа -moz, -webkit etc мне становится грустно…

[kichik]

можно использовать -prefix-free (http://leaverou.github.com/prefixfree/)

[kichik]

Добавьте свойства с префиксом -ms — все, что вы используете, поддерживается в IE10.

[makzimko]

благодарю за подсказку

[mrjj]

грррр, опять локальные реализации :((

[Vend3tta]

Спецификации пока не в Candidate Recommendation, что-то еще может поменяться, как, например, это недавно случилось с синтаксисом градиентов — оттого и наличие вендорных префиксов.

[RuslanCC]

CTRL+A, CTRL+C, CTRL+V
Раньше все поздравления так друг другу отправляли, а теперь сердечки анимационные слать будут. Хорошо хоть по СМС нельзя отправить

[Vend3tta]

У меня почему-то по ссылке на пример открывается пустая страница. Точнее, страница-то на месте, только вот сердца никакого нет. Появляются только некоторые элементы при уменьшении высоты вьюпорта. Такой предмет женского туалета — максимально приближенное к тому, что должно было бы отобразиться )

Наблюдаю такое в Chrome, в лисе всё хорошо.

[Vend3tta]

И да, позвольте сделать мне пару замечаний — всё же первое, что вы должны написать при создании нового документа — это доктайп. Хоть в данном случае это ни на что не влияет, тем не менее ) И почему вы реализовали положение элемента сердца на странице путем добавления тегов <br> и <center>, а не путем добавления обычного margin?

[gigimon]

Возможности CSS конечно потрясают, но очень огорчает, что в них начинают вносить функционал из языков программирования и т.п. Все же CSS это стиль, а трансформации, движения — уже что-то другое.

P.S. да и такая простыня текста тоже не говорит о «няшности» кода

[kichik]

Трансформации и движения в CSS — это декларативное описание. В данном случае, использование CSS для анимации сердца намного лучше, чем если бы это было сделано через JS. Это всего лишь картинка. Другой вопрос, что для такой картинки нужно использовать SVG, а не извращаться с блоками.

[Dooez]

Возможно ли сделать анимацию с изменяющимися градиентами? Как будто сердце надувается.

[FLAKON]

Валидатор отругал вашу страничку за не имением доктайпа) а в целом урок прияытный и полезный. Спасибо.

[DiverUA]

В качестве примера, наглядно демонстрирующего возможности CSS3 — отлично.
В реальной жизни… вы на загрузку процессора смотрели?

[vaniaPooh]

У меня даже немного дергается оно.

[orionll]

— Дайте мне, пожалуйста, вон ту красную плюшевую жопу.
— Мужчина, это не жопа, а сердце!
— Знаете, я 20 лет кардиохирургом работаю. Дайте мне вон ту красную плюшевую жопу.

[witzawitz]

Возможно, стоило отрисовать heart:after сразу нормально, а не поворачивать на 90 градусов. А то наблюдаются некоторые артефакты.



Chrome 16.0.912.77, Mac OS X 10.7.2

[sandcat]

Самоделкин и немного художник.
А красота она не в нарисованном и если девушка это понимает, то подарок состоится даже если она не айтишница.

[witzawitz]

Следуя вашей логике, получается, что смысл и не в подарках.
Уж лучше ничего не дарить, чем пульсирующую плюшевую жопу =)

[sandcat]

Дык последуйте — своей!

Например такое направление: какой тогда в смысл в красоте?

[Finom]

А у меня в хроме эпилептичный ромб вместо бьющегося сердца. Прям как в жизни :D