Text shadow

Text shadow as CSS

A Citizenship Project. Good citizenship is the difference between members of society
who take all the time when they are in a position to give
and those that are able to give and never do.

HTML div tag example

  <div id="text1">A Citizenship Project...........</div>

A Citizenship Project. Good citizenship is the difference between members of society
who take all the time when they are in a position to give
and those that are able to give and never do.

HTML P tag example.

<section>A Citizenship Project. Good citizenship is the difference between members of society
<p id="text1"> who take all the time when they are in a position to give </p>
and those that are able to give and never do.</section>

A Citizenship Project. Good citizenship is the difference between members of society
who take all the time when they are in a position to give
and those that are able to give and never do.

HTML span tag example.

<section>
A Citizenship Project. Good citizenship is the difference between members of society<br />
 who take all the time <span id="text1">when they are in a position </span>to give <br />
and those that are able to give and never do.</section>

CSS

/*------------start-------------text shadow examples----------------------------*/
#text1 {
  text-shadow: 1px 1px 0px black, -1px -1px 0px white, 2px 2px 1px blue, 4px 4px 4px grey, 2px 2px 4px white;
  color: yellow;
  font-weight: 100;
  font-size: 36px;
}
/*------------end-------------text shadow examples----------------------------*/

For example get the perspective banner
and put the text shadow p tags in instead of just words

A Citizenship Project.

HTML

<div id="blue"><div class="box">
  <p id="text1">A Citizenship Project.</p>
</div>
</div>

To make the above banner work you will need to have the blue banner CSS code in your CSS file.

CSS

/* -------------------------start---------perspective banner---------------------*/ #blue { -webkit-perspective: 500px; perspective: 500px; } #blue .box {
height: 200px;
padding: 10px;
box-shadow: 3px 3px 5px black;
font-size: 36px;
color: white;
margin: 25px;
border-radius: 10px;
background-color: blue;
-webkit-transform: rotateY( 40deg );
transform: rotateY( 40deg );
}
/* -------------------------end---------perspective banner---------------------*/