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 »

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 »

XHTML and Flash

7th November, 2006

An important part of our idat205 Creative Industries company was our use of flash in highly accessible and web standards compliant sites. Even though this was a feature of last year’s idat102 module with Dan Efergan and good website technique, I found myself put off by it all, especially favouring methods that didn’t involve anyone else’s code. Then the odd ‘Click to activate and use this control’ boxes appeared in microsoft Internet Explorer 6 and flash had to just not be used for anything important at all.

Flash under the ‘Click to activate and use this control’

 

However, I have discovered it really is easier to implement flash successfully than it seems.
So here’s how to do it:

Download the Script

Download the .js javascript file from http://blog.deconcept.com/swfobject/ (site is found very easily with google). Store it somewhere where your flash pages can find it.

Embed the Script

Embed the file within your page
(<script type="text/javascript" src="./swfobject.js"> </script>)

In addition I would place this above any CSS embed scripts it will get rid of the ‘FOUC’ problems discussed in

http://www.bluerobot.com/web/css/fouc.asp.

Embed your Flash File

Finally, you create a <div> of flash alternative content, which is written over if flash is available, like so:

<div id="website_menu">
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("./flash.swf", "flash", "300", "100", "8", "#ffffff");
so.write("website_menu");
// ]]>
</script>

And that is that, the page is XHTML compliant with regards to embedding the flash and IE doesn’t stop the content from interacting. For a list of reasons why this method is good, read more into the swfobject script blog site.

Update:

I’d say the basic parameters are pretty obvious (source,title,width,height,flash version and BG colour) but since this post and after a little experimentation its possible to do a rather lot more using ‘addParam’. For example setting the WMODE to something other than the defaults.