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

Добавлен: 

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

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

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

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

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

<sm1></sm1> <sm2></sm2>

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

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

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

<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ли статья Вам очень понравилась и Вы считаете, что она достойна внимания. Тогда просто поделитесь ею, в социальной сети:


Интересная рекламма:


Возможно вам будет интересно
Текст поверх изображения на CSS Двойная рамка на CSS 3, объёмная рамка Кнопки для сайта на CSS 3

Комментарий добавил: Гость - Karen
Добавлен: 20 04 2013 22:33:57
Гость - Karen
спасибо интересный полезный материал

Комментарий добавил: Гость - Алешка
Добавлен: 26 11 2013 14:39:19
Гость - Алешка
Ждал увидеть css код, прорисовывающий смайлик, а не код, вставляющий его картинкой...

Комментарий добавил: Гость - asdfgh
Добавлен: 11 12 2013 21:06:33
Гость - asdfgh

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

Имя -

E-mail -





Читать в Яндекс.Ленте

Яндекс.Метрика


Power by xDroid. Copyright © 2009 - 2016 VEB.name
Копирование информации только с обратной ссылкой
Время генерации страницы : 0.0115 сек.