Opacity / Rollover - Web Dev. - Neils Resource Web| Summary of Content |
| A few exercises in 'tarting up' my photographs. Hope they may be useful.
Concept from Mandarindesign.com |
A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top. |
|
|
|
Tip:
To position the border inside of the image calculate the placement
of the border. For example, we are using a 30 pixel border. That's 30
pixels on the left, right, top and bottom. The first div that contains the background image is 300 x 200. The second div with the border is 280 x 180.
|
My question to the
was ......I
have a set of 100x75px images (thumbnails) to which I have added a 3px
white border and 20px grey drop shadow. They have been put into a
table to manage positioning. This all worked out nicely but the coding
for each image makes the page so slow to load. A CSS would be a great solution if I could group the effect into a single class. I've tried but can only manage to create a border or a shadow not both. |
| Reply 1......i looked around and it seems that any pure css way to make the drop shadows is not at all cross-browser. you might look into this article: http://www.alistapart.com/articles/cssdropshadows/ |
| Reply
2..... The HTML and CSS do not validate. See any post by Hugo and follow the links in his sig. for the reasons. To answer your question – your specific problem is the weight of the coding on download times. As ferrickhead said the solution in the link he gave you points to cross-browser problems with drop shadows. Your drop shadows do not show in Firefox, or Opera, so it was largely an academic exercise. One solution is to produce the images complete with white border and grey drop shadow as in the attachments. I have deliberately included your weave background in the first, for illustration purposes. The second is about the same size as your existing images. This was done in Paint Shop Pro7, but any reasonable graphics software will do. This will slightly reduce the page-weight, but you have to accept that a page with so many images, albeit thumbnails, will never be the quickest of pages to load. |
| My own solution (eventually). I appreciate it may not be totally cross browser compatible but seems o.k. |
Add a Shadow to the image by adding a
DIV with a defined width and height that is larger than the
500 x 375 image and add the |
|
Code for the above picture effect: <div style="width:120px;height:95px;filter:shadow(color:gray)"> (note gray not grey, they are two diiferent colours!) <a title="Alvor Harbour" href="images/April2004/Misc0404/misc10.jpg"> <img src="../../TravelWeb/Portugal/images/April2004/Misc0404/misc10_small.jpg" width="100px" height="75px" style="border:3px solid white;"></a></div> See also the CSS version here |
|
...for those who wonder what this is meant to be Its an
Example using Div of a Pullquote
An example pullquote
An example pullquote An example pullquote An example pullquote An example pullquote An example pullquote An example pullquote An example pullquote |
An example of a Pullquote using the 'Div' tag. <DIV style="width:99%;"> <div style="color:#033;width:150px;background:white;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;float:right;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px; font-size:28px;line-height:26px;text-align: right;"> <strong>An example of a pullquote <strong>An example of a Pullquote</strong> </DIV> YOUR TEXT GOES HERE THIS IS THE TEXT THAT WILL BE ON THE LEFT SIDE OF THE PULLQUOTE </div> <div style="clear:both"></div> |
With CSS all you need to do is put a piece of code in your style sheet to automatically make image or text rollovers. You don't need a second image or scripting. Put the code in the head section of your page between the <HEAD> and the </HEAD>. You only have to do this once. <style type="text/css"> |
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Update: 04/03/2008 - Html - Opacity Examples - Neils Resource Web
