Css свойство text-shadow

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Giving multiple shadows

You can also give more than one shadow to some text to give different shadow effects. These values are given, separated by commas, to the property.


For example, consider the following code.

CSS

.text {
  text-shadow 3px 0px 7px rgba(81,67,21,.8), -3px 0px 7px rgba(81,67,21,.8);
}

Here, two shadow values have been given to the  property, separated by comma. The first value will draw a shadow on the right side of the text, while the second one will draw a shadow on the left side of the text.

Consider some more examples where multiple shadows are given.

See the Pen Giving multiple text shadows by Aakhya Singh (@aakhya) on CodePen.

Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами

1. Синтаксис свойства box-shadow

Свойство box-shadow прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none, которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset. Допустимые длины ; опущенные цвета по умолчанию равны значению свойства color.

Свойство не наследуется.

Рис. 1. Синтаксис свойства box-shadow

box-shadow
Значения:
x-offset Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
inset Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
none Значение по умолчанию, означает отсутствие тени.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image, если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

CSS3-оформление текста CSS3-переходы

Property Values

Value Description Play it
h-shadow Required. The position of the horizontal shadow. Negative values are allowed Play it »
v-shadow Required. The position of the vertical shadow. Negative values are allowed Play it »
blur-radius Optional. The blur radius. Default value is 0 Play it »
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values Play it »
none Default value. No shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Tip: Read more about allowed values (CSS length units)

CSS свойство box-shadow — Блочная тень

CSS свойство применяет тень к элементам.

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

Это желтый элемент <div> с черной тенью блока

Пример

div {   box-shadow: 10px 10px; }

Затем добавьте цвет тени:

Это желтый элемент <div> из серой тенью блока

Пример


div {   box-shadow: 10px 10px grey; }

Затем добавьте эффект размытия к тени:

Это желтый элемент <div> с размытием серой тени блока

Пример

div {   box-shadow: 10px 10px 5px grey; }

Вы также можете добавить тени к псевдоэлементам ::before и ::after, чтобы создать интересный эффект:

Пример

#boxshadow {  position: relative;  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);  padding: 10px;  background: white;}#boxshadow img {  width: 100%;  border: 1px solid #8a4419;  border-style: inset;}#boxshadow::after {  content: »;  position: absolute;  z-index: -1; /* скрыть тень за изображением */  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   width: 70%;   left: 15%; /* половина оставшихся 30% */  height: 100px;  bottom: 0;}

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Значения свойства

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

Значение Описание
смещение-x и смещение-y Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none Указывает на отсутствие тени.

Пример

CSS Свойство:

box-shadow: Результат:

CSS Код: div#myDIV { background-color: yellow; width: 200px; height: 100px; box-shadow: 10px 10px black; } Кликните на любое значение свойства, чтобы увидеть результат

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Расшифровка элементов текста и значений тени

А теперь посмотрим на расшифровку элементов текста.

  • h1#logo — заголовок сайта h1 в качестве логотипа
  • p.wtitle — заголовки виджетов
  • h1, h2 — текстовые заголовки (можно задать для h1 — h6)
  • a#logo.blog-name — название сайта, являющееся ссылкой
  • p.sitedescription — описание сайта
  • p — текстовый абзац

text-shadow — это сама тень текста с произвольными параметрами. Цвет можно прописать как в числовом формате, так и в буквенном. Например, blue или grey. Где взять названия цветов для html? В интернете множество таблиц с оттенками.

Значения в пикселях для тени. Первые два — это смещение по осям X и Y. Возможны и отрицательные значения. А третье — это размытие. Если размытие равно нулю, то тень будет чёткая и яркая. Лучше, конечно, создавать тень в одном направлении для всех элементов.

Если у вас не сработают данные стили по отношению к той или иной текстовой категории, попробуйте определить их следующим образом. Возможно, они имеют иное название из-за установленной темы WordPress.

В браузере наведите курсор на нужную часть текста и нажмите правую кнопку мыши. А затем — Исследовать элемент. После этого в правом поле отыщите его наименование. При наведении на строчки справа — на вашем сайте будут подсвечиваться элементы и подсказки.

Также можете поэкспериментировать со стилями блока кода в записях или дизайном полосы прокрутки на сайте WordPress.

Сменили тему, хотите пересоздать миниатюры или удалить лишние размеры? Воспользуйтесь плагином Regenerate Thumbnails.

Новый инструмент для решения поставленной задачи

Среди свойств стилевых таблиц css3 появилось новое, имя которому -webkit-text-stroke . Названное свойство работает только в браузерах, созданных на движке Webkit . А значит, к сожалению, оно не будет отображаться в Firefox и Internet Explorer.

Хочу вас сразу предупредить, что текущий инструмент находится в так называемой экспериментальной стадии. Его вы не найдете даже в спецификациях W3C. Хотя ранее он был описан под наименованием text-outline, а после удален из документации.

Работать с -webkit-text-stroke достаточно просто, так как он функционирует как и border . Для установки определенного цвета к указанному выше названию добавляется -color, а для определения толщины – -width. Однако, как и в border, можно использовать сокращенный вид описания стилей. Т.е. указать вначале толщину обводки, а после – ее цвет. Для лучшего понимания материала давайте разберем пример.

Пример реализации яркого контура

Мега-супер-пупер заголовок


Как вы видите, в этом случае обводка выглядит аккуратно и создается намного проще.

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

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

