CSS research

I'm completely knackered, but research is my life. One of my many clients wanted a semi transparent div. Now i say div, but they just want it to look shiny.

Basically then want an element with appox 20% opacity. Easy right, use a PNG. But that cancels out all ie versions apart from 7. How about a gif instead, you dont get alpha transparency! Well genius how about css, great, there are ways to do it on webkit, gecko, and ie, however they apply the same amount of transparency to their children.

the trick here is to think outside the box, literary...



Thanks to relative positioning, i made a solid div below my transparent div, and moved it over the transparent div, creating a the above effect. The cool things is that by modifing the z-index you can create a ghosting effect!

Best of all, there are no images used to create the above, (well apart form the obvious background pattern on the body), more testing is needed, but i think i might be on to something here.

The CSS
*{
text-align:center;
margin:0;
padding:0;
}
body{
background: url("pattern.gif");
}
div#wrapper{
margin:0 auto;
width:70%;
text-align:center;


padding:1em;
}
div#panel{
opacity: .50;
height:200px;
background: #ddd;
width:100%;
margin:0 auto;
}
div#wrapper p{
padding:1em;
background: #000;
color:#fff;
width:90%;
position:relative;
margin:0 auto;
top:-180px;
z-index:1;
}

The html

Transparent div

content goes here

Now if you excuse me, i'm off to bed

Introducing Absolution

Yes i'm alive, it may have been months since the grand plans of facebook widgets and such, but i'm back. Today i'm unleashing on the world something new(ish), A PHP framework. Now don't get me wrong it's no piece of cake, but it's not meant to be. Absolution place in the world is on shared hosts, and B grade websites, where speed of development is more important than MVC patterns and OO principles.

Well OO is always good but you know what i mean.

Currently it consists of 4 classes, that contain helper functions, that enable you to do things like print an un ordered list from a sql query in one line of code!, get a pre-sanitized variable from the query string with one line, even filter out bad characters with one line.

I plan to add more classes, and more functionality, as the framework grows up, however it's 0.01 alpha at the minute! Eventually i want this to grow into something like prototype for PHP, a lean, mean framework machine.

Also i think this place could do with a redesign, ajaxian styleee, now if only i had time.


Till another time

Quote of the Day

"We knew that when we gave it to him, that it was never gonna end up as just a simple webpage!"

My love of Jquery is starting to give me a reputation