Записи с меткой html

(и еще 20415 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

теги html

Четверг, 21 Мая 2009 г. 14:38 + в цитатник
Это цитата сообщения Alexeevna [Прочитать целиком + В свой цитатник или сообщество!]

Без заголовка

Таблицы для подбора цвета:

ТАБЛИЦА “БЕЗОПАСНЫХ” ЦВЕТОВ | “КОЛЕСО” ЦВЕТОВ | ЕЩЕ ТАБЛИЦА

Аббревиатура: HTML

Так называемый “спойлерный” текст, проявляющийся при его выделении. Типа:
“А убийцей в том кино был дворецкий”

Так называемая “буквица”: В некотором царстве…

<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш офигительно креативный текст

<p title="Пояснительный текст">Основной текст</p>

Текст “наоборот”:

Повернуть текст задом-наперед

Расстояние между словами

<div style="word-spacing: 20px;">Расстояние между словами</div>

Больше расстояние между словами

<div style="word-spacing: 40px;">Больше расстояние между словами</div>

Расстояние между буквами

<div style="letter-spacing: 10px;">Расстояние между буквами</div>

А здесь задано расстояние между строками по вертикали пятьдесят пикселов

<div style="line-height:50px;">Расстояние между строками</div>

Невидимый фрагмент записи (интересно, что невидим даже в OperaMini, хотя мобильные браузеры игнорируют многие стилевые настройки):

опаньки!

Невидимый фрагмент записи

<div style="visibility: hidden;">Невидимый фрагмент записи</div>

Еще способ скрыть текст:

<!– Ваша служебная невидимая пометка –>

Приподнять одну фразу на 5 пикселей над текстом

Приподнять <span style="position: relative; top:-5px;">фразу</span>

Опустить одну фразу на 5 пикселей ниже текста

Опустить <span style="position: relative; bottom:-5px;">фразу</span>

Повернуть текст на 90 градусов (работает только в IE):

Раз, два, три, четыре, пять, шесть, семь

<span style=writing-mode:tb-rl;>Текст</span>

Следующий трюк, напротив, работает только в Opera и Mozilla FF:

Раз, два, три, четыре, пять, шесть

Выделение цитаты в тексте.

Пример:

Еще поэт-романтик Новалис писал в Средние Века:

Любимая! Ты - аббревиатура Вселенной.

<div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>

Написать текст, имея фоном картинку:

/img527.imageshack.us/img527/7710/black41hj8.gif"" target="_blank">http://img527.imageshack.us/img527/7710/black41hj8.gif");">Светить всегда, светить везде - до дней последних донца! Светить - и никаких гвоздей!

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: white; padding: 8px; background-image:url("URL картинки");"> ТЕКСТ</div>

Лучше брать маленькую картинку - она будет автоматом повторяться, пока продолжается текст. Атрибутами width и height в % или px (пикселах) можно задать определенный размер фоновой области

Эффект с подсветкой текста (наведите курсор на текст):

в некоторых блогсервисах (жж) может не работать

МОЙ ЗАМЕЧАТЕЛЬНЫЙ И КРЕАТИВНЫЙ ТЕКСТ

<font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">МОЙ ТЕКСТ</font>

Разбить текст на две колонки:

текст левой колонки

текст правой колонки

Код:

<table width=100%>

<tr><td width=50%>

текст левой колонки

<td width=50%>

текст правой колонки

</table>

Правильное (и уважительное) указание автора под скопированным текстом (цитатой) с всплывающей доп. информацией при наведении курсора

Пример

<div align=right><cite title="Информация">© АВТОР</cite></div>

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Я

  Пешу

       Лесинкой!!!

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым “моноширинным” шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:



C

     Днем

               Рождения!

<pre style="font-family:'Arial Black'">ваш текст</pre>

Метки: html

Комментарии (0)

теги html

Четверг, 21 Мая 2009 г. 14:37 + в цитатник
Это цитата сообщения Alexeevna [Прочитать целиком + В свой цитатник или сообщество!]

Заголовок

Бегущая строка

Поскольку это “домашний” тег Internet Exlorer, другие браузеры до сих пор не все корректно отображают работу различных его атрибутов

your running text

your message here

your running text

your message here

your running text

your text here

your exciting message hereyour exciting message hereyour exciting message hereyour exciting message here

<marquee bgcolor="pink" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee><marquee bgcolor="silver" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee>

Останавливаем строку наведением курсора мыши

БОНУС

Сайты, где много движущихся анимашек:

glitter-graphics.com

bigoo.ws

ann-pages.narod.ru/anim.htm

Flying text

<marquee direction="up" scrollamount="1" height="150" style="filter:wave(add=1, phase=10, freq=2, strength=300); colortag="red";><font color="navy" size=+3>FLYING TEXT</font></marquee>

« П Л Я Ш Е М и П О Е М ! !»

Можно типа информера прикрутить:

- Я недавно на свадьбе был!
- А что у тебя с лицом?
- Разбили на счастье.
———-
- Почему рука забинтована?
- Дятла с ладошки кормила…
———-
Мне приходится работать, он любит отдохнуть. Я - злой, он - добрый. Я живу с женой, он - шлындает по девочкам. С большим трудом я понимаю, как вообще мы можем с ним уживаться в одном человеке. ———-

<marquee style="background:pink; padding:10px; border-right: silver 2px solid; border-top: silver 2px solid; border-left: silver 2px solid; border-bottom: silver 2px solid;" scrollamount=1 scrolldelay=60 direction=up width=250 height=60>ТЕКСТ</marquee>

Движущиеся галереи: