Style

CSS Code

HTML Code

HTML Output

style.css (file name)

<link rel="stylesheet" type="text/css" href="style.css">

backlit

<STYLE TYPE="text/css">a:link{color:#ff6633;text-decoration:none} a:active{color:#ff6633;text-decoration:none} a:visited{color:#ff6633;text-decoration:none} a:hover{color:#04acec;text-decoration:none}</STYLE>

Mouseover

blockquote

blockquote.vote {font-family:book antiqua; font-size:20px; color:#ffffff; margin:10px; padding:10px; text-decoration:none; text-shadow:2px 2px 2px #000000; border:1px solid #000000; background-align:center; background:url(/ldl/images/booth.jpeg); width:240px; height:280px; line-height:80%; position:relative;}

<blockquote class="vote" > Text Overlays in blockquote </blockquote>

Text will overlay in background Url

a.

Shadowtext

.a {font-family:book antiqua; font-size:60px; transition: text-shadow, 0.5s, ease; display: block; padding: 20px 0px 20px 0px; color: #fff; text-shadow:#000000 1px 1px 1px; text-decoration: none;}

a.grey {margin:0; padding:0;}

.a {transition: text-shadow, 0.5s, ease; display: block; padding: 20px 0px 20px 0px; color: #fff; text-shadow: #343434 1px 1px 1px; text-decoration: none;}

a:hover {color: #ff9933; text-shadow: #343434 1px 1px 1px, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #000000, 0 0 70px #000000, 0 0 80px #000000, 0 0 100px #000000, 0 0 150px #000000; text-decoration: none;}

<a href="#">Shadowtext</a>

Shadowtext

div

radius

div.radius {font-family:book antiqua; margin:10; padding:10; font-size:40px; font-weight:bold; font-style:italic; color:#000000; text-shadow: 0 0 0.4em #ffffff; text-decoration:none; background:#ff6633; width:300px; height:100px; border:2px solid#000000; border-radius:5px;}

<div class="radius">
USING RADIUS

USING RADIUS

div.

Shadowbox

div.box {width:350px; height:50px; background-color:yellow; box-shadow:10px 10px 5px #888888; margin:10px; padding:10px}

<div class="shadowbox">
Shadow Box

Shadow Box

h1

Raised
Letters

h1 {color:#ffffff; text-shadow:0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font:50px 'ChunkFiveRegular'; margin:10px;}

<h1>Raised Letters</h1>

RAISED
LETTERS

p.

paragraph

p.red {background-color:#ff0000;}

<p class="red">Background Red

Background Red.

p.

paragraph

p.red {font-family:book antiqua; font-size:20px; color:#ff0000; background-color:transparent;}

<p class="red">Background Transparent

Background Transparent.

p.

line height

p.line1 {font-family:book antiqua; font-size:20px; color:#000000; background-color:#f0ece6; line-height:20%; margin:10px;}

p.line2 {font-family:book antiqua; font-size:20px; color:#000000; background-color:#f0ece6; line-height:250%; margin:10px;}

<p class="line#">Line Height

Line Height
Line Height
Line Height.
Line Height

Line Height
Line Height
Line Height.
Line Height

span

shadowzoomec

.shadowzoomec {color:#e6e6e6; font: bold 52px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #ff9933, 2px 2px #ff9933, 3px 3px #ff9933; -webkit-transition: all 0.12s ease-out; -moz-transition:all 0.12s ease-out; -ms-transition:all 0.12s ease-out; -o-transition:all 0.12s ease-out;}

.shadowzoomec:hover {position: relative; top: -3px; left: -3px; text-shadow: 1px 1px #ff9933, 2px 2px #ff9933, 3px 3px #ff9933, 4px 4px #ff9933, 5px 5px #ff9933, 6px 6px #ff9933;}

<span class="shadowzoomec">
Shadowzoom</span>

Shadowzoom