CSS Transform

Example Code


<!-- Codes by HTMLmagics -->
<p style="text-transform:capitalize;">Text code for capitalizing text (also known as title case)</p>
<p style="text-transform:uppercase;">Text code for uppercase text</p>
<p style="text-transform:uppercase;">Here, we override uppercase text with <span style="text-transform:none;">text-transform:none;</span></p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/text/text-code.cfm">HTML text</a></p>

Result

Text code for capitalizing text (also known as title case)

Text code for uppercase text

Here, we override uppercase text with text-transform:none;

CSS Drop Shadow

Example Code

<!-- Codes by HTMLmagics -->
<p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #666;">Text code for a drop shadow</p>
<p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #000;">Text code for a drop shadow</p>
<p style="font-size:18px;text-shadow:4px 4px 4px #666;">Text code for a drop shadow</p>
<p style="font-size:18px;color:orange;text-shadow:4px 4px 8px #666;">Text code for a drop shadow</p>
<p style="font-size:18px;color:#fff;text-shadow:1px 1px 8px #000;">Text code for a drop shadow</p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/text/text-code.cfm">HTML text</a></p>

Result

Text code for a drop shadow

Text code for a drop shadow

Text code for a drop shadow

Text code for a drop shadow

Text code for a drop shadow

Text Indent

Example Code

<!-- Codes by HTMLmagics -->
<p style="text-indent:20px;width:200px;">The first line of this paragraph is indented by 20 pixels. Subsequent lines of text are not indented.</p>
<p style="text-indent:3em;width:200px;">The first line of this paragraph is indented by 3 em. This is simply another way of specifying the amount of indent. </p>
<p style="text-indent:50%;width:200px;">The first line of this paragraph is indented by 50%. This is 50% of the containing block - not this paragraph.</p>
<p style="text-indent:-10px;width:200px;">The first line of this paragraph is indented by a negative amount (-10 pixels). </p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/text/text-code.cfm">HTML text</a></p>

Result

The first line of this paragraph is indented by 20 pixels. Subsequent lines of text are not indented.

The first line of this paragraph is indented by 3 em. This is simply another way of specifying the amount of indent.

The first line of this paragraph is indented by 50%. This is 50% of the containing block - not this paragraph.

The first line of this paragraph is indented by a negative amount (-10 pixels).

Text Decoration

Continuous Scrolling Marquee Code

Example Code

<!-- Codes by HTMLmagics -->
<p><a style="text-decoration:none;" href="http://www.htmlcodes.me">Where's my underline gone?</a></p>
<p style="text-decoration:underline;">Sorry, I borrowed your underline.</p>
<p style="text-decoration:line-through;">I'll see if I can lift it above my head...</p>
<p style="text-decoration:overline;">I did it!</p>
<p style="text-decoration:blink;">Yay!!!</p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/text/text-code.cfm">HTML text</a></p>

Result

Where's my underline gone?

Sorry, I borrowed your underline.

I'll see if I can lift it above my head...

I did it!

Yay!!!

Text Alignment

Continuous Scrolling Marquee Code

Example Code

<!-- Codes by HTMLmagics -->
<p style="text-align:left;">Text aligned left</p>
<p style="text-align:center;">Text aligned center</p>
<p style="text-align:right;">Text aligned right</p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/text/text-code.cfm">HTML text</a></p>

Result

Text aligned left

Text aligned center

Text aligned right