Текст html с тенью: text-shadow | htmlbook.ru

Разное 

Содержание

Тень для текста, картинки, блока

Здравствуйте уважаемые начинающие веб-мастера

Продолжаем знакомство с Оригинальными эффектами CSS

В предыдущей статье мы научились делать на странице различные блоки.

А сейчас, я расскажу и покажу, как и какую тень можно сделать для блока, текста и изображения, при помощи средств CSS.

Для создания тени в CSS существуют два свойства:

1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текстa

Записывается так:


box-shadow: 4px 4px;

text-shadow: 4px 4px;

Значений, определяющих форму тени, может быть больше двух, и ниже на примерах, мы это подробно разберём.

Раньше у этих свойств были проблемы с кросбраузерностью, и при их написании применялись префиксы. Однако в последних версиях браузеров Chrome 31.0.1650.63, Yandеx 13.1, Opera 12.15, Internet Explorer 11, Firefox 23.0, Safari 5.1.4, эти свойства работают без префиксов.

На всякий случай, если кто то пользуется браузерами более ранних версий, привожу список префиксов.

-moz-box-shadow — значение для Mozilla Firefox 3.6 + ;

-webkit-box-shadow — Safari, Chrome, iOS, Android 2.1-3.0 ;

-o-box-shadow — значение для Opera 11.10 + ;

-ms-box-shadow — значение для IE10 + ;

Для text-shadow — аналогично.

Внешний вид тени (направление, цвет, размер, размывание), задается значениями. Рассмотрим их подробно, так как именно ими нам придётся оперировать, чтобы реализовать задуманный вид.

Итак, чтобы задать простую тень блоку, достаточно двух значений, которые зададут сдвиг тени вправо и вниз. Если написать эти значения со знаком минус, то сдвиг тени будет влево и вверх.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
  .blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Для текста тень задаётся аналогично.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как сделать тень CSS</title>
<style type="text/css">
  .blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px;
}
  p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 10px 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Следующим шагом зададим цвет для тени. Для этого нужно просто ввести в значение код цвета, причем можно использовать любой формат, от шестеричного до rgba (с прозрачностью)

box-shadow: -4px -4px #0ea8f4;
text-shadow: -10px -10px #94a7af;

Чтобы тень стала более соответствовать своему имени, можно размыть границы тени. Для этого в значение вводиться третий параметр.

box-shadow: 4px 4px 5px #0ea8f4;
text-shadow: 10px 10px 2px #94a7af;

По умолчанию, все браузеры отображают тень того же размера, что и объект её отбрасывающий. Можно её увеличить. Для этого в значения вводиться четвёртый параметр.

И если при этом обнулить сдвиг, и размывание, то получается довольно оригинальный эффект рамки вокруг блока, что очень хорошо смотрится в сочетании с border-radius

box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;

К огромному сожалению, четвёртое значение для text-shadow, браузерами не поддерживается, поэтому растянуть тень для текста можно только при помощи сдвигов, и только в двух направлениях.

Делается это следующим образом: задаётся несколько значений теней, сдвиг у которых последовательно увеличивается на 1 пиксель. Каждая тень пишется через запятую.

text-shadow: 1px 1px #94a7af,

2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;

Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.

Если продолжить экспериментировать в этом направлении, то можно получить довольно таки оригинальные результаты. Ведь кроме сдвига у каждой тени можно менять цвет, и направление сдвига.

Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.

Это же свойство — множество теней, отлично применяется к box-shadow, принимающего четвёртое значение (растяжение тени).

При помощи него можно сделать для блока очень красивую рамку. Например такую:

box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
border-radius:10px;

Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style.

Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.

Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.

Псевдоклассы и псевдоэлементы не входят в html код страницы, поэтому у них и приставка «псевдо», но что касается стилей, то стили к ним можно применять так же, как к обычным элементам.

Сначала применим псевдокласс :hover. Он изменяет цвет элемента, при наведении на него курсора.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok{
background: #fcdd76;
width: 300px;

height: 100px;
box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;
}
.blok:hover{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 0px 0px 0px 5px #f26522;
border-radius: 10px;
}
p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;
font-weight: bold;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

До наведения курсора:


 
При наведении курсора:

 

 
Далее обратимся к псевдоэлементам :before и :after, а так же свойству transform

При помощи псевдоэлементов :before и :after, можно добавить дополнительные стили до и после элемента.

Свойство transform, согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.

Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok {
position: relative;
width: 30em; /*1em = font-size, в нашем случае - 20px*/
height: 10em;
padding: 0.5em; /*Сдвиг левой тени*/
background: #ffe5b4;
border-radius: 0.5em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.7);
/*Тень дублируется, для более чёткого отображения границы*/

}
.blok:before,
.blok:after {
content:""; /*обязательная строка, для правильного отображения псевдоэлементов*/
position: absolute;
z-index: -5;
bottom: 1em;
width: 90%; /*Ширина тени относительно блока*/
height: 20%;
box-shadow: 0 15px 7px rgba(0, 0, 0, 0.

7);
-webkit-transform: rotate(-3deg); /*поворот угла*/
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.blok:after {
right: 0.5em; /*Отступ тени от правого края*/
left: auto;
-webkit-transform: rotate(3deg); /*обратный поворот угла*/
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
p {
font-size: 20px;
font-weight: bold;
padding-left: 9em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Результат:

Вот такой получается вогнутый блок, теперь давайте сделаем выгнутый.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
. blok {
position: relative;
width: 30em;
height: 9em;
padding: 1em;
margin: 2em 0.5em 4em;
background: #ffe5b4;
box-shadow: 0 1px 5px #464451;

}

.blok:before,
.blok:after {
content: "";
position: absolute;
z-index: -2;

}

.blok:before {
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
box-shadow: 0px 1px 15px #464451;
border-radius: 120px / 15px;
}

p {
font-size: 20px;
font-weight: bold;
padding-left: 10em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}

</style>
</head>
<body>
<div>
<p>Блок с тенью</p>
</div>
</body>
</html>

Результат:

Пока всё. Желаю творческих успехов.


Перемена

Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!

Градиент CSS. Плавный переход от одного цвета к другому < < < В раздел > > > Прозрачные изображения и прозрачный текст CSS
 

CSS: тени

Отбрасывание теней

С момента написания этой страницы во многие реализации CSS было добавлено свойство ‘box-shadow’ из CSS уровня 3, что делает описанный ниже метод необязательным. Смотрите “Закругленные углы и блоки с тенью” в качестве примера. Эта страница также показывает более мощный, но в то же время более сложный, способ создания теней при помощи CSS уровня 2.

В CSS2 нет свойства, чтобы добавить тень к блоку. Вы можете попробовать добавить кайму справа и внизу, но это не будет выглядеть правильно. Тем не менее, если у вас есть два вложенных элемента, вы можете использовать внешний элемент как тень для внутреннего. Например, если у вас есть такой текст (HTML):

<div class=back>
  <div class=section>
    <h3>Пусть роза пахнет, - разве ощущает</h3>
    <address>Генрих Гейне (1797-1856), пер.  Михаил Фроман</address>

    <p>Пусть роза пахнет, - разве ощущает<br>
    ...
  </div>
</div>

Вы можете использовать наружный DIV в качестве тени для внутреннего. Результат должен выглядеть как эта отдельная страница. Сначала, задайте фоновый цвет для BODY (в нашем примере — светло-зеленый), наружный DIV сделайте немного темнее фона (зелено-серый) и внутренний DIV отличным от фона (например, желто-белый):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Затем, используя свойства margin и padding, вы смещаете внутренний DIV немного влево и вверх от наружного DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Вам также нужно переместить наружный DIV немного вправо. И если у вас несколько секций, вы возможно, захотите оставить между ними немного места:

div.back {margin: 3em 0 3em 5em}

В принципе, это всё, что надо сделать. Вы также можете добавить рамку вокруг внутреннего DIV, если хотите. Вы также, возможно, захотите сделать заливку внутри него, например:

div.section {border: thin solid #999; padding: 1.5em}

Разумеется, вы можете изменять размер теней на ваш вкус.

Текстовые тени

В CSS действительно есть свойство для добавления тени к тексту. У него четыре параметра: цвет тени, горизонтальный отступ (позитивный — вправо), вертикальный отступ (позитивный — вниз) и размытие (0 — резкая тень). Например:

h4 { text-shadow: red 0.2em 0.3em 0.2em }

У этого текста есть тень?

Тень блока и тень текста в CSS, внутренняя тень

Тени блока

Свойство box-shadow устанавливает тени блока. Значением этого свойства является перечисление параметров, которые определяют отображение тени. Параметры перечисляются в следующем порядке:

  1. горизонтальное смещение (обязательно)
  2. вертикальное смещение (обязательно)
  3. размытие
  4. размер
  5. цвет (обязательно)
  6. расположение

Смещения, размытие и размер указываются в единицах измерения CSS. Вместо параметров можно указать значение none, которое устанавливает отсутствие тени. Это значение используется, когда нужно убрать тени, если они ранее были заданы.

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

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

Стиль:

+

7
8
9
10
11
12
13
14

div
  {
  width: 150px;
  height: 100px
  margin: 50px;
  box-shadow: 10px 10px #707070;
  background-color: Blue;
  }

HTML код:

Попробуйте установить другие смещения. Задайте отрицательные значения.

Следующий параметр — это размытие. Оно делает плавный переход от цвета тени к цвету фона. Размытие занимает отдельное место, поэтому увеличивает размер тени. У него нет отрицательных значений. Добавим этот параметр в пример. Блок получится такой:

Установка такой тени выглядит так:

12

box-shadow: 10px 10px 5px #707070;

Далее следует изменение размера. Положительное значение увеличивает размер тени, а отрицательное уменьшает. Совместно со смещением этот параметр позволяет создавать различные эффекты. Пример:

12

box-shadow: 50px 30px 1px -23px #707070;

В CSS существует возможность создать внутреннюю тень. Если в значении свойства box-shadow указать слово inset, то тень располагается не снаружи блока, а внутри. Из-за этого блок становится как бы вогнутым. На мой взляд, внутренняя тень выглядит не очень красиво, поэтому используется не часто. Тень отображается на фоне блока, но находится под содержимым. Слово пишется после всех остальных параметров. При этом изменение размера устанавливается по-другому — положительное значение уменьшает размер тени. Оно позволяет отобразить тени со всех сторон блока.

12

box-shadow: 6px 6px 30px 10px #707070 inset;

Тени текста

Тексту также можно задать тень. Это делается с помощью свойства text-shadow. Значение этого свойства указывается практически также, как для блоков, только оно имеет меньше параметров. Они перечисляются в следующем порядке:

  1. горизонтальное смещение
  2. вертикальное смещение
  3. размытие
  4. цвет

Указание смещений является обязательным. Для примера создадим такой текст:

Текст

Он создаётся так:

Стиль:

15
16
17
18
19
20

p
  {
  margin: 50px;
  font: bold 60px Verdana;
  text-shadow: 3px 3px #AAA;
  }

HTML код:

Если тени текста установить размытие с большим значением, то она может выглядеть совсем по-другому. Пример:

Текст

19

text-shadow: 4px 4px 10px #FF053A;

Изменение цвета текста и добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h2 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h2>Заголовок имеет свой собственный цвет текста</h2>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>
Попробовать »

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
  4. цвет для тени
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h2 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      . test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

Внутренняя тень текста с помощью CSS

Вот моя лучшая попытка:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0. 8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }
   
    <span>Inner Shadow</span>

Проблема в том, как обрезать тени, которые растекаются по краям !!! Я пробовал использовать webkit, используя background-clip: text, но webkit отображает тень над фоном, поэтому это не работает.

Создание текстовой маски с помощью CSS?

Без верхнего слоя маски невозможно создать настоящую внутреннюю тень на тексте.

Возможно, кому-то стоит порекомендовать W3C добавить background-clip: reverse-text , который прорезал бы маску через фон вместо того, чтобы вырезать фон, чтобы поместиться внутри текста.

Либо это, либо визуализируйте тень текста как часть фона и закрепите ее с помощью background-clip: text.

Я попытался абсолютно позиционировать идентичный текстовый элемент над ним, но проблема в background-clip: текст обрезает фон, чтобы он поместился внутри текста, но нам нужно обратное.

Я пробовал использовать text-stroke: 20px white; как для этого элемента, так и для элемента над ним, но обводка текста идет как внутрь, так и наружу.

Альтернативные методы

Поскольку в настоящее время нет возможности создать маску инвертированного текста в CSS, вы можете обратиться к SVG или Canvas и создать изображение для замены текста с тремя слоями, чтобы получить свой эффект.

Поскольку SVG является подмножеством XML, текст SVG по-прежнему будет доступен для выбора и поиска, и эффект может быть достигнут с меньшим количеством кода, чем Canvas.

Было бы труднее добиться этого с помощью Canvas, потому что у него нет dom со слоями, как у SVG.

Вы можете создать SVG либо на стороне сервера, либо как метод замены текста javascript в браузере.

Дальнейшее чтение:

SVG против Canvas:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Обрезка и маскирование с текстом SVG:

http://www. w3.org/TR/SVG/text.html#TextElement

Свойство text-shadow — тень текста

Свойство text-shadow задает тень тексту. В качестве значения свойство принимает 4 параметра, перечисляемые через пробел, либо ключевое слово none, отменяющее тень совсем (это значение по умолчанию).

Синтаксис

селектор { text-shadow: сдвиг_по_x сдвиг_по_y размытие цвет; }

селектор { text-shadow: none; }

Параметры

ПараметрОписание
сдвиг по x Задает смещение тени по оси X.
Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y Задает смещение тени по оси Y.
Положительное значение смещает вниз, отрицательное — вверх.
размытие Задает размытие тени.
Чем больше значение — тем более размытой будет тень.
Необязательный параметр. Если не задан — тень будет четкой.
цвет Задает цвет тени в любых единицах для цвета.
Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям и размытие задаются в любых единицах для размеров, кроме процентов.

Пример

Давайте сдвинем тень вниз и влево и добавим небольшое размытие:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 5px 5px 3px black; }

:

Пример . Четкая тень

А теперь сделаем тень красного цвета, сдвинем ее вниз и влево, но уберем размытие — тень будет четкой:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 10px 10px red; }

:

Пример .

Равномерная тень

Сейчас тень не сдвинута, но к ней добавлено размытие:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 0px 0px 3px black; }

