Vsevidno.ru

Your text

<font size="+4">Your text</font>

Your text

<font size="+3">Your text</font>

Your text

<font size="+2">Your text</font>

Your text

<font size="+1">Your text</font>

Your text

<font size="-2">Your text</font>

Your very intresting text

<font face="Monotype Corsiva">Your very intresting text </font>

Your very intresting text

<font color="FF0000">Your very intresting text</font>

Your very intresting text

<font face="Monotype Corsiva" size="+2" color="FF0000">TEXT</font>

<span style="color:red;text-decoration:line-through;"><span style="color:blue">YOUR TEXT</span></span>

<span style="color:red;text-decoration:underline;"><span style="color:blue">Your text</span></span>

<span style="border:2px solid red; padding:3px;"><span style="color:blue;">Синий текст в красной рамке</span></span>

<span style="background-color:blue; color:white; padding:3px;">Цветной текст с цветным фоном</span>

• Посмотреть сочетаемость цветов

  ---

  Цветной текст с цветным фоном в цветной рамке

  <span style="background-color:dodgerblue; color:white; padding:3px; border:3px solid red;">Текст</span>

  
  

  ---

  Текст, подчеркнутый пунктиром
  

  <span style="border-bottom: 2px dashed red;">Текст, подчеркнутый пунктиром</span>

  
  

  ---

  Текст, подчеркнутый точками
  

  <span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>

  
  

  ---

  Текст, подчеркнутый двойной чертой
  

  <span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>

  
  

  ---

  Текст, окаймленный разноцветным пунктиром
  

  <span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>

  
  

  ---

  Текст в двойной рамке
  

  <span style="border-style: double; padding:3px;">Текст в двойной рамке</span>

  
  

  ---

  Цветной текст в двойной цветной рамке
  

  <span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>

  
  

  ---

  Ваш текст в объемной 3D-рамке
  

  <span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>

  
  

  ---

  На заметку:

  Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и получим (на примере выше):
  

  Ваш текст в объемной 3D-рамке

  то бишь рамку на всю ширину поста.

  Размеры блока div задаются атрибутами:

  div style=width:200px; height:50px;

  где width:200px; - ширина блока 200 пикселей,

  height:50px; - высота блока 50 пикселей

  Получим:

  Ваш текст в объемной 3D-рамке

  <div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>

  
  

  ---

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

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

  ---

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

  <acronym title="Hiper Text Markup Language">HTML</acronym>

  
  

  ---

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

  “А убийцей в том кино был дворецкий”

  <span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span>
  

  ---

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

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

  
  

  ---

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

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

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

  
  

  ---

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

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

  <bdo dir="rtl">Повернуть текст задом-наперед</bdo>
  

  ---

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

  <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:
  

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

  <span style=text-decoration:blink;>TEXT</span>

  
  

  ---

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

  Пример:

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

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

  <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>

  
  

  ---

  Написать текст, имея фоном картинку:
  
  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>

  
  

  ---

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

  Пример
  

  © J.Shaffer 1928

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

  
  

  ---

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

   Я  Пешу       Лесинкой!!!

  <pre>ваш текст</pre>

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

   C     Днем               Рождения!

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

  
  

  ---

  Быстро написать так: Мои поздравления!!!

  Можно ЗДЕСЬ

   

  В начало ↑