Skip to main content

CSS Shadows

Image
By

What up?

I have a couple of CSS gems I wanted to share with you. This first one is called a top shadow. Here is the effect:

Compare this version to the not so fun version:


Here is the code for that little effect:


Another little gem is putting a drop shadow under images. Here is a screenshot within eCollege with two images, one has a drop shadow:

If you like that shadow as it is, then use this code:


Okay, now stay with me. That code should put a drop shadow on all images on the page (if you have multiple images). The code is essentially saying that whereever there is an <img>, then the browser is to apply those settings. You can also put drop shadows on <div>s if you would like. Just change the

img { … }

so that it reads


If you want some pictures to have shadows and not others, then create a class. In the above example I had the two pictures and for the sake of illustrating the drop shadow, I wanted one to have the shadow and the other to not have the shadow. Below is the code that I used for the above images. Notice the elements include a blurb of CSS at the top, then an image, and finally another image with a defined class:


Notice how in the internal CSS I defined the class [.shadow { … }] and in the second image I specified the class [<img> class="shadow"]. If you want to create your own shadows, adjusting the properties like the color, depth, spread of the shadow, then check out this website http://css3please.com/.

You can also tweak the shadow yourself if you want. Just change the values

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

to whatever values you want. You have 4 values: the x-axis, the y-axis, the spread or blur, and the color. Feel free to tinker with the javascript for IE, but I wouldn't worry. This effect is essentially not important enough to dedicate the time to making it compatible for IE. IE9 is overdue, but it is going to be compliant with the CSS3 standards.

If you are interested in a text shadow, give this a try:


And then when you put in text, specify <p class="text-shadow">. You can change the color from #999 to whatever you want, and the 1px 1px 3px is like saying how far to the right of the text should the shadow fall, how far below the text should the shadow fall, and then what is the spread (blurriness of the shadow). Those values will all depend on the size, font, color of the text you are using or the background of your page (if you have a background).

Labels:

Comments

Post a Comment

Popular posts from this blog

Labbett button set

By
Hi again, So the first thing that I am sharing here is a button set that Mark uses in his courses. These buttons are currently found on the shared drive, but additionally I uploaded them onto a photo sharing site (picasa). I created a document with the image code and will walk you through inserting the buttons/icons into the course and week headers. The google doc with the code is found on the shared drive: Z:\Icons & Logos\buttons\img style.doc. Click on the images below to enlarge them Here is the main screen. What we would like to do is put an icon by Week 1. Make sure you are in the Author window and in the HTML editor. Find the icon that you would like to include and copy the code associated with it (underneath the icon) Paste the code into the html where you would like the icon. Normally this will be in the header. Put the img code between the brackets (it could also be depending on the header style). If done right, The image will appear beside the header. ...
3 comments
Read more

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...
2 comments
Read more

Storytelling from SMEs

By
So I'm sure you've seen the recent emails about the upcoming CAE "Storytelling in Psychology" event given by Dr. Sandy Siegel. Sandy is one of our best SMEs (she’s in the MACC program) and she is a force in the classroom because of her storytelling skills. I think instructors’ personal/professional stories and vignettes have a lot of power to give a course relevance and heart, especially in a blended or online format with limited or no F2F interaction, and so I’ve been thinking about getting Sandy to audiorecord some brief stories for the courses she SMEs, either as an introductory “tone-setter” or as a springboard for a ‘what would you do?’-type assignment. Thing is, SMEs are rarely the sole instructors on their courses, and I’m thinking that whoever the other section instructors are may not want someone else’s voice (or video) built in, as for that term it is “their” course, not the SME’s. (In a past corporate job of mine we created situation-specific ‘Expert Vi...
1 comment
Read more