CSS3 text effects to make Shadow, Justify and Text Wrap

CSS3 text effects to make Shadow, Justify and Text Wrap

Hello, topic free preview and sample for CSS3 text effects in html. First of let me explain what is CSS?

It’s a Cascading Style sheet means style sheet language used for describing the look and formatting of a document written in a markup language.

Now what is CSS3 text effects? it is a Latest Standard of CSS. CSS3 text effects contains many Text Features like:

  1. Hanging Punctuation
  2.  Punctuation Trim
  3. Text Align Last
  4. Text Emphasis
  5. Text Justify
  6. Text Outline
  7. Text Overflow
  8. Text Shadow
  9. Text Wrap
  10. Word Break
  11. Word Wrap

Among this three css3 text effects are most important, for example Text Overflow, Text Shadow and Word Wrap

Word Wrap:

  • It is invented by Microsoft and added to Css3 text effects. It allows long word to be broken and shift it into next line.
  • For example see the following URL: http://www.css3.info/preview/word-wrap/
  • It has following values: normal, break-word, initial and inherit.

Text Overflow:

  • It is used when the text gets overflow, means it clipped the sentences.
  • For example go on this URL: http://www.css3.info/preview/text-overflow/
  • It has the following values: clip, ellipsis, string, initial and inherit.

CSS3 Text effects to make Shadow:

  • It is use for applying shadow to text.
  • For example look on the following URL: http://www.css3.info/preview/text-shadow/
  • It has the following values: h-shadow, v-shadow, blur, color, none, initial and inherit.

Hanging Punctuation:

  • It means where the Punctuation should be Placed whether outside at the beginning of the Line Box or at the End of the Line Box.
  • It has the following value: none, first, last, allow-end, force-end, initial and inherit.
  • For example look on the URL: “http://www.w3schools.com/cssref/css3_pr_hanging-punctuation.asp”

Punctuation Trim:

  • It means whether the Punctuation get trimmed(means Cutting) or not, if  it appear whether at starting line, ending line or adjacent.
  • For example see the: “http://docs.webplatform.org/wiki/css/properties/punctuation-trim”
  • It has the following value: none, start, end, allow-end and adjacent.

CSS3 Text effects to Align Last text:

  • This property can be used in conjunction with the ‘text-align’ property, but the value specified overrides the effects of that property on the horizontal alignment of the last or only rendered line of an element.
  • For example have a look on : “http://www.css3.com/css-text-align-last/”
  • It has the following value: left, right, center, inherit, auto, alignment and justify.

Text Emphasis:

  • The text-emphasis property will apply special emphasis marks to the elements text, means highlighting any text.
  • For Example please refer following URL: “http://www.w3schools.com/cssref/css3_pr_text-emphasis.asp”
  • It has two properties text-emphasis-style and text-emphasis-color.

Text Justify:

  • It is use to say that when the “text- align” is justify.
  • It has the following values: auto, inert-word, inert- ideograph, inert-cluster, distribute, kashida, trim, none, initial and inherit.


  • It is used to specify text outline.
  • Please visit following URL for examples: “http://www.w3schools.com/cssref/css3_pr_text-outline.asp”
  • It has the following values: thickness, blur and color.

Text Wrap:

  • It specifies the line breaking rules.
  • Please visit following URL:  “http://www.w3schools.com/cssref/css3_pr_text-wrap.asp”
  • It has following values: normal, none, unrestricted and suppress.

You may also like to read : How to make css3 gradient effects?

if you like this post please share with you friends and family about CSS3 text effects so every one can make webpages and make text effects.

Leave a Comment