HTML and CSS Fluid Transparent Rounded Corner Boxes

2nd May, 2010

That’s quite a lot to demand of a title, and a box on a website as well it seems. In my work I have had a couple of designs lately that have required me to think up a good and solid way of having four rounded corners in a box that is one of a couple of things:

• Totally fluid, as in it resizes in both axes in accordance with changing content size.
• Each corner needs actual transparency to sit on gradient backgrounds.

There are hundreds of methods posted online about how to do fancy corners on boxes using CSS, but quite a lot of them just don’t have transparency involved, or worse still use a hack here and there or use a sprinkling of absolutely positioned, empty divs.

So what to do about the boxes having exhausted quite an extensive Google search and not finding a method that really suited me? Make one up of course. For those of us still stuck supporting IE6 as well as a raft of other browsers and their various editions, while offering a text resizing facility on the site, this meant it has to be remarkably robust.

The following method is the one I made for four corners only, with no border fanciness. In fact the graphical requirements were so simple that actually all the corners are the same GIF file as a ball, used much like you would a sprite:

Read the rest of this entry »

New Site, Old Browser

30th September, 2009

Even though I started this new design with the feeling that I should just ignore Internet Explorer 6, I did realise that there were still visitors doomed to using this browser, either because of their hardware/operating system limitation, familiarity or their company’s refusal to update. I also had all the bits and pieces for adapting a site for 5 and 6 compatibility already in place, and had been adding them as and when I recognised old scenarios that needed them.

So I took this opportunity to start up my old computer, which is running a pretty much clean install of Windows 98 updated as far as it was supported, all on a Pentium 4 with 512mb of RAM and the high-end Geforce 2 GPU: astronomical power compared to what 95 and 98 were intended to work with normally. And then there is Internet Explorer 6!

I was a little bit astonished to discover that despite my fears that the new CSS would collapse in a heap, everything was generally rendering exactly where it was meant to be. The only issues were superficial ones, such as transparent PNGs rendering as grey which were easily fixed. In the end I did make an effort to ensure that users browsing with IE6 do have a reasonable experience.

New Site Design Up and Running

22nd September, 2009

So finally I’ve switched my website to the new design, with a hefty number of new bits and pieces being added so you’ll have to bear with me for a little while as things get sorted out. Some of the bigger changes include integrating twitter (for which I have had an unused account for years) as a sort of microblogging tool, separating my university work from my professional portfolio and integrating a ‘Related Posts’ system which I have had in mind for a long time but have only just discovered a brilliant plugin that does all the hard work for me.

Above is a shot of a couple of the images I’ve produced for new site features.

You can find that related posts plugin at http://wordpress.org/extend/plugins/similar-posts/. Another plugin by the same authors is one that shows a list of the most recent posts. In the old design I had this functionality hardcoded into the theme footer but now it can be done with a single line of PHP.

Added sIFR to the Site

19th September, 2009

Tired with the poor antialiasing observed in big header fonts, I decided to introduce sIFR to the site. Here’s a preview shot allowing me to use High Tower Text as my page heading:

New SRJM Logo Design

14th September, 2009

I’ve started work on a new logo design for myself:

Completed a Flash Drag and Drop Demo

10th September, 2009

Following applying for a position at spongeuk I had to produce a demonstration Adobe Flash and Actionscript piece from a sample brief creating a drag and drop e-learning game.

This involved forming an interface based on the style of their website and creating actionscripted animation for button and label motion, as well as learning a bit about SLR cameras myself in the process! I await to see if this demonstrates suitable skills for the position.

Update: the company was suitably impressed by this demo however my application was too late before they had to hire another person.

New Site Design Underway

30th August, 2009

I have actually been slowly working on this (slowly being a bit of an understatement) for a while but keep having to put it off for other commitments. Usually this means I get a bit of time when I’m tired and not up to doing much else and a stint on Fallout III is only going to make things worse.

However here are a couple more screenshots of a general basic layout and more button-y bits since the last lot of menu icons!

Other plans include a bigger better blog post preview image, related posts links, using the excerpt field of posts and some form of proper search function that includes AJAX-ed suggestions.

PHP, Adobe PDF and Server Response Headers

28th August, 2009

I’ve been rather busy lately producing the PHP backend code for a document storage website and when it came to the question of where to actually store the files the answer naturally was somewhere outside of public_html so that control could be limited using the user authentication already available for the PHP pages. This meant that PHP would have to deliver a response as if the actual file itself was being accessed.

It’s pretty easy to find how to send alternative headers and a the source data from a PDF file: for example http://uk3.php.net/manual/en/function.header.php Additionally, there is plenty of information out there if you want to use ‘Content-Disposition’ to force the client’s browser to behave as if the file was a download rather than load Adobe Reader in the window itself.

However this was all fine until we discovered that Adobe Reader’s usual behaviour of displaying the first page and loading the document as it is being read was broken. This system is intended for some fairly large documents and the browser was choosing to download and cache the entire file before displaying anything. I knew immediately it would be something to do with the headers.

There is very little I could find that expanded on this issue, so using an online tool that can be found at http://www.askapache.com/online-tools/http-headers-tool/ I examined what response would be sent by accessing a PDF file directly from the server. Using this I could replicate the header in PHP and as I guessed, the issue was resolved:


header('Accept-Ranges: bytes');
header('Content-Length: '.$filesize);
header('Connection: close');
header('Content-Type: application/pdf');