:

Смотрите также

  • свойство box-shadow,
    которое задает тень контейнеру

Текстовые эффекты • Про CSS

В посте представлены некоторые эффекты на основе text-shadow.

text-shadow — это свойство, описывающее тень, отбрасываемую текстом. В отличие от box-shadow, тень не обрезается фигурой, ей нельзя задать размер (только радиус размытия) и она не поддерживает параметр inset, то есть нельзя сделать внутреннюю тень.

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

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст

h2 {
  text-shadow:
    1px 1px 1px silver,
    -1px 1px 1px silver;
  color: white;
  transition: all .5s;
}

h2:hover {
  text-shadow:
    -1px -1px 1px silver,
    1px -1px 1px silver;
  color: white;
}

Вдавленный текст

h2 {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #222;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #1A1A1A;
}

Размытие

h2 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 0 0 15px #999;
  color: transparent;
  transition: all .5s;
}

h2:hover {
  text-shadow: 0 0 0 #333;
}

Контуры

h2 {
  text-shadow:
    1px 1px 0 orange,
    1px -1px 0 orange,
    -1px 1px 0 orange,
    -1px -1px 0 orange;
  color: white;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px 0 yellowgreen,
    1px -1px 0 yellowgreen,
    -1px 1px 0 yellowgreen,
    -1px -1px 0 yellowgreen;
  }
