Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Подсветка текста css различными способами. Раскрываю секреты свойства text-shadow

Здравствуйте, гики веб-разработки и любители поэкспериментировать с чем-нибудь новеньким. Сегодня я расскажу, как создается подсветка текста css-средствами. Это достаточно интересная тема. При правильном использовании такой техники можно добиться эффектного заголовка сайта или симпатично оформленного текстового контента.

Данную публикацию я хочу посвятить не столько теоретическому материалу, сколько практическому, потому что для выполнения подсвеченного текста нужно знать очень узкий набор свойств. Так что давайте приступать к делу!

Владыка света и тьмы

Для того чтобы выполнить подсветку текстового контента нужно знать не так уж и много: основные теги языка разметки, базовый набор свойств css и css3.

Однако несмотря на это, главный инструмент, который я буду использовать, это text-shadow.

Может кого-то удивило, что тема касается свечения текста, а мы будем разбирать элемент, отвечающий за эффект тени. Таким читателям я хочу сообщить, что с помощью text-shadow можно создать не только тень и свет позади символов, а еще множество разнообразных эффектов. Разберем подробнее описываемое свойство.

Итак, text-shadow позволяет создать тень позади контента, а также описать ее характеристики: цвет, радиус размытия и сдвиг по отношению к тексту.

Свет и тьма

Синтаксис объявления перечисленных параметров выглядит следующим образом:

text-shadow: [горизонтальный сдвиг] [вертикальный сдвиг] [размытие] [цвет тени];

Хочу отметить, что можно указать минимум два обязательных значения. Это сдвиги по осям. Оставшиеся два значения можно описывать по желанию. Перечисление происходит через пробел, что также видно по выше представленной формуле.

Для того чтобы описать несколько вариантов тени, нужно ставить запятую после законченного перечисления набора характеристик. В зависимости от версий css порядок применения эффекта меняется. Так, в старой версии первый набор значений применяется к нижней части символов, а последний – к верхней. В css3 все наоборот.

Хочу отметить еще одну маленькую деталь. Не злоупотребляйте количеством теней, ведь они могут влиять на производительность браузеров. К примеру, Opera более 9 параметров не поддерживает. А если вы еще зададите большой радиус размытия тени (более 100px), то она бедненькая вообще загнется.

10 интересных интерпретации внешнего вида контента при помощи text-shadow

Сейчас я, как и обещал, приведу множество разных вариантов реализации свечения символов. Программный код первой мини-программы вставлен полностью, поэтому вам нужно просто его скопировать в специальный редактор.


