HTML/CSS/CSS Controls/drop cap

Материал из Web эксперт
Перейти к: навигация, поиск

Creating a drop cap using a CSS pseudo-element

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Creating a drop cap using a CSS pseudo-element</title>

<style type="text/css" media="screen">

h1+p:first-letter { 

   float: left;
   font-size: 3em;
   line-height: 1.0em;
   margin-top: -3px;
   margin-right: 0.15em;

} </style> </head> <body>

This is the header

this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Creating a drop cap with span elements and CSS

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Creating a drop cap with span elements and CSS</title>

<style type="text/css" media="screen"> h1+p { 

   font-weight: bold;
   color: #222222;

} .dropCap span { 

   font-size: 4.8em;
   line-height: 1em;

}

.dropCap { 

   float: left;
   height: 4.7em;
   margin-top: -0.2em;
   margin-left: -0.4em;
   margin-right: 0.5em;

}

</style> </head> <body>

Article heading

Tis a test. this is a test. this is a test. this is a test. this is a test. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.

</body> </html> 

</source>


drop cap is aligned up and right, and the text is aligned to the right.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .myDrop {
 float: left;
 position: relative;
 top: -0.35em;
 margin-top: 40px;
 margin-left: 20px;
 margin-right: 5px;
 margin-bottom: -0.7em;
 font-size: 80px;
 line-height: normal;
 font-weight: bold;
 color: white;
 background-color: black;
 padding: 20px 20px 20px  20px;
 border: 2px groove black;

} </style> </head> <body> Floated Drop Cap. </body> </html> 

</source>


DROP CAPS: Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .myDrop {
 font-size: 40px;
 line-height: normal;
 font-weight: bold;
 vertical-align: baseline;

}

</style> </head> <body>

Abc this is a test.

</body> </html> 

</source>


DROP CAPS: The drop cap is aligned to the middle of the text. Subsequent lines are not indented.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .myDrop {
 font-size: 40px;
 line-height: 0.8em;
 font-weight: bold;
 vertical-align: middle;
 background-color: red;
 padding: 0 2px;

}

</style> </head> <body>

Abc this is a test.

</body> </html> 

</source>


DROP CAPS: The drop cap is offset to the top of the text. Subsequent lines are not indented.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .myDrop {
 font-size: 40px;
 line-height: normal;
 font-weight: bold;
 font-style: italic;
 vertical-align: -0.45em;
 color: white;
 background-color: black;
 background-image: url("http://www.wbex/com/style/logo.png");
 padding: 0 4px;
 border: 1px solid black;

}

</style> </head> <body>

Abc this is a test.

</body> </html> 

</source>


Drop cap with lineheight, font size and background

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

   <title></title>

<style type="text/css" title="text/css"> .dropCap { 

   float: left;
   background: #aaa;
   color: #ffffff;
   font: 300% sans-serif;
   line-height: 100%;
   margin: 0 0.2em 0 0;
   padding: 0.1em 0.2em;
   border: 1px solid #444;
   background: #b4b4b4;

} </style> </head> <body>

This is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Drop cap with span

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .indent {
 position: relative;
 margin-left: 100px;
 margin-top: 20px;

}

  • .marginal-dropcap {
 position: absolute;
 left: -77px;
 top: -16px;
 font-size: 80px;
 font-weight: bold;
 color: black;
 background-color: red;

} </style> </head> <body>

Marginal Drop Cap.

</body> </html> 

</source>


Hanging DROP CAPS

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .hanging-indent {
 padding-left: 50px;
 text-indent: -50px;
 margin-top: -25px;

}

  • .hanging-dropcap {
 position: relative;
 top: 0.55em;
 left: -3px;
 font-size: 60px;
 line-height: 60px;
 font-weight: bold;

} </style> </head> <body>

Hanging </body> </html> </source>

Padded Drop Cap

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .padded-dropcap1 {
 padding-left: 5px;
 padding-right: 10px;
 float: left;
 position: relative;
 top: -0.25em;
 margin-bottom: -0.2em;
 margin-left: -3px;
 margin-right: 3px;
 font-size: 84px;

} </style> </head> <body>

<p>Padded Floating Drop Cap.

</body> </html> 

</source>


This drop cap is lowered without affecting the height of the line.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .myDrop {
 float: left;
 position: relative;
 top: -0.25em;
 margin-left: -3px;
 margin-right: 3px;
 margin-bottom: -0.6em;
 font-size: 80px;

}

</style> </head> <body>

Floated Drop Cap.

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/drop_cap&oldid=5395»