h2 {
  text-shadow:
    -1px -1px #FFF,
    -2px -2px #FFF,
    -1px 1px #FFF,
    -2px 2px #FFF,
    1px 1px #FFF,
    2px 2px #FFF,
    1px -1px #FFF,
    2px -2px #FFF,
    -3px -3px 2px #BBB,
    -3px 3px 2px #BBB,
    3px 3px 2px #BBB,
    3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
}

h2:hover {
  color: yellowgreen;
}

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени

h2 {
  text-shadow:
    1px 1px 0 hsl(20,100%,50%),
    2px 2px 0 hsl(20,100%,50%),
    3px 3px 0 hsl(35,100%,50%),
    4px 4px 0 hsl(35,100%,50%),
    5px 5px 0 hsl(45,100%,50%),
    6px 6px 0 hsl(45,100%,55%),
    7px 7px 0 hsl(55,100%,60%),
    8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px -1px 0 hsl(290,100%,40%),
    2px -2px 0 hsl(290,100%,40%),
    3px -3px 0 hsl(280,100%,60%),
    4px -4px 0 hsl(280,100%,60%),
    5px -5px 0 hsl(270,100%,75%),
    6px -6px 0 hsl(270,100%,80%),
    7px -7px 0 hsl(260,100%,85%),
    8px -8px 0 hsl(260,100%,90%);
  color: hsl(300,100%,30%);
}

Полосатая тень

h2 {
  display: inline-block;
  position: relative;
  letter-spacing: .05em;
  text-shadow:
    1px 1px mediumturquoise,
    -1px 1px mediumturquoise,
    -1px -1px mediumturquoise,
    1px -1px mediumturquoise;
  color: white;
  transition: all 1s;
}

h2:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  bottom: -15px;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    rgba(72, 209, 204, 0) 2px,
    mediumturquoise 3px,
    rgba(72, 209, 204, 0) 3px )
    repeat;
  background-size: 4px 4px;
}

h2:after {
  content: attr(data-name);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -2;
  text-shadow:
    1px 1px white,
    2px 2px white,
    3px 3px white,
    4px 4px white;
  color: white;
  transition: all 1s;
}

h2:hover {
  color: lemonchiffon;
}

h2:hover:before {
  animation: 5s move_lines infinite linear;
}

h2:hover:after {
  color: lemonchiffon;
  text-shadow:
    1px 1px lemonchiffon,
    2px 2px lemonchiffon,
    3px 3px lemonchiffon,
    4px 4px lemonchiffon;
}

@keyframes move_lines {
  100% {
    background-position: 40px 40px;
  }
}

Идея не моя, найдено тут: codepen. io/lbebber/pen/BzoHi

Живое подчеркивание

h2 {
  display: inline-block;
  text-shadow:
    1px 1px 1px white,
    1px -1px 1px white,
    -1px 1px 1px white,
    -1px -1px 1px white;
  color: steelblue;
  transition: all 1s;
}

h2:after {
  content: "";
  display: block;
  position: relative;
  z-index: -1;
  width: 100%;
  margin: auto;
  border-bottom: 3px solid steelblue;
  bottom: .15em;
  transition: all 1s;
}

h2:hover:after {
  width: 0%;
  border-bottom-width: 1px;
}

Подводка

h2 {
  text-shadow:
    1px 1px white,
    2px 2px #777;
  color: #333;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px white,
    2px 2px tomato;
  color: crimson;
}

Разъезжающийся текст

h2 {
  overflow: hidden;
  text-shadow:
    0 0 tomato,
    0 0 yellowgreen,
    0 0 skyblue;
  color: transparent;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -400px 0 tomato,
    400px 0 yellowgreen,
    0 0 skyblue;
  }

Тень текста CSS

Тень текста

Свойство text-shadow добавляет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Эффект тени текста!

Затем добавьте цвет (красный) к тени:

Эффект тени текста!

Затем добавьте эффект размытия (5 пикселей) к тени:

Эффект тени текста!

Проверьте себя упражнениями!

Все свойства текста CSS

Объект Описание
цвет Устанавливает цвет текста
направление Задает направление текста / направление письма
межбуквенный интервал Увеличивает или уменьшает расстояние между символами в тексте
высота строки Устанавливает высоту строки
выравнивание текста Задает горизонтальное выравнивание текста
оформление текста Указывает украшение, добавленное к тексту
отступ текста Задает отступ первой строки в текстовом блоке
текстовая тень Задает эффект тени, добавляемый к тексту.
преобразование текста Управляет использованием заглавных букв в тексте
переполнение текста Указывает, как сообщение о переполненном содержимом, которое не отображается, для пользователя.
юникод-биди Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе.
с выравниванием по вертикали Задает вертикальное выравнивание элемента
белое пространство Определяет, как обрабатывается пустое пространство внутри элемента
межсловный интервал Увеличивает или уменьшает расстояние между словами в тексте


text-shadow — CSS: каскадные таблицы стилей

Свойство CSS text-shadow добавляет тени к тексту. Он принимает список теней, разделенных запятыми, которые будут применяться к тексту и любому из его украшений . Каждая тень описывается некоторой комбинацией смещений X и Y от элемента, радиуса размытия и цвета.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

 
тень текста: 1px 1px 2px черный;


тень текста: # fc0 1px 0 10px;


тень текста: 5px 5px # 558abb;


тень текста: белый 2px 5px;


тень текста: 5px 10px;


текстовая тень: наследовать;
текстовая тень: начальная;
тень текста: не задано;

Это свойство указывается в виде списка теней, разделенных запятыми.

Каждая тень задается двумя или тремя значениями , за которыми необязательно следует значение . Первые два значения — это значения и . Третье, необязательное, значение — это . Значение — это цвет тени.

Когда дается более одной тени, тени применяются спереди назад, причем первая указанная тень находится сверху.

Это свойство применяется к псевдоэлементам :: first-line и :: first-letter .

Значения

