Sf9 — shadow

Обводка текста с помощью CSS

Обводку текста с помощью CSS без прибегания к скриптам сделать возможно. Данный эффект можно создать с помощью свойства text-shadow. Хоть это свойство IE и не воспринимает ни в одной из своих версий — в остальных популярных браузерах описанный рецепт будет замечательно работать.

Рассмотрим приведённый ниже код:

Пример №1

H1{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px;}

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

Пример обводки №1

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

Пример №2

H1{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px;}

Пример обводки №2

Если Вы заметили, свойство «red 0 0 3px» несколько раз повторяется. Именно в этом и скрывается эффект насыщенности. Для достижения более чёткого отображения обводки свойство можно добавлять с другими параметрами большое количество раз. Единственным недостатком является то, что это может сильно замедлить работу браузера на слабых компьютерах.

Сегодня расскажу, как можно сделать в css обводку текста. Все манипуляции мы будем проводить исключительно со свойством text-shadow .

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

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

More Text Examples

Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.

Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.

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

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

CSS пока не всесилен

На этом возможности css заканчиваются. Если вам нужна красивая жирная обводка, например, как эта:То сделайте ее в фотошопе, а сам текст придется вставить на веб-страницу в виде изображения

3.5
из 5

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

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML
CSS

.trapezoid { vertical-align: text-bottom; }

Trapezoid,.polygon { display: -moz-inline-block; }

Polygon,.trapezoid { margin:0; padding: 0; background: none; }

Polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }.trapezoid { display: inline-block; width: 1px; height: 0; margin: 0 auto; border-left: 5em solid transparent; border-right: 5em solid transparent;}

Polygon .aa { border-bottom: 10em solid; border-top: none; }

Polygon.r2 { height: 0em; }

Polygon.r3 { height: 8.66em; }.polygon.r3 .trapezoid { border-width: 8.66em 5em; }

div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }div.eg .polygon { display: block; margin: 0 auto; }

R3 { color: red; font-size: 0.5em; }

Звезда

HTML

Звезда

CSS

#star{ width: 15em; height: 14.27em; position: relative;}

#star span,#star{ display: block;}

#top{ width: 0; height: 0; margin: auto; border-right: 4.64em solid transparent; border-left: 4.64em solid transparent; border-bottom: 14.27em solid;}

#center{ width: 5.7em; border-right: 4.65em solid transparent; border-left: 4.65em solid transparent; border-top: 3.36em solid; height: 0; position: absolute; top: 5.46em; left: 0; z-index: 100; text-align: center;}

#bottom{ position: absolute; bottom: 0; left: 2.852em; border-right: 4.635em solid transparent; border-left: 4.635em solid transparent; border-bottom: 3.4em solid #fff; width: 0; height: 0;}

#center span{ margin-top: -2em; color: #000; font-weight: bold;}

a#star:hover #center span{ color: #fff; background-color: transparent;}

a#star{ color: #f90; background-color: transparent;}a#star:hover{ color: #fc3; background-color: transparent;}

Еще немного примеров

  • Елка и необычная верстка от Эрика Мейера;
  • Плитка и менюшка от главного технолога Технократи;
  • Beeline
  • Интернет
  • Tele2
  • Полезное
  • IP-Телефония
  • Йота
  • Mts
  • Megafon
  • Контакты
  • О сайте

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

Variations

From now on, the background color will be subject to constant change.

This is because certain shadows need specific backgrounds to be noticed.

Also the text is going to be uppercase for better results.

The following will show some great text-shadows you can apply.

2.1 Pressed Effect

Set your text color to a slightly darker shade than your background color.

Next, apply a slight white text-shadow with a reduced opacity.

body {
	background: #222;
}

.text {
	font-size: 5em; 					
	color: rgba(0,0,0,0.6);								/* added text-color */
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);		/* added shadow */
}

Using the color code, you will be able to set the of the color applied.

Notice that the text-color has an opacity of 60% (0.6) and shadow 10% (0.1).

Letterpress Shadow Effect

2.2 Hard Shadow Effect

Because of their retro nature, hard shadows don’t always need to have blur applied.

Take for example this hard text shadow:

body {
	background: #fff3cd;			              /* changed body background color */
}

.text {
	font-size: 5em; 					
	color: white;										/* changed text-color to white */
    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);			/* added retro-feel shadow */
}

Retro Hard Shadow Effect

2.3 Double Shadow Effect

It is interesting to know that you are not limited to one single shadow application.

You can use more than one shadow like this:

Let’s add two shadows, one of them with the color of the background, and the other one a slightly darker color than the background color:

.text {
	font-size: 5em; 												
    text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);    /* given two shadows */
}

In this case, the background is white, so we don’t need a custom color for it.

The view in the browser would be:

Double Shadow Effect

2.4 Distant Down Shadow Effect

This effect lies on the multi-shadow capability of css.

Below, you can see 4 shadows pointing down with various degrees.

body {
	background: #fff3cd;			/* changed body background color */
}

.text {
	font-size: 5em;
	color: white; 												
    text-shadow: 0px 3px 0px #b2a98f,
             	 0px 14px 10px rgba(0,0,0,0.15),
             	 0px 24px 2px rgba(0,0,0,0.1),
            	 0px 34px 30px rgba(0,0,0,0.1);		
}

Distant Down Shadow Effect

2.5 Mark Dotto’s 3D Text Effect

The following example is just as impressive as you might be wondering.

It comes from MarkDotto.com and utilizes an impressive 12 separate shadows to pull off a very believable 3D effect.

body {
	background: #3495c0;			/* changed body background color */
}

.text {
	font-size: 5em;
	color: white; 												
    text-shadow: 0 1px 0 #ccc, 
              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
              0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 20px 20px rgba(0,0,0,.15);
}

Now look at this:

3D Shadow Effect

2.6 Gordon Hall’s True Inset Text Effect

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well.

body {
	background: #cbcbcb;			/* changed body background color */
}

