Scribd
Upload
59 views2 pages

Text Effects Cheat Sheet

Uploaded by

Shiza Masood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views2 pages

Text Effects Cheat Sheet

Uploaded by

Shiza Masood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Text effects cheat sheet

The effects developers use on text items on a web page are chosen mainly because of their styling and
layout style. Interesting effects can be created by combining these with other CSS properties.

The visual representation of text content can be changed by four main properties: text-transform, font-
style, font-weight and text-decoration.

Property Values Description

Text- None, uppercase, lowercase, capitalize,


Modify text properties
transform full-width

Font-style Normal, italic, oblique Font styling options such as italics

Normal, weight, lighter, bolder, 100-


Font-weight Other font styling options like change of emphasis such as making
900

Text- Shorthand for auxiliary elements added to text using other proper
None, underline, overline, line-through
decoration as text-decoration-line

The additional properties that help configure styling effects are below.

Text-align For horizontal alignment of text

Text-align-last Alignment for the last line when text set to justify

Text-combine-upright Multiple characters into the space of a single character placed upright like in Mandarin

Text-decoration-color Color configuration of the text-decoration

Text-decoration-line Line type in text-decoration such as underline, overline and so on

Text-decoration-style Styles added to lines under text such as wavy, dotted and so on

Text-decoration-thickness Thickness of the decoration line

Text-emphasis Shorthand for other properties such as color and style

Text-indent The indentation of the first line

Text-justify Specifies the justification method used when text-align is "justify"

Text-orientation Orientation of text in a line such as sideways, upright and so on

Text-shadow Adds shadow to text

Text-underline-position Declare position of underline set using the text-decoration property

Other than these, there are some more properties that help modify the alignment and define the scope
of text with their containers.
Property Values Description

Text-overflow Clip, ellipsis Determines overflow behavior of text with the container

Word-wrap Normal, anywhere, break-word Applies to inline elements, alias for overflow-wrap

Word-break Normal, break-all, keep-all, break-word Used for long words to decide if words should break or overfl

Writing-mode Horizontal-tb, vertical-lr, vertical-rl Can set the text direction vertical or horizontal

The properties mentioned are ones that can be used for giving effects to text.

You might also like