<цвет>
Необязательно. Цвет тени. Его можно указать до или после значений смещения. Если не указано иное, значение цвета остается на усмотрение пользовательского агента, поэтому, когда требуется согласованность между браузерами, вы должны определить его явно.
<смещение-x> <смещение-y>
Обязательно.Эти значения определяют расстояние тени от текста. определяет горизонтальное расстояние; отрицательное значение помещает тень слева от текста. определяет вертикальное расстояние; отрицательное значение помещает тень над текстом. Если оба значения равны 0 , тень помещается непосредственно за текстом, хотя она может быть частично видна из-за эффекта .
<радиус размытия>
Необязательно. Это значение <длина> . Чем выше значение, тем больше размытие; тень становится шире и светлее. Если не указано, по умолчанию используется 0 .
  нет |  # где  = [ {2,3} && ? ] где  =  |  |  |  |  | <имя-цвета> | текущий цвет | <цвет устаревшей системы>, где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |

Простая тень 

 . red-text-shadow {
  text-shadow: красный 0 -2px;
}  
  
 Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventory.

Множественные тени 

  .white-text-with-blue-shadow {
  тень текста: 1px 1px 2px черный, 0 0 1em синий, 0 0 0.2em синий;
  цвет белый;
  шрифт: 1.5em Georgia, с засечками;
}  
  
 Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    Totam rem aperiam, eaque ipsa quae ab illo inventory.
Таблицы

BCD загружаются только в браузере

Примечания Quantum CSS

  • Gecko имеет ошибку, из-за которой переход s не будет работать при переходе от text-shadow с указанным цветом к text-shadow без указан цвет (баг 726550). Это было исправлено в новом параллельном движке CSS Firefox (также известном как Quantum CSS или Stylo, который планируется выпустить в Firefox 57).

Тени | HTML Dog

Коробка теней

box-shadow — это стандартное свойство CSS, которое поможет вам начать работу, и его значение может состоять из нескольких частей:

 
box-shadow: 5px 5px 3px 1px # 999
  • Первое значение — это горизонтальное смещение — насколько тень смещается вправо (или влево, если оно отрицательное)
  • Второе значение — это вертикальное смещение — насколько тень смещается вниз (или вверх, если оно отрицательное)
  • Третье значение — это радиус размытия — чем выше значение, тем менее резкая тень.(«0» абсолютно чёткое). Это необязательно — его отсутствие эквивалентно установке «0».
  • Четвертое значение — это расстояние распространения — чем выше значение, тем больше тень («0» — унаследованный размер блока). Это также необязательно — его отсутствие эквивалентно установке «0».
  • Пятое значение — цвет . Это тоже необязательно.

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

Внутренние тени

Вы также можете применить тени к внутренней части коробки, добавив «вставку» в список:

 
box-shadow: вставка 0 0 7px 5px #ddd;

Великолепно!

Базовая тень и внутренняя тень.

Вы можете встретить версии box-shadow для конкретных браузеров, такие как -moz-box-shadow и -webkit-box-shadow . Игнорируйте их. Они старые и глупые. Большинство современных браузеров понимают box-shadow , включая Internet Explorer версии 9 и выше.

Тени текста

box-shadow , как следует из названия, имеет только глазки для коробок. Непостоянный зверь. Но вы также можете применить тени к контуру текста с помощью (сюрприз!) text-shadow :

 
тень текста: -2px 2px 2px # 999;

Аналогично box-shadow:

  • Первое значение — горизонтальное смещение
  • Второе значение — смещение по вертикали
  • Третье значение — радиус размытия (необязательно)
  • Четвертое значение — цвет (необязательно, хотя при его отсутствии тень будет того же цвета, что и сам текст)

Обратите внимание, что для тени текста нет опции расстояния распространения или вставки.

text-shadow браузеру потребовалось немного больше времени, чтобы понять это. Internet Explorer 9 и более ранние версии этого не понимают, поэтому мы рекомендуем использовать его только в некритических ситуациях.

Text Shadow CSS Generator Online

АНОНС

Галерея эффектов

Неон

Пылающий

Люкс

Гладкий

Ретро

Светящийся

Тактильные

Новости

Конфеты

Плавающий

80-х

Дальний

Наброски

Любовь

Вставка

Блоки

Могила

Цельный

Мультфильм

Вегас

комикс

глубокий

Мумия

Герой

Дракула

Размытые

Эмбосс

Пресс

Вырезать

Призрак

Выберите предопределенный стиль из галереи или сгенерируйте текстовую тень в соответствии с вашими предпочтениями.Установите желаемые атрибуты, чтобы получить код CSS.

