Warning: Use of undefined constant TWITTER_CONSUMER_KEY - assumed 'TWITTER_CONSUMER_KEY' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 9

Warning: Use of undefined constant TWITTER_CONSUMER_SECRET - assumed 'TWITTER_CONSUMER_SECRET' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 10

Warning: Use of undefined constant TWITTER_ACCESS_TOKEN - assumed 'TWITTER_ACCESS_TOKEN' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 11

Warning: Use of undefined constant TWITTER_ACCESS_TOKEN_SECRET - assumed 'TWITTER_ACCESS_TOKEN_SECRET' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 12

Warning: Use of undefined constant USE_COLLAPSIBLE - assumed 'USE_COLLAPSIBLE' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 14

Warning: Use of undefined constant USE_MULTILINGUAL - assumed 'USE_MULTILINGUAL' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 15

Warning: Use of undefined constant THEME_BODY_WIDTH - assumed 'THEME_BODY_WIDTH' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 16

Warning: Use of undefined constant THEME_COMMENT_THREADED - assumed 'THEME_COMMENT_THREADED' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 17

Warning: Use of undefined constant EDITOR_INLINE_STYLES - assumed 'EDITOR_INLINE_STYLES' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 18

Warning: Use of undefined constant SUPPORT_MENU - assumed 'SUPPORT_MENU' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 19

Warning: Use of undefined constant SUPPORT_THUMBNAIL - assumed 'SUPPORT_THUMBNAIL' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 20

Warning: Use of undefined constant THUMBNAIL_WIDTH - assumed 'THUMBNAIL_WIDTH' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 21

Warning: Use of undefined constant THUMBNAIL_HEIGHT - assumed 'THUMBNAIL_HEIGHT' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 22

Warning: Use of undefined constant DISABLE_PINGTRACKBACK - assumed 'DISABLE_PINGTRACKBACK' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 24
How to Add Drop Cap in Web Pages | Hikaru {Aka} Yuuki のブログ
Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/header.php on line 9

Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/header.php on line 25
 


How to Add Drop Cap in Web Pages

Posted in: Web Design,Website & Blog |

This post is also available in: Indonesian

dropcap

This post is also available in: Indonesian

When we read books or articles in magazines, at the beginning or each chapter usually begins with the first letter in which have differently made typography from other letters. The first letter in the first paragraph can be a capital letter with a very large font size, style and different font type, which obviously looks interesting. This is called Drop Cap. In word processing applications like Microsoft Word, we simply insert a drop cap in our document just by pushing a button/menu. To make one on a web page, we can do so by using CSS.

Here is an example of a paragraph with a drop cap.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

and CSS used in the paragraph above as follows

p:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

by using the CSS pseudo-selector :first-letter, then we can make drop cap effect on web pages.

Selector p:first-letter will be applied to all p (paragraph) tags, if you want the style is applied only to the first letter in the first paragraph, add the pseudo-selector :first-of-type in which it is actually the same as :nth-of-type(1).

So here is the complete CSS snippet.

p:first-of-type:first-letter {
float: left;
padding: 0 3px 0;
font-size: 50px;
font-style: italic;
font-family:georgia,"Times New Roman";
}

By trying and mix-matching between the style, size,  font type, add borders, etc. your drop cap can be looks more attractive.




Speak Up!

Leave your own comment

ERROR: si-captcha.php plugin says GD image support not detected in PHP!

Contact your web host and ask them why GD image support is not enabled for PHP.

ERROR: si-captcha.php plugin says imagepng function not detected in PHP!

Contact your web host and ask them why imagepng function is not enabled for PHP.

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart



Warning: Use of undefined constant scripts - assumed 'scripts' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/library/functions/scripts.php on line 50