KandZ – Tuts

We like to help…!

CSS 10 💻 white space, text emphasis and text shadow properties

white-space → specifies how spaces, tabs and newlines are handled
values: normal, nowrap, pre, pre-wrap, pre-line, break-spaces
example 1 → This is the default behavior, it wraps text and maintains spaces
example 2 → this prevents wrapping of text and collapses all consecutive...
whitespace characters into a single space
example 3 → This preserves both spaces and line breaks, but it doesn't wrap the text
example 4 → this preserves spaces and collapses consecutive whitespace characters into a single space...
and wraps lines at word boundaries

text-emphasis applies emphasis to the text with marks
it is a shorthand for text-emphasis style and text-empasis-color
values → filled, open, filled sesame, open sesame, strings and color
example 1 → this adds a fill style for the emphasized text (default)
example 2 → This adds an emphasis mark before each word
example 3 → this adds an emphasis mark after each word
example 4 → a shorthand for text-emphasis style and text-empasis-color

text-shadow adds shadow effects around the text
syntax → text-shadow: offset-x | offset-y | blur-radius | color
it accepts comma-separated list of shadows
example 1 → this adds a default shadow effect around the text
example 2 → This adds a custom shadow effect with two horizontal and vertical offsets
text-shadow: 3px 6px → uses the default color and blur radius
text-shadow: blue 3px 6px → sets the color and the x/y offsets

Leave a Reply