Начнем с самого простого.

  1. В этом примере я показал, как выглядит обычное свечение контента.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>Обычный</title>
      <style>
      body {background: #FFFAF0;}
       p{
        text-shadow:3px -2px 7px black; 
        text-align:center;
        font-size:69px; 
       }
      </style>
     </head>
     <body>
      <p>Контент</p> 
     </body>
    </html>
  2. Далее в примерах я буду описывать только существенный для реализации программный код, поэтому вам придется дописывать doctype и обрамление в парный тег верхнего уровня – <html>. Несколько изменим задачу и создадим эффект неонового свечения.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <head>
      <meta charset="utf-8">
      <title>Неон</title>
      <style>
      body {background: #002;}
       h2{
        text-transform: uppercase;
        text-align:center;
        color: #FFF0FF;
        text-shadow: 0 0 26px #FFF0FF, 0 0 7px #FFF0FF, 0 0 55px #FF00FF, 0 0 79px #FF00FF, 0 0 86px #0000FF;  
        font-size: 59px; 
       }
      </style>
     </head>
     <body>
      <h2>Неоновое свечение</h2> 
     </body>
  3. Еще один мой любимый эффект – это вдавленный текст.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <head>
      <meta charset="utf-8">
      <title>Пресс </title>
      <style>
      body {background: #332;}
       p{
        color:rgba(0,1,0, 0.7);
        text-shadow: 1px 1px 3px rgba(253,253,253, 0.1);  
        font-size: 68px; 
        font-weight: 890;
        font-family: serif;
       }
      </style>
     </head>
     <body>
      <p>Вдавленные буквы</p> 
     </body>
  4. Вот теперь я создал объемный шрифт со свечением.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <head>
      <meta charset="utf-8">
      <title>Объем</title>
      <style>
      body {background: #53868B
    ;}
       H4{
        color:	#F0FFF0;
      text-align: center;
        text-shadow: 1px 0 5px #C1CDC1, 2px 0 0 #C1CDC1, 4px 1px 0 #C1CDC1, 5px 2px 0 #C1CDC1, 6px 3px 0 #B0C0C0, 6px 3px 0 #B0C0C0, 6px 3px 11px #100, 1px 0 35px #F0FFF0, 6px 3px 45px #98F5FF;  
        font-size: 82px; 
        font-family: serif;
       }
      </style>
     </head>
     <body>
      <h4>Объемность</h4> 
     </body>
  5. Тисненный шрифт может стать визиткой новостных сайтов.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <head>
      <meta charset="utf-8">
      <title>Тиснение</title>
      <style>
      body {background: rgba(124, 159, 80, 0.7);}
       p{
        color: rgba(1,1,0,0.6);
        text-shadow: 2px 8px 6px rgba(1,1,0,0.2), 1px 4px 6px rgba(1,1,0,0.3), 0px -5px 35px rgba(253,253,253,0.6);
        font-size: 88px; 
        font-weight: 890;
        font-family: serif;
       }
      </style>
     </head>
     <body>
      <p>Тисненные символы</p> 
     </body>
  6. Интересная интерпретация свечения в виде пылающих букв.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <head>
      <meta charset="utf-8">
      <title>Огонь</title>
      <style>
      body {background: #777;}
       p{
          text-transform: uppercase; 
            color: #FFF0FF;
            text-shadow: 2px 0 20px #FFFACD, 7px -5px 45px rgba(254,185,15,0.6), -30px -10px 50px #FFC125, 0 -45px 60px #ec760c, 45px -25px 60px rgba(93,46,5,0.3),
                  -50px -70px 60px rgba(80,27,2,0.9), 35px -65px 60px #cd4606, 15px -85px 80px #222, 65px -89px 80px rgba(2,3,2,0.6);
        font-size: 6em; 
        font-weight: 900;
       }
      </style>
     </head>
     <body>
      <p>Эффект огня</p> 
     </body>
  7. Символы начинают подсвечиваться, если курсор оказывается в области объекта.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    <head>
      <meta charset="utf-8">
      <title>Свечение</title>
      <style>
      body {background:#8B7B8B;}
       p{
         color: #5D478B;
         text-shadow: 2px 3px 10px #4F4F4F, -2px -3px 10px #4F4F4F;
        font-size: 89px; 
        font-weight: 890;
        font-family: Candara;
       }
    p:hover {
       color: rgba(93, 71, 139,0.8);
       text-shadow: 1px -1px 7px #5D478B, 3px -3px 7px #8968CD, 0 0 25px #fff, 4px -4px 15px #AB82FF, 5px -5px 10px #fff, 8px -8px 11px #fff, 8px -8px 29px #fff;
    }
      </style>
     </head>
     <body>
      <p>Наведи на меня</p> 
     </body>
  8. В этом варианте буквы выглядят так, будто отбрасывают тень на какую-то поверхность.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    <head>
      <meta charset="utf-8">
      <title>Тень</title>
      <style>
    p {
    position:relative;
    margin: 9% 20% 0 35%;
    color:#EEAEEE;
    font-size: 89px;
    text-shadow:
    -1px -1px 0 #FFF0FF,
    -2px -2px 0 #fffff0,
    -3px -3px 0 #ffe0f0, 
    -4px -4px 0 #ffd0f0,
    -5px -5px 0 #ffc0f0,
    -6px -6px 0 #FFB0F0,
    -7px -7px 7px #FFB0F0;
    transform: skewY(-19deg);
    }
    p:before {
    content:attr(title);
    position:absolute;
    color: rgba(1,0,1,.3);
    text-shadow:
    0 0 5px rgba(1,0,1,.7);
    transform-origin: bottom left;
    transform: skewX(59deg);
    z-index:-10;
    }
      </style>
     </head>
     <body>
      <p  title="Слово">Слово</p> 
     </body>
  9. Здесь я реализовал более сложный механизм. Текст отражается зеркально. К тому же для затухающего отражения используется градиент.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    
    <head>
      <meta charset="utf-8">
      <title>Отражение</title>
      <style>
    p {
    position: relative;
    text-align: center;
    color:#8B008B;
    font-size: 88px;
    }
    p:after { 
        content: attr(title); 
        left: 0;
       color: transparent;
        position: absolute; 
        top: 80%; 
       text-shadow: 0 0 13px rgba(139,0,139,.5), -11px 0 9px rgba(254,254,254,.5);
        width: 100%;
        height: 80%;
        transform: scaleY(-1);
        z-index: -10; 
        background: linear-gradient(to top, #8B008B, #FFBBFF, #FFF0FF);
    -webkit-background-clip: text;
    }
      </style>
     </head>
     <body>
      <p  title="Слово">Слово</p> 
     </body>
  10. И последнее на сегодня творческое решение. Я создал анимацию, в которой изначально текст размыт, но поле наведения на него символы увеличиваются, становятся четкими и отсвечивают.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <head>
      <meta charset="utf-8">
      <title>Размытие</title>
      <style>
     body {background: #FFF8DC;}
    p {
      font-size: 49px;
      text-align: center;
      font-weight: 770;
      text-shadow: 0 0 19px #8B668B;
      color: transparent;
      transition: all 2s;
      }
      p:hover {
    font-size: 88px;
        text-shadow: 0 0 0 #0000CD, 0 0 3px #FFF0FF, 0 0 17px #FFF0FF, 0 0 23px #0000FF; 
    margin-top: 9px;
        }
      </style>
     </head>
     <body>
      <p >Слово</p> 
     </body>

Если вам понравились предложенные варианты реализации свойства text- shadow, то не скупитесь на похвалу – подписывайтесь на мой блог и делитесь ссылкой на него с друзьями. А я вам желаю удачи в обучении!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 11 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: