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.
Adding pizzazz with CSS shadow effects
From the course: Productivity Tips for Web Designers
Adding pizzazz with CSS shadow effects
- Hello friends, I'm Sue Jenkins, and welcome to Productivity Tips for Web Designers. In this lesson, I'll show you exactly how to add pizzazz to your text and graphics with a fun variety of shadow effects. With CSS, you can create two kinds of shadows: box shadows and text shadows. Most people simply apply a single shadow property to their objects but you can actually apply multiple shadows to any element. So, let me show you how that works. First, we'll start with a regular box shadow so you can review the CSS syntax. You can apply the box shadow property to any block level element on the page including div tags and images. To create a box shadow, you'll use the box shadow attribute in your CSS. The five values for the box shadow property represent the horizontal offset, the vertical offset, the blur radius, the spread radius, and the color shown here as RGBA values. And the RGBA values is the RGBA all the way to the 1.00. If you play with the offsets, spread, and blur values, you…
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
-
-