Несколько примеров оформления текста

Доброго времени суток, уважаемые читатели. Продолжаю играть с эффектами текста и предложу ещё несколько вариантов, которые выполнены на чистом CSS. Все вы можете увидеть прямо на странице этого сообщения. Коды достаточно простые, устанавливаются в редакторе в формате HTML. 

Давайте смотреть.

Текст с обводкой

 

Вот такой текст с обводкой

Код

<div class="no-ie">Вот такой текст с обводкой</div>

<style>

  .no-ie {

    font-size: 2em;

    -webkit-text-stroke: 1px darkgrey;

    -webkit-text-fill-color: transparent;

    margin-bottom: 1em;

  }

</style>

 Можно  сделать обводку используя полупрозрачность 

Код

<style>

  h1{font-size: 34px;

    color: black;

    -webkit-text-stroke: 1px rgba(0,0,0,0.5);

    -webkit-text-fill-color: rgba(0,0,0,0.1);

  }

</style>

<h1>или вот такой</h1>

/div>

Растянутый текст.  Вот так примерно

 

Вот такой растянутый текст

Код

 

<style>.stretched-text {

  letter-spacing: 2px;

  display: inline-block;

  font-size: 38px;

  transform: scaleY(0.5);

  transform-origin: 0 0;

  margin-bottom: -50%;

}

span {

  font-size: 18px;

  vertical-align: top;

  }</style>

<span class="stretched-text">Вот такой растянутый текст </span> 

 Разноцветный текст 

С помощью большого количества тэгов font и его атрибутов: color и size можно сделать симпатичные разноцветные буковки

   меняющийся  текст  из  цветных  букв  и  слов!

Код примерно такой, устанавливается в режиме HTML  в редакторе сообщений. 

<font color="#22AA44" size="5"> </font><font color="#661111" size="4">м</font><font color="#885588" size="5">е</font><font color="#11EEDD" size="6">н</font><font color="#33FF77" size="5">я</font><font color="#9955BB" size="6">ю</font><font color="#44CC99" size="5">щ</font><font color="#DD3377" size="5">и</font><font color="#AA8833" size="5">й</font><font color="#77AA44" size="5">с</font><font color="#EE5555" size="4">я</font><font color="#007766" size="3"> </font><font color="#771199" size="5"> </font><font color="#DDEEDD" size="6">т</font><font color="#99CCFF" size="6">е</font><font color="#551177" size="4">к</font><font color="#336600" size="6">с</font><font color="#2299BB" size="4">т</font><font color="#448844" size="3"> </font><font color="#443366" size="5"> </font><font color="#BB99EE" size="6">и</font><font color="#228888" size="6">з</font><font color="#CCFFBB" size="4"> </font><font color="#222244" size="6"> </font><font color="#881166" size="5">ц</font><font color="#117744" size="5">в</font><font color="#886644" size="4">е</font><font color="#DD5588" size="3">т</font><font color="#55CC99" size="5">н</font><font color="#BB1166" size="4">ы</font><font color="#AAEE33" size="6">х</font><font color="#00DDAA" size="3"> </font><font color="#FF7788" size="4"> </font><font color="#441166" size="4">б</font><font color="#440099" size="5">у</font><font color="#77AA88" size="4">к</font><font color="#DDAADD" size="5">в</font><font color="#44AA11" size="4"> </font><font color="#11EEAA" size="3"> </font><font color="#77BB77" size="4">и</font><font color="#CC99CC" size="4"> </font><font color="#EE88BB" size="6"> </font><font color="#884455" size="5">с</font><font color="#77BBEE" size="6">л</font><font color="#FF6677" size="5">о</font><font color="#55BB22" size="6">в</font><font color="#EE0099" size="4">!</font><font color="#2277EE" size="3">

</font>

/div>

Для каждой буквы, как вы видите, используем вот такие стили. <font color="#22AA44" size="5"> Тут только всё зависит от фантазии.

Все статьи про варианты оформление текста можно посмотреть здесь.

Всем удачи и до встречи