Compatibilidade do navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém.

  • Desktop
  • Dispositivo móvel
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 3.5 (1.9.1) 10 9.5 1.1 (100)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Gecko (Firefox) theoretically supports infinite text-shadows (don’t try it). Gecko 2 and later cap the blur radius at 300 for performance reasons. If the <color> value is unspecified, then Gecko uses the value of the element’s property.

Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).

Internet Explorer 5.5 supports Microsoft’s Shadow and DropShadow Filter.

Safari: Any shadows that do not explicitly specify a color are transparent. Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows. Konqueror supports text-shadow starting with version 3.4.

Property Values

Value Description Play it
none Default value. No shadow is displayed Play it »
h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box Play it »
v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Play it »
blur Optional. The blur radius. The higher the number, the more blurred the shadow will be Play it »
spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow Play it »
color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. Play it »
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Tip: Read more about allowed values (CSS length units)

HTML Code Generator

Online HTML Editor

Here you can write and see HTML in action. HTML editor to create HTML snippets or a whole web page. you can download and save your code.

Rainbow Text Generator

HTML Rainbow Text Generator. add your text or paragraph and Choose a color scheme click generate button. The HTML rainbow code is useful for copy and paste into AOL Instant Messenger. By sending the HTML text.

HTML select list generator

HTML select dropdown list generator. one click generate html drop down select list. year select list, month select list, date select list, country names select list, country phone number select list, number select list, Google Web Font Name Select List

HTML Table Generator

HTML Table Generator. This Tools Easily Create Html Table,create Tow Color Row Background, Tow Color Background Columns, Table Row Highlight On Hover. Click The Table Cell And Enter Properties And Press The Generate Button.Html Table Using Css

HTML Marquee Generator

Online HTML Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website or blog. Image Marquee Generator, Link Marquee Generator Text Marquee Generator,Generate your own HTML marquees quickly and easily. css transform style preview your marquee,

Typewriter Text Scroller

HTML JavaScript Typewriter Text Scroller. Generate your own HTML Typewriter quickly and easily. add your scrolling typing messages and click generate button and copy code for your website or blog.

  • Button Generator
  • Speech Bubble Generator
  • Triangle Generator
  • 3D Text Generator
  • Filter Effects Generator
  • Text Stroke Generator
  • Text Inside Image
  • Text Shadow Generator
  • Box Shadow Generator
  • Transform Generator
  • Border Radius Generator
  • Opacity Generator
  • RGBA Color Generator
  • Multi Column Generator
  • Font Style Generator
  • Loading animation Generator
  • Animation Generator
  • Rotate Generator
  • Gradient Color Generator
  • Image Zoom Effect Animation
  • Reflect Generator
  • Textbox Style
  • Radio Button Checkbox
  • Mouse Cursor Styles
  • CSS Code Decompressor
  • CSS Code Compressor

Совместимость с браузерами

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка 10 Замечания Edge Полная поддержка 12 Firefox Полная поддержка 4 Замечания IE Полная поддержка 9 Замечания Opera Полная поддержка 10.5 Замечания Safari Полная поддержка 5.1 Замечания WebView Android Полная поддержка ≤37 Замечания Chrome Android Полная поддержка 18 Замечания Firefox Android Полная поддержка 4 Замечания Opera Android Полная поддержка 14 Замечания Safari iOS Полная поддержка 5 Замечания Samsung Internet Android Полная поддержка 1.0 Замечания
Chrome Полная поддержка 10 Edge Полная поддержка 12 Firefox Полная поддержка 4 IE Частичная поддержка 9 Замечания Opera Полная поддержка 10.5 Safari Полная поддержка 5.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 5 Samsung Internet Android Полная поддержка 1.0
Multiple shadows Chrome Полная поддержка 10 Edge Полная поддержка 12 Firefox Полная поддержка 4 IE Полная поддержка 9 Замечания Opera Полная поддержка 10.5 Safari Полная поддержка 5.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 5 Samsung Internet Android Полная поддержка 1.0
Spread radius Chrome Полная поддержка 10 Edge Полная поддержка 12 Firefox Полная поддержка 4 IE Полная поддержка 9 Замечания Opera Полная поддержка 10.5 Safari Полная поддержка 5.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 5 Samsung Internet Android Полная поддержка 1.0

Описание

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


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

div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

Попробовать »

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

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

Значение по умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 10px 5px #888888″

Примеры

Простая тень

.red-text-shadow {
  text-shadow: red 0 -2px;
}
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

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

.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Text shadow effect!

Example

h1 {   text-shadow: 2px 2px 5px red; }

Tip: Go to our CSS Fonts chapter to learn about how to change fonts, text size and the style of a text.

Tip: Go to our CSS Text Effects chapter to learn about different text effects.

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

More Examples

Example

Add a blur effect to the shadow:

#example1 {  box-shadow: 10px 10px 8px #888888; }

Example

Define the spread radius of the shadow:

#example1 {  box-shadow: 10px 10px 8px 10px #888888; }

Example

Define multiple shadows:

#example1 {  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green; }

Example

Add the inset keyword:

#example1 {  box-shadow: 5px 10px inset;}

Example

Images thrown on the table. This example demonstrates how to create «polaroid» pictures and rotate the pictures:

div.polaroid {  width: 284px;  padding: 10px 10px 20px 10px;  border: 1px solid #BFBFBF;  background-color: white;  box-shadow: 10px 10px 5px #aaaaaa;}

All CSS Text Properties

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

С этим читают