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

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: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 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
2 comments
Read more

SME Relationship-Building: Tips of the Week

By
A couple of things came to mind during some recent SME conversations that I want to share. You may be already doing these things, but I think it helps to put them down here for all of us to think about and discuss... Given our mandate from Nancy Davis to consult to our SMEs on pedagogical issues related to learning outcomes, FOs, etc., it's likely that we'll run into SMEs who are not used to spelling out their instructional rationales and strategies as specifically as we're asking them to, even if they are at some level "good teachers." I try to motivate them by noting that the coursemap is now viewed as much of a ‘document of record’ as the Prospectus and Syllabus are – so it needs to show the rigor and clarity of outcomes of a 'premier' e-learning experience. And if a SME's LO/FO/assignment connections aren't as Bloom-worthy as they need to be, let's communicate to him or her that "my job is to help your expertise shine through"
Post a Comment
Read more

Encouraging student voice and video comments

By
Hey team, Won and I are at the Sloan-C Emerging Technology conference (#et4online), and I wanted to share some ideas with you all regarding the utilization of audio and video features in our discussion boards.  The presenter who inspired this post is Michelle Pacansky-Brock who wrote an ebook about VoiceThread. Her institution bought a site license so that students could make comments on VT via phone, ensuring that technology wouldn't be a barrier to student participation. My thoughts are that our online and most blended students have both computers with webcams/microphones and smartphones. I think that in Canvas we don't need to rely so much on VT to facilitate an audio/visual discussion, as these features are integrated into the learning platform. Michelle conducted research in her classes via surveys and discovered that when she as an instructor left voice and video comments, 97% of the students appreciated such comments. However, 75% of the students were unwilling
Post a Comment
Read more