Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

Доброго времени суток, уважаемые читатели. Продолжаю играть с эффектами текста и предложу ещё несколько вариантов, которые выполнены на чистом 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"> Тут только всё зависит от фантазии.

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

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




7 комментариев:

  1. Такое ощущение, что блоггер такой же бесконечный, как Всленная.

    ОтветитьУдалить
    Ответы
    1. Семён, Вы правы. Шаблон Блоггер очень гибкий. Бесконечное поле для деятельности.

      Удалить
  2. Привет, Виктория! У меня сложилось впечатление,что я перестал быть интересен всем моим подписчикам, кроме Вас. Никто (опять же, кроме Вас) не пишет в мой блог комментариев. Но пока у меня есть хоть один читатель-почитатель, а это именно Вы,буду писать!
    Спасибо за весточку.
    Семён.

    ОтветитьУдалить
    Ответы
    1. Семён, Комментарии не всегда пишут, даже если читают. И ещё это обычно сезонное явление. Сады, огороды, заготовки. Детей к школе, отпуска. В это время такое бывает. Посещаемость обычно падает. Я сама еле время выбираю, не то чтоб комментировать. Читать и писать некогда.

      Удалить
  3. Вика, привет. С днём знаний! Пусть год будет успешным!
    Обратила внимание, что в блогах пустые места вместо картинок. Или это только у меня? Не подскажешь? Я давно не писала сообщений, может что пропустила.

    ОтветитьУдалить
  4. Привет,Люба. Тебя с началом учебного года. Терпения и детишек послушных. А глюки всякие происходят до сих пор. Но посмотрела -я твои картинки вижу и свои тоже.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML