In the great month of February in the year 2010
Bite Sized Snack!
by Bug Logic
posted: February 8, 2010
Today, we released a site called Bite Sized Snack. It's an experiment, like just about everything else we do around here.
The idea - publish ONE inspiring image per day, provided by a kitchen-full of trusted professionals. Subscribers to the RSS feed (which we run through FeedBurner) will receive one serving of visual goodness daily at 10:30am (EST).
The Snack is starting with around 30 chefs on board. We've written a little program that will randomly select the next snack and publish it to the home page each day. The program is written so that all chefs get equal exposure as time goes on.
What we're hoping: That the daily snack will be lite enough and entertaining enough to attract a lot of subscribers, enough subscribers for us to attract some advertising dollars. If that happens, the ad revenue will be distributed evenly between the chefs.
Will this work? No clue. One thing is for certain: If we don't try, we'll never know.
|
div opacity and text!
by Bug Logic
posted: February 2, 2010
Spent a bit of time trying to understand placing text within a div that had opacity. The problem was that the text itself would inherit the opacity, making it fairly useless.
Looked around on different sites for the answer to the problem, but never found anything that was correct. Found lots of answers, none of them satisfying.
In case you've arrived here looking for the actual answer, here it is.
The first div should have position:relative. No other styles need be applied to the first div, and it will remain open.
The second div will have the following CSS applied and will be closed:
position:absolute;
top: 0px (or whatever you need)
lleft: 0px (or whatever you need)
height: heightpx;
width: widthpx;
opacity: 0.8; (or whatever you need)
alpha(opacity=80);
background: color or url;
z-index:1;
The third div shall have the following CSS applied and will be closed after the text:
position:relative;
z-index:5;
color: color;
font-family: font-family;
padding: padding;
Finally, close the first div which remains open. You're done.
|
The above example (without the dotted background included) with the CSS written inline:
<div style="position: relative;">
<div style="position: absolute;
top: 0px;
left: 0px;
height:30px;
width: 218px;
opacity:0.8;
filter:alpha(opacity=80);
background:#281704;
z-index: 1;">
</div>
<div style="position: relative;
padding: 5px;
z-index:5;
color:#FFFFFF;
font-weight:bold;
font-family:'Times New Roman', georgia, times, serif;
font-size:15px;">Published in haste</div>
</div>
|
-----------
And that's it. Not sure why there was no reliable tutorial for this tehnique online. The internets are just full of things that are wrong. This isn't one of them.
You could of course apply the above CSS as either a class or as an id and it would work just fine too. Lot's of times, I prefer to write things inline because I only plan on using it once.
|
|
|
|
