Friday, March 29, 2024

Creating Drop Caps in HTML and CSS

This article will discuss the design patterns that form drop caps, which are used to make web pages more attractive. A drop cap exists where the first character of a word is enlarged, signaling it is the beginning of a page of text, paragraph, etc. Practically, the wiping cap shrinks or enlarges the first letter so that the top of the letter is aligned with the top of the text. The wipes are also used in text, documents, books, articles, and web pages.

Typically, a drop cap will line up with the top of the first line of text and the left margin of the paragraph but there is more than one way to achieve this effect.

Aligned Drop Cap — is a letter that has a larger size than the following text, the initial value being smaller than the baseline. You can use “aligned-dropcap” to mark the first letter of the block element by using a row element. You can also use a negative value to lower the text below the baseline, or a positive value to lift the text above the baseline. In case of line-height, choose a normal value to make sure the fastening cap does not overlap with the close lines.

HTML : <inline class="aligned-dropcap"> text </inline>
CSS : .aligned-dropcap { vertical-align, line-height, font-size } 
Example :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>First example</title>
<style type="text/css" media="Screen">
 .myDropcap {
  font-size: 50px;
  line-height: 1.4em;
  font-weight: bold;
  vertical-align: middle;
  background-color: darksalmon;
  padding: 1 8px;
}
</style>
</head>
<body>
<p><span class="myDropcap">A</span>ligned Drop Cap - is a letter that has a larger size than the following text, the initial value being smaller than the baseline. You can use the "aligned-dropcap" to mark the first letter of the block element with a row element. You can also use a negative value to lower the text below the baseline, or a positive value to lift the text above the baseline. In case of line-height, choose a normal value to make sure the fastening cap does not overlap with the close lines. </p> 
<p>!!! Drop cap is aligned up and right, and the text is aligned to the right.</p>
</body>
</html>

First-letter Drop Cap — is the selector (it is the first letter and selects the content subgroup) and is used to add style to the first letter of the mentioned passage. It has the following properties:

color,font,background,border,padding, text-transform, line-height, float, clear
CSS : .class:first-letter {styles}/ .ID:first-letter{styles}
Example : 
<html>
<head>
<title>First-letter</title>
  <style type="text/css" media="screen">
    p#dropcap:first-letter {
      font-size:400%;
      font-weight:bold;
      float:left;
    }
  </style>
</head>
<body>
  <p id="dropcap">Is the selector (is the first letter and selects the content subgroup) and is used to add style to the first letter of the mentioned passage. </p>
</body>
</html>

Hanging Drop Cap — has two styles, namely a suspended indent, changing the height, width and final position of the drop cap and a relative drop head, being set by the hanging indent.

HTML : <block class="hanging-indent">
                <inline class="hanging-dropcap"> text </inline>
            </block>
CSS : .hanging-indent {padding-left, text-indent, margin-top }
          .hanging-dropcap { position:relative,top, left, font-size, line-height}
Example : 
<html>
<head>
<style type="text/css" media="Screen">
  .hanging-indent {
  padding-left: 70px;
  text-indent: -60px;
  margin-top: -15px;
}
 .hanging-dropcap {
  position: relative;
  top: 0.50em;
  left: -3px;
  font-size: 55px;
  line-height: 50px;
  font-weight: bold;
}
</style>
</head>
<body>
<p class="hanging-indent"><span class="hanging-dropcap">H</span>anging it has two styles, namely a suspended indent, changing the height, width and final position of the drop cap and a relative drop head, being set by the hanging indent.<p>
</body>
</html>

Padded Graphical Drop Cap — we can add the left lining to the drop cover in order to make room for a background image, being an ad, a decorative element, a banner, a grabber, to attract the reader. In practice, we insert the starting position of an inline element .

HTML : <inline class="padded-dropcap"> text </inline>
CSS : .padded-dropcap { padding-left, padding-right, margin-left, margin-right, background }
Example : 
 <html>
<head>
 <style type="text/css" media="Screen">
  .padded-dropcap {
  padding-left: 5px;
  padding-right: 10px;
  float: left;
  position: relative;
  top: -0.25em;
  margin-bottom: -0.5em;
  margin-left: -6px;
  margin-right: 2px;
  font-size: 100px;
}
</style>
</head>
<body>
    <p><span class="padded-dropcap">P</span>added Floating Drop Cap.We can add the left lining to the drop cover in order to make room for a background image, being an ad, a decorative element, a banner, a grabber, to attract the reader. In practice, we insert the starting position of an inline element . </p> 
</body>
</html>

Floating Drop Cap — float drop caps are used as a relative left positional float. You can use the following margins: margin-left and margin-right to adjust the positioning of the horizontal mount hole and peak setting to adjust the position of the vertical cap.

HTML : <inline class="floating-dropcap"> text </inline>
CSS : .floating-dropcap { float:left; position:relative;top, margin-left,margin-right,margin-bottom: values }
Example : 
<html>
<head>
    <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<style type="text/css" media="Screen">
 .myFloated {
  float: left;
  position: relative;
  top: -0.30em;
  margin-top: 30px;
  margin-left: 15px;
  margin-right: 5px;
  margin-bottom: -0.9em;
  font-size: 60px;
  line-height: normal;
  font-weight: bold;
  color: lightgrey;
  background-color: black;
  padding: 17px 18px 20px  20px;
  border: 3px groove black;
}
</style>
</head>
<body>
<span class="myFloated">F</span>loated Drop Cap are used as a relative left positional float. You can use the following margins: margin-left and margin-right to adjust the positioning of the horizontal mount hole and peak setting to adjust the position of the vertical cap.
</body>
</html>

Floating Graphical Drop Cap — indicates how a graphic element is displayed on top of the dropcap text. Practically, a floating floating head is made if the dropcap text is replaced with a graphic element.

HTML :  <inline class="floating-dropcap"> text </inline>
CSS :  .floating-dropcap {float, position, margin-left,margin-bottom,width,height}

Marginal Drop Cap — this edge head is used when we do not want the text to wrap to the left and under the drop cap, it has the indentation style of the paragraph and the style applied to the letter that moves the drop head to the left edge applies to the first letter of the first paragram as inline items.

CSS : .indent { position:relative;margin-left:+indent; margin-top:values }
          .marginal-dropcap { position:absolute; left:-indent; top:values}
HTML : <block class="indent">
                <inline class="marginal-dropcap"> text </inline>
            </block>

Marginal Graphical Drop Cap — allows us to display the first letter of a paragraph as an image, if the image can not be played back by the browser you are using, make the drop cap text visible.

CSS :  .indent {position, margin-left, margin-top}
           .graphic-dropcap {position, left, top, width, height, line-height, padding-left, text-align}
          .graphic-dropcap span {position,width,height,margin,left,top,background-image,background-repeat}
HTML : <block class="indent">
                  <inline class="graphic-dropcap"> text <span></span></inline>
           </block>
Example : 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Drop caps </title>
	<style>
		body {
			font: 20px/2 calibri;
		}
		p:first-letter {
			float: left;
			font-size:  50px;
			padding: 10px 20 10 40px;
			margin-right: 9px;
		}
	</style>
</head>
<body>
	<p>These wiping caps and initials, respectively, provide an effective way to attract users' attention because they add extra value, visible page strength and why not personality</p>
</body>
</html>

Conclusion

This article has presented different examples of using drop caps. Now it’s your turn to go out there and make your web pages more visually appealing.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured