Смайлики на CSS 3

Добавлен: 2011-12-13 08:36:53

Смайлики на CSS 3

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

Добавляем в файл CSS-файл шаблона/сайта следующие правила:

sm1 {
content: url(/images/smiles/smile1.gif);
}
sm2 {
content: url(/images/smiles/smile2.gif);
}

А в коде страницы – это будет выглядеть так:

А вот это увидит пользователь:

Как вы поняли, имена тегов и соответствующих правил может быть любой, а также, любого количества.

Если вы добавляете материалы или комментарии на сайт при помощи специальной формы, то обратите внимание на следующий пример, который позволит вам по одному нажатию добавлять нужный смайл в код:

<form name="forma" action="index.php" method="post">
<div align="center"><textarea name="textarea" id="id3" rows="7" cols="75" style="width:99%;"></textarea></div>
<img src="images/smiles/smile1.gif" onClick="window.parent.document.getElementById('id3').value+= '<sm1></sm1>';" style="cursor: hand" />
<img src="images/smiles/smile2.gif" onClick="window.parent.document.getElementById('id3').value+= '<sm2></sm2>';" style="cursor: hand" />
<br>
<input type="submit" value="Отправить" />
<input type="reset" value="Отменить" />
</form>

Не забываем оставлять комментарии и отзывы, нам важно ваше мнение!

А еcли статья Вам очень понравилась и Вы считаете, что она достойна внимания. Тогда просто поделитесь ею, в социальной сети:

Комментарий добавил: Гость - Karen

Добавлен: 20 04 2013 22:33:57

Гость - Karen

спасибо интересный полезный материал

Комментарий добавил: Гость - Алешка

Добавлен: 26 11 2013 14:39:19

Гость - Алешка

Ждал увидеть css код, прорисовывающий смайлик, а не код, вставляющий его картинкой...

Комментарий добавил: Гость - asdfgh

Добавлен: 11 12 2013 21:06:33

Гость - asdfgh

Добавление комментария