From the course: Productivity Tips for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Dropping in CSS drop caps
From the course: Productivity Tips for Web Designers
Dropping in CSS drop caps
- Hi there, I'm Sue Jenkins and welcome to Productivity Tips for Web Designers. Today, you'll discover different methods for creating drop caps in your web layouts using HTML and CSS. If you've been hanging around the webiverse for the last few years, you've probably heard of Jessica Hische and her famous Daily Drop Cap website, where she flexes her impressive typographic muscle by showing off these remarkably versatile sets of illustrated initial capital letters. An initial capital letter or drop cap is the larger and more often ornate first letter of a paragraph that drops down two or more lines into the rest of the paragraph's text. Drop caps are often used as the very first letter of a word, paragraph, article or a chapter in a book, magazine, or other publication. In older manuscripts, the drop cap would extend down several sentences deep and often include ornate details like foliage, animals and human figures. Today, to create a drop cap on a webpage, the convention is to align…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- 01_01_MakingBlogHeadlinesPop.zip
- 01_02_block_quotes.zip
- 01_04_pairingfonts.zip
- 01_05_linkstyles.zip
- 01_06_Readability.zip
- 02_01_Rulers_Grid_Guides.zip
- 02_02_Shadow_Effects.zip
- 02_03_Type_Shapes.zip
- 02_04_AIWebSetup_Layout_Outlines.zip
- 02_05_AI_Symbols.zip
- 02_06_AI_TextFormattingForTheWeb.zip
- 02_07_AI_GraphicStyles.zip
- 02_08_AI_WorkingWithTextures.zip
- 02_09_AI_TheArtofRoundingCorners.zip
- 02_10_AI_UsingTextWrapAsPadding.zip
- 03_01_Grabbing_Measurements.zip
- 03_02_SmartFilters.zip
- 03_03_Content_Aware_Scale.zip
- 03_05_SamplingColors.zip
- 03_06_Resize.zip
- 03_07_ColorTinting.zip
- 03_08_QuickTeethWhitening.zip
- 03_09_Levels.zip
- 03_10_Optimize.zip
- 04_01_GoogleFonts.zip
- 04_02_bootstrap.zip
- 04_03_master_css.zip
- 04_04_CSSShadows.zip
- 04_05_repeat.zip
- 04_06_TwoMinRotate.zip
- 04_07_stitchedborder.zip
- 04_08_dropcaps.zip
- 04_10_CSSRoundingImages.zip
- 04_09_entities.zip
- 04_11_textselectioncolor.zip
- 04_12_tintedimagerollovers.zip
- 05_02_Externalize_CSS_JS.zip
- 05_04_CodeCleanup.zip
- 05_05_about_fix.zip
- 05_06_validation.zip
- 05_07_CheckingLinks.zip
- 05_08_5_8_Using_Snippets.zip
- 05_09_5_9_EasyPopups.zip
- 05_10_5_10_HideShow.zip
- 05_11_about.zip
- 05_12_SEOchallenge.zip
Contents
-
-
-
-
-
-
Using Google font effects4m 39s
-
Commenting code for better clarity6m 19s
-
Utilizing master CSS files to speed up design4m 33s
-
Adding pizzazz with CSS shadow effects4m 45s
-
Incorporating multiple background images4m 54s
-
A two-minute trick for rotating objects4m 17s
-
Creating stitched borders with CSS3m 50s
-
Dropping in CSS drop caps6m 26s
-
Coding special characters dependably with entities3m 29s
-
Rounding square images using CSS3m 14s
-
Customizing your text-selection color with CSS4m 12s
-
Tinting images with CSS for cool hover effects6m 1s
-
-