Join Sue Jenkins for an in-depth discussion in this video Adding pizzazz with CSS shadow effects, part of Productivity Tips for Web Designers.
- 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 can create totally different…
Author
Sue Jenkins
Updated
7/23/2015Released
7/31/2014Skill Level Intermediate
Duration
Views
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.
-
Introduction
-
Welcome20s
-
-
1. Typography Tips
-
Going big with type5m 32s
-
Pairing fonts for the web6m 59s
-
Styling your web links7m 49s
-
Improving font readability10m 14s
-
2. Illustrator Tips
-
Adding killer shadow effects9m 20s
-
3. Photoshop Tips
-
4. HTML and CSS Tips
-
Using Google font effects4m 39s
-
Dropping in CSS drop caps6m 26s
-
-
5. Dreamweaver Tips
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Adding pizzazz with CSS shadow effects