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
Bagaimana Membuat Drop Cap di Halaman Web | 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
 


Bagaimana Membuat Drop Cap di Halaman Web

Posted in: Desain Web,Website & Blog |

This post is also available in: English

dropcap

This post is also available in: English

Ketika kita membaca buku atau artikel di majalah, di bagian awal atau setiap babnya biasanya dimulai huruf pertama yang tipografinya dibuat berbeda dengan huruf lainnya. Huruf pertama pada paragraf pertama ini bisa berupa huruf kapital dengan ukuran font yang sangat besar, dengan gaya dan jenis font yang berbeda, yang jelas yang terlihat menarik. Inilah yang disebut dengan Drop Cap. Pada aplikasi word processing seperti Microsoft Word, kita dengan mudah menyisipkan drop cap pada dokumen kita dengan hanya menekan satu tombol/menu saja. Untuk membuatnya di halaman web, kita dapat melakukannya hanya dengan menggunakan CSS.

Berikut ini adalah contoh suatu paragraf dengan 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.

dan CSS yang digunakan untuk paragraf di atas adalah sebagai berikut

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

dengan memanfaatkan pseudo-selector CSS :first-letter maka efek drop cap pun bisa didapat di halaman web.

Selector p:first-letter akan diaplikasikan ke semua tag p (paragraf), bila ingin CSS tersebut diaplikasikan hanya untuk huruf pertama pada paragraf pertama, gunakan pseudo-selector :first-of-type yang sebenarnya sama seperti :nth-of-type(1).

CSS lengkapnya seperti ini di bawah ini.

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

Dengan mencoba-coba dan mix-match antara gaya, jenis, ukuran font, menambah border, dsb maka drop cap pun bisa dapat lebih menarik lagi.




Comments

There is one comment


Speak Up!

Leave your own comment

KESALAHAN: plugin si-captcha.php mengatakan bahwa dukungan GD image tidak terdeteksi di PHP!

Hubungi hosting situs anda dan tanyakan mereka mengapa dukungan GD image tidak diaktifkan untuk PHP.

KESALAHAN: plugin si-captcha.php mengatakan bahwa fungsi imagepng tidak terdeteksi di PHP!

Hubungai hosting situs Anda dan tanyakan mereka mengapa fungsi imagepng tidak diaktifkan di 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