Каталог статей
Меню сайта

Категории статей
Это интересно [3]
web-дизайн [9]

Форма входа

Поиск по статьям


» Каталог статей » web-дизайн
Радость зануды или Подчеркивание по-взрослому

Радость зануды или Подчеркивание по-взрослому

Атныни я буду жистоко патчеркивать все замечиные ашипки!

Испугались?
Надо же как-то заставить вас учить великий-могучий HTML. А то не успеете этот освоить, а уже новые стандарты на подходе. И без CSS (каскадных таблиц стилей) тоже не обойтись.

Итак, первым делом я попыталась нарисовать красную волнистую линию. Потом плюнула на это дело и просто сделала снимок экрана в Word, вырезала оттуда нужный кусочек и сохранила его как wawe.gif.
Затем я прописала этот кусочек в интернете, чтобы всегда иметь под рукой ссылку на изображение.
Могу и вам дать: вот оно. Или она, ~~~ волна ~~~.
Осталось самое интересное: прописать подчеркивание для слов с ашипками. Смотрим код:

<span style="background: url('http://img.liveinternet.ru/images/attach/1/10471/10471274_wawe.gif') repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap;">здесь подчеркиваемое слово или знак</span>

Слишком сложно? А кто говорил, что будет легко?..
Для контейнера SPAN прописан следующий стиль: фон в виде нашей красной волны повторяется по горизонтали; отступ от нижней границы 2 пикселя (можете изменить этот параметр, если хотите); никаких других украшений текста; текст отражается браузером без переносов.
Вот и все.

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



Огромное спасибо за вдохновение и подсказку Игорю Цыгырлашу (Tigirlas Igor)!
Категория: web-дизайн | Добавил: donadecasa (12.06.2006) | Автор: Donadecasa
Просмотров: 1816 | Комментарии: 2 | Рейтинг: 5.0 |

Всего комментариев: 2
1 Slovena  
0
Спасибо большое, именно то, что искала! :)
А подчеркивание точка-тире (для выделения обстоятельств в школьных тестах) как можно сообразить?

2 donadecasa  
0
Любое подчеркивание нужно сначала сохранить как изображение.

Имя *:
Email *:
Код *: