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.

Personal CV Website

28th June, 2008

I have started work on a new design for http://www.mattwreford.com/, the owner of which felt that his existing site wasn’t really up to scratch. Knowing only that the client likes very simple and minimal designs, here is a screenshot of my initial layout and general concept for the site.

It will be quite a simple structure of 5 pages (four plus a link to a CV download) as requested, tabbed, and with two main content columns that serve different purposes on each page. For the CSS aspect of this design I have experimented with fluid column widths on both sides, where the content is grouped clearly in two blocks but they centre and expand within their columns with the resizing of the page.

Read the rest of this entry »

Website Design Inspiration

12th February, 2008

Because it is becoming a common occurence that I find a website that I find particularly inspirational, whether that be for its graphical design or a particular way of structuring what would normally be a very ordinary feature, and never really noting down the URL.

Now I could tag these sites using del.icio.us under something like ‘inspiration’ but I think I would rather also have more specific information or notes and possibly a screenshot to add some context.

So I shall be recording these websites on a page here.

Why does IE get PNG images quite so wrong?

26th November, 2007

Now I have avoided using transparent PNG for a long time despite its various advantages such as having a real alpha channel that can produce smooth, anti-aliased edges and having a proper amount of colours instead of 256, mainly because of IE6. But I have been testing for IE7 for a while now and I knew the issue of PNGs and the handling of their transparency is supposed to be fixed so I reasoned that I could design with PNG transparency in mind and worry about fixing it for IE6 later.

Read the rest of this entry »

Annoying CSS

21st October, 2007

Having completely exhausted a search for floating some images at the bottom right hand corner of a variably sized <div> and deciding this was impossible I came up with half a solution involving a normal float RIGHT <div> that cleared a second, hidden floating <div>, the height of which COULD have been determined by the overall height of the containing <div>. But it wasn’t great, and text would wrap very poorly around the images, cutting into the padding and margins. Using EM on the buffer’s height meant I could make it vaguely change in line with textsize changes but generally it looked crap and was different in every browser.

Read the rest of this entry »