All 3 entries tagged HTML

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

Now with CSS3 bits

Follow-up to Image gallery thing using ImageMagick polaroid operation from Mike's blag

Subsequent to creating the above linked, I discovered the CSS3 transform and box-shadow properties. (The W3.org site currently says this regarding box-shadow: "This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.") CSS3 is still a work in progress, so support varies and in the case of transform and box-shadow is done using vendor specific prefixes on the properties. E.g. Firefox supports box-shadow by way of -moz-box-shadow. Chrome supports it via -webkit-box-shadow, though Safari currently doesn't. Opera apparently supports it via -o-box-shadow as of 10.5, but I haven't tested it. Internet Explorer Explorer, unsurprisingly, doesn't support box-shadow and nor does it support transform, but all of the other aforementioned browsers do.

Anyway, two notable attributes of the thumbnails in my previous gallery example are that they are rotated and that they have a shadow. Which means I can do a version of that just uses CSS3 features. (HTML generation script)

Pros over the other version:

• The area of the page that needs to be clicked to display a particular image matches the visible outline of the images.
• Uses less bandwidth. The thumbnails are now done using one single jpeg image which is ~10KB rather than using two images totalling ~60KB
• Much simpler. There's no Javascript used (though this might be necessary/desirable if I'd done the different colour border on mouse over for each image as I did in the other version). Thumbnails are created simply by creating a smaller version the original photo, which is a trivial operation.
• More flexible. The white borders and the shadows are done with CSS rather than having been applied using ImageMagick prior to uploading, so they can be quickly altered without having to regenerate the thumbnails.

Cons:

• Very varying results depending on browser.
• The thumbnails don't quite look as nice. With the png version the thumbnails are not entirely flat, the ImageMagick polaroid operator puts a bit of curve on them. Firefox on Linux does a distressingly poor job of rotating the images, they look far worse than they do in Firefox on Mac OS X. I've been unable to find any discussion on this discrepancy in quality. (Mac screengrab. Linux screengrab.)
  

Mike Willis : 16 Mar 2010 20:32 |  Tags: Css3 HTML |  Comments (8) |  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