Сдвиньте тень вправо / вниз, установите размытие и непрозрачность и выберите цвет из палитры, чтобы получить свой CSS. Используйте онлайн-редактор, чтобы настроить стиль вручную. Следите за эволюцией вашей тени в режиме предварительного просмотра, где вы можете установить собственный текст и цвет фона.

Так же, как генератор теней блока, этот инструмент также позволяет добавлять несколько теней в ваш дизайн с помощью кнопки Добавить новый . Создавайте удивительные проекции, определяя неограниченный список темных областей или форм, создаваемых телом, проходящим между лучами света и поверхностью.Загляните в галерею эффектов для вдохновения и посмотрите, как они созданы. Щелкните один из них, чтобы заполнить редактор и изменить их дизайн. Выбор объекта из галереи приведет к удалению текущего прогресса в работе без предупреждения.

Обратите внимание, что последние пять элементов в галерее (Blurry, Emboss, Press, Carve, Ghost) нельзя настроить после загрузки для предварительного просмотра, поскольку они используют цвета альфа-канала и другие атрибуты, не поддерживаемые этим веб-сайтом. Например, дизайн «Призрак» имеет полностью прозрачный цвет текста, а вся видимая и читаемая часть состоит из теней.Другой элемент, называемый «Carved», также является прозрачным и использует background-clip: text , который показывает фон только там, где находится текст.

Совет разработчика

Pro: перенесите среду разработки / проектирования веб-приложений в облако с помощью высокопроизводительного Citrix vdi из CloudDesktopOnline и получите легкий удаленный доступ к основным инструментам веб-разработки из любого места на любом устройстве (ПК / Mac / Android / iOS ). Узнайте больше о MS Azure и управляемых сервисах Azure, посетив одного из ведущих поставщиков решений для облачного хостинга — Apps4Rent.

Создание светящейся тени текста с помощью HTML и CSS

Создание светящейся тени текста с помощью HTML и CSS

Чтобы создать светящуюся тень текста, мы будем использовать HTML для создания структуры и CSS для стилизации текста. С помощью CSS мы можем добавить тень к тексту.

HTML-код: В этом разделе мы разработаем базовую структуру кода.

< html lang = "en" >

< голова >

< мета кодировка = "UTF-8" >

< meta name = "viewport"

content = " width = device -width,

начальная = 1 .0 ">

< title > Светящийся текст title >

< ссылка rel = "таблица стилей" href = "style. css" >

головка >

< корпус >

< h2 > Здравствуйте! h2 >

< h2 > GeeksforGeeks h2 >

кузов >

html >

Код CSS: В этом разделе мы будем использовать некоторые свойства CSS для создания светящейся тени текста .Свойство CSS text-shadow применяет тень к тексту.
Свойство CSS text-shadow добавляет тени к тексту. Он принимает список теней, разделенных запятыми, которые будут применяться к тексту и любому его украшению. Каждая тень описывается некоторой комбинацией смещений X и Y от элемента, радиуса размытия и цвета.

кузов {

фон : черный ;

}

ч 1 {

верхний край : 150px ;

выравнивание текста : центр ;

font-size : 60px ;

font-family : «вековая готика» ;

цвет : #ffffcc ;

текстовая тень : 0 0 5px #fff ,

0 0 10px #fff ,

0 0 20px зеленый ,

0 0 30px зеленый ,

0 0 40px зеленый ,

0 0 55px зеленый ,

0 0 70px зеленый ;

}

Полный код: Это комбинация двух вышеуказанных разделов кода.

< html lang = "en" >

< голова >

< мета кодировка = "UTF-8" >

< meta name = "viewport"

content = " width = device -width,

начальная = 1 .0 ">

< title > Светящийся текст title >

< стиль >

кузов {

фон: черный;

}

h2 {

верхнее поле: 150 пикселей;

выравнивание текста: по центру;

размер шрифта: 60 ​​пикселей;

семейство шрифтов: «вековая готика»;

цвет: #ffffcc;

тень текста: 0 0 5px #fff,

0 0 10 пикселей #fff,

0 0 20 пикселей зеленый,

0 0 30 пикселей зеленый,

0 0 40 пикселей зеленый,

0 0 55 пикселей зеленый,

0 0 70 пикселей зеленый;

}

стиль >

головка >

< корпус >

< h2 > Здравствуйте! h2 >

< h2 > GeeksforGeeks h2 >

кузов >

html >

Выход:


CSS | Свойство text-shadow - GeeksforGeeks

CSS | text-shadow Свойство