.text {
	font-size: 5em;
	color: transparent; 										
	background-color: #666666;
		   -webkit-background-clip: text;
		   -moz-background-clip: text;
		   background-clip: text;
		   text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

And that gives and incredible true inset text effect.

Text Inset Effect

2.7 Glowing Text Shadow Effect

body {
	background: #992d23;			/* changed body background color */
}

.text {
	font-size: 5em;
	color: white; 												
	text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

This shadow will create the effect of a glowing text.

Glowing Text – Shadow Effect

2.8 Soft Emboss Shadow Effect

body {
	background: #629552;			/* changed body background color */
}

.text {
	font-size: 5em;											
	color: rgba(0,0,0,0.6);
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);
}

Soft Emboss – Text Shadow Effect

Атрибуты

  • direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
  • dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
  • fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
  • font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
  • font-size — Размер шрифта. Значение по умолчанию 12 пт.
  • font-size-adjust — Значение по умолчанию — none
  • font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  • font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
  • font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
  • glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
  • kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
  • letter-spacing — Интервал между буквами. Возможные значения: normal | число
  • text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
  • text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
  • unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
  • word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
  • writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
  • x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
  • y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Text Shadow


/*
 *    Please wait, loading source from GitHub ...
 *
 *
 *                       /\_/\
 *                      / - - \
 *                     <_ x _>  /\_/\
 *                     /       \ <_o_o_>
 *                    <_>
 *
 */

Phaser Version:
2.15.0 — Phaser CE2.14.0 — Phaser CE2.13.3 — Phaser CE2.13.2 — Phaser CE2.13.1 — Phaser CE2.13.0 — Phaser CE2.12.1 — Phaser CE2.12.0 — Phaser CE2.11.1 — Phaser CE2.11.0 — Phaser CE2.10.6 — Phaser CE2.10.5 — Phaser CE2.10.4 — Phaser CE2.10.3 — Phaser CE2.10.2 — Phaser CE2.10.1 — Phaser CE2.10.0 — Phaser CE2.9.4 — Phaser CE2.9.3 — Phaser CE2.9.2 — Phaser CE2.9.1 — Phaser CE2.9.0 — Phaser CE2.8.8 — Phaser CE2.8.7 — Phaser CE2.8.6 — Phaser CE2.8.5 — Phaser CE2.8.4 — Phaser CE2.8.3 — Phaser CE2.8.2 — Phaser CE2.8.1 — Phaser CE2.8.0 — Phaser CE2.7.10 — Phaser CE2.7.9 — Phaser CE2.7.8 — Phaser CE2.7.7 — Phaser CE2.7.6 — Phaser CE2.7.5 — Phaser CE2.7.4 — Phaser CE2.7.3 — Phaser CE2.7.2 — Phaser CE2.7.1 — Phaser CE2.7.0 — Phaser CE2.6.2 — Kore Springs2.6.1 — Caemlyn2.6.0 — Fal Moran2.5.0 — Five Kings2.4.9 — Four Kings2.4.8 — Watch Hill2.4.7 — Hinderstap2.4.6 — Baerlon2.4.5 — Sienda2.4.4 — Amador2.4.3 — Coramen2.4.2 — Altara2.4.1 — Ionin Spring2.4.0 — Katar2.3.0 — Tarabon2.2.2 — Alkindar2.2.1 — Danabar2.2.0 — Bethal2.1.3 — Ravinda2.1.2 — Whitebridge2.1.1 — Eianrod2.1.0 — Cairhien2.0.7 — Amadicia2.0.6 — Jornhill2.0.5 — Tanchico2.0.4 — Mos Shirare2.0.3 — Allorallen2.0.2 — Ghealdan2.0.1 — Lyrelle2.0.0 — Aes Sedai1.1.6 — Shienar1.1.5 — Saldaea1.1.4 — KandorTheme:
AmbianceChaosChromeCloud9 DayCloud9 NightCloud9 Night Low ColorCloudsClouds MidnightCobaltCrimson EditorDawnDreamweaverEclipseGithubIdle FingersKatzenmilchKRKuroirMerbivoreMerbivore SoftMono IndustrialMonokaiPastel on DarkSolarized DarkSolarized LightTerminalTextmateTomorrowTomorrow NightTomorrow Night BlueTomorrow Night BrightTomorrow Night EightiesTwilightVibrant InkXCodeFont Size:

This example is for Phaser 2 / CE

View the Phaser 3 Examples here.

View the code for this example://github.com/photonstorm/phaser-examples/blob/master/examples/text/text shadow.js.

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

CSS, текст shadow и overflow.

c http-equiv=»Content-Type» content=»text/html; charset=utf-8″>lass=»inf_stat»>

Категория: Уроки CSS
Просмотров: 1389
Коментариев:
Дата: 2018-01-13
Добавил: admin

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

Свойство text-overflow

Свойство text-overflow: ; используется для определения области видимости текста в блоке, в ситуации, когда текст полностью не помещается в выделенный блок. Данное свойство может принимать два значения:

  • clip — текст будет обрезан по размеру области/блока.
  • ellipsis — текст будет обрезан и концу добавится многоточие.

Свойство text-overflow: ; будет работать только в том случае, если для блока установлено свойство overflow: ; с значением auto, scroll или hidden.

И свойство white-space, которому нужно указать значение nowrap запрета переноса строк. В итоге получаем вот такой код.

HTML

HTML страница

Текст обрезается с помощью свойства text-oveflow

И ниже его стили.

CSS

p{
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0;/* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    width: 150px; /*Ширина блока*/
    text-overflow: ellipsis; /* Добавляем многоточие */
}

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

Свойство text-shadow

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

Для этого свойства используется следующий синтаксис:

CSS

text-shadow: none | тень *
где тень:
   

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

HTML

HTML страница

Текст, которому установлена тень. Свойство text-shadow

И ниже его стили.

CSS

.text-shadow p{
    text-shadow: 1px 1px 0 crimson, 3px 8px 18px blue; /* Параметры тени */
    color: green; /* Зеленный цвет текста */
    font-size: 22px; /* Размер текста */
}

Имейте ввиду, что каждый браузер будет отображать тени по своему, в зависимости от его версии. Данное свойство применяется достаточно редко, поэтому для того, чтобы понять как это, все же, работает, стоит самому поэкспериментировать, меняя данные значения text-shadow:1px 1px 0 crimson, 3px 8px 18px blue;.

Вот мы рассмотрели еще свойства относящиеся к тексту. В Демо показано как каждое из этих свойств работает. На этом все, мы рассмотрели все Основные свойства, которые позволяют нам работать и изменять отображаемый вид текста.

Следующий материал >>>

Просмотреть демо: Демо

Скачать исходник: Скачать

‘)
document.write(»)
}
else
document.write(message)

function crossref(number)
{
var crossobj=document.all? eval(«document.all.neonlight»+number) : document.getElementById(«neonlight»+number)
return crossobj
}

function neon()
{
//Change all letters to base color
if (n==0)
{
for (m=0;m

  • Каскадность и приоритетность в CSS.
  • Подключение файла стилей CSS и знакомство с селекторами.
  • Групповые селекторы CSS.
  • Наследование свойств css.
  • Псевдоселекторы или псевдоклассы CSS.
  • Выравнивание текста и создание красной строки через CSS.
  • Оформление текста text-decoration средствами CSS .
  • Подготовка к изучению CSS.

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

Ссылка на основную публикацию