All 2 entries tagged CSS

What appears to be 'hole' in a webpage that scrolls with the content and exposes a static background

Writing about web page http://go.warwick.ac.uk/mikewillis/bits/holeinpage

So a few days ago, for reasons I don't recall and probably aren't important, an idea appeared in my head that it might be sort of neat if it were possible to create a webpage that had, well, read the title of this post again. I can't recall seeing this effect anywhere though I think have seen sort of the opposite. The opposite being a PNG containing a transparent portion that has the CSS rule position:fixed applied to it, (which hence remains static as the rest of the content is scrolled), and exposes a a background applied to the body element that scrolls with the content.

My attempt at creating what the aforereferenced title of this post describes is linked underneath said title. If you haven't understood a word thus far take a look at it and scroll up and down. (You will of course need to ensure that your web browser window is sized such that vertical scrolling is necessary to see all the content. I stuck lots of text on here to make that easy.) It turned out to be quite a bit harder than I thought it would be, though this may possibly be a reflection of my CSS skills as much as the difficulty of the task.

I'm quite pleased with the result, although:

• It doesn't work in Opera. At least not the latest version of Opera for Mac OS X. I've put a little effort in to trying to make it work but didn't get anywhere useful.
  
• It doesn't work in Internet Explorer. (But then, what does...) I've put no effort in to trying to make it work because I just can't be bothered. If I was using it in production I'd probably just use IE's conditional statements around some more CSS to completely disable the effect.
  
• It's a bit, well, odd in places. If you look at the source you'll see that one value used in the CSS is used used because that was as large as I could make it without the whole thing falling apart for reason(s) I don't understand.
• It will only work for pages over which you have total control. For example it won't work on a Sitebuilder page because numerous page elements are imposed by Sitebuilder. I couldn't embed the effect in a blog post for the same reason.
• I can't imagine a circumstance under which one would want to use such an effect in a webpage.
  

Mike Willis : 09 Aug 2010 13:18 |  Tags: CSS HTML |  Comments (0) |  Close comments |  Report a problem

Image gallery thing using ImageMagick polaroid operation

Writing about web page http://go.warwick.ac.uk/mikewillis/polaroidgallery/gallery.html

I used to tinker with HTML/CSS/Javascript a lot. I've done very little of this over the last [indeterminate period of time]. Then a few days ago whilst tinkering with ImageMagick I had an idea for a potentially pleasing method of presenting photos on a web page. The somewhat rough implementation of the idea is linked above.

All photos are taken from the University Media Library. Display of the large versions of the photos is handled by Lightbox2 (as seems to be very much the fashion these days). Bash script used to generate images and to generate the HTML.

Bad things about the gallery:

• Because (alpha) transparency is required the thumbnails are png rather than jpeg. This means the file sizes of the thumbnails are rather large at ~60KB each including the overlay image that is used when the mouse is over the image to change the border colour. This isn't that big a problem I guess given the speeds of most people's Internet connection these days, but the part of my mind that remembers when 56k dial up was the norm keeps telling me that each image would take a minimum of ~12 seconds to load over such a connection. There are various programmes that will reduce the file size of a png a bit, e.g.optipng (in Ubuntu and openSUSE repos), and the most effective one I found, pngout. I could only get a reduction of a few percent, though some people claim to have got higher. I guess it depends on the png. I'd already told ImageMagick to strip out profiles when creating them.
  
• The area of the page that needs to be clicked to display a particular image does not exactly correspond with the visible outline of the image. The area that needs to be clicked for any given image is rectangular because of course the images themselves are rectangular, but the use of transparency means they don't look rectangular. This could be solved using an imagemap, but it would only work if you collated all the pngs in to one big image and then mapped that. Otherwise parts of an image's map would be obscured by the image to the right. Collating all the images in to one big one would be a bad idea for various reasons (e.g. load time, lack of adaptation to different window widths).
  

Notable/Nice things about the gallery:

• The images used to cause the border colour to change when the mouse is over a thumbnail are not merely the same image but with a different border colour. The image is generated twice, once with the white border, once with the other colour. The second image then has most of the actual photo replaced with a transparent rectangle. (Example) This reduces the file size by roughly a third.
• The colour the border is changed to for a given image is determined by reducing the colours in the image to just one then inverting that colour. I found this gives a more pleasing effect that using the same colour for each photo. It also avoids the need to expend effort on finding a single colour that looks generally pleasing for all photos.
• Because each photo is an individual element, they automatically flow to fill the available space. (Try resizing the browser window whilst viewing the page.)
• Because the thumbnail images are pngs with transparency, you can stick any background you want behind them.

Mike Willis : 14 Mar 2010 17:27 |  Tags: CSS HTML Imagemagick Javascript Png |  Comments (0) |  Close comments |  Report a problem