Свойство text-shadow в CSS используется для добавления теней к тексту. Это свойство принимает список разделенных запятыми теней, которые будут применяться к тексту. По умолчанию свойство text-shadow равно none.
Синтаксис: 

text-shadow: h-shadow v-shadow blur-radius цвет | нет | начальный |
наследовать;

Стоимость объекта:

  • h-shadow: Определяет положение горизонтальной тени
  • v-shadow: Определяет положение вертикальной тени
  • blur-radius: Используется для установки радиуса размытия.Значение по умолчанию - none.
  • цвет: Используется для установки цвета тени
  • начальный: Он используется для установки значения text-shadow по умолчанию.
  • наследовать: Это свойство наследуется от своего родителя.

Пример:

< html >

< голова >

< титул >

CSS | text-shadow Свойство

ttile >

< стиль >

h2 {

тень текста: 5px 5px 8px # 00FF00;

}

стиль >

головка >

< корпус >

< h2 >

GeeksforGeeks

h2 >

кузов >

html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством border-bottom-color , перечислены ниже:

  • Google Chrome 4. 0
  • Internet Explorer 10.0
  • Firefox 3.5
  • Опера 9,6
  • Safari 4.0

CSS: тени текста

CSS: тени текста

См. Также указатель всех подсказок.

На этой странице:

Тени текста

CSS-уровень 3 имеет свойство text-shadow для добавления тени. к каждой букве некоторого текста. В простейшем виде это выглядит что-то вроде этого:

h4 {тень текста: 0.1em 0.1em # 333}

Добавляет темно-серую (# 333) тень немного правее (0,1em) и вниз (0,1em) относительно обычного текста. Результат выглядит так:

Ноак и барсикл

Тень нечеткого текста

Простейшая форма свойства text-shadow состоит из двух частей: цвет (например, # 333 выше) и смещение (0,1 мкм 0,1 мкм в пример выше). Это приводит к резкой тени на указанном компенсировать.Но смещение также можно сделать нечетким, в результате или менее размытая тень.

Величина нечеткости дана как другое смещение. Вот два линии, одна с небольшой размытостью (0,05em) и одна с большим количеством (0.2em):

h4.a {text-shadow: 0.1em 0.1em 0.05em # 333}
h4.b {text-shadow: 0.1em 0.1em 0.2em черный}

«Что скажешь?» сказал UK

Чтобы видеть яснее

Читаемый белый текст

Тени могут сделать текст более читаемым, если контраст между передний план и фон небольшой.Вот пример белого текст на бледно-голубом фоне, сначала без тени и затем с:

h4 {цвет: белый}
h4.a {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}

Без тени:

Что в этом для меня?

С тенью:

С лопатой и апельсинами

Множественные тени

У вас также может быть более одной тени. В общем, это выглядит довольно странно:

h4 {тень текста: 0. 2em 0,5em 0,1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em -0.3em 0.1em # 006}

Но с двумя хорошо расположенными темными и светлыми тенями эффект может быть полезным:

h4.a {text-shadow: -1px -1px белый, 1px 1px # 333}
h4.b {text-shadow: 1px 1px белый, -1px -1px # 444}

Я, Август (вы знаете кто)

Это, конечно, дополнительно

Это немного опасно, как вы можете видеть, если ваш браузер не поддержка 'text-shadow'.Фактически, цвета фона и текст в этом примере почти такой же (#CCCCCC и # D1D1D1), поэтому без теней почти нет контраста.

Рисование букв в виде контуров

Можно взять пример двух теней из предыдущей версии. Еще больше. С помощью четырех теней буквам можно придать контур:

h4 {text-shadow: -1px 0 черный, 0 1px черный,
      1px 0 черный, 0 -1px черный}

Вы краснеете?

Кот, яблоко и т.

Д.

Это не идеальный план, и в настоящее время (август 2005 г.) обсуждение вопроса о том, должен ли CSS иметь отдельный свойство (или, возможно, значение для 'text-decoration'), чтобы улучшить очертания.

Неоновое свечение

Если сразу за текстом поместить нечеткую тень, т.е. с нулевым смещение, эффект заключается в создании свечения вокруг букв. Если свечение одной тени недостаточно интенсивно, просто повторите то же самое тени несколько раз:

h4.a {text-shadow: 0 0 0.2em # 8F7}
h4.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87}
h4.c {text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F}

С изюминкой лучшего

Нет ничего лучше, нет

Действительно, совершенно верно, мистер М

.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *