flowerpoop.com

I was reading about Mooncakes since its Mooncake festival, and I came across that some of the main ingredients were the Lotus Seed. During my searches, I found this website. very interesting, I now want to get some lotus seed and start growing some beautiful flowers. plus lotus roots are very awesome foods. hmm.

ok this post will get updates, I am now on the hunt for lotus seeds.

I just did a svn update on my blog, and the admin area changed. currently i am running the latest version of wordpress 2.7 hemorrhage what a name

here are a few screen of their new look, in case you don’t know how to svn update.

whilst I was working on doing web stuff for my company i came across a strange phenomenon doing cross browser stuff.

my task was to create curved corners on div boxes. First i thought man this is gonna be cake. since there is a handy dandy jQuery plugin i could use in doing so. you can see more of that here

the jquery plugin source is here

basically all you have to do is add the jQuery string argument at the end of your selector.

code:

$("#your_block_id").corner("the parameters");

the parameters are basically this

.corner(“effect corners width”);

so to get a regular rounded corner block you can do something like this. since round is the default. all you have to do is put the pixel sizes as the parameter.

code:

$("#your_block_id").corner("10px");

demo:

so that solved the problem withe corners, its lightweight, and under 8k compressed and packed.
very quick load time.

The other thing is regarding the strangeness of tranparent pngs for backgrounds, and you will need to see this in IE7 and firefox3 which is what i’m running at the moment. although any flavor of Firefox will suffice.

As I was using the curvy corners jQuery plugin to make all the corners curvy on the block items. i was asked to place borders around all the blocks. The jQuery corner plugin is great for non border objects, but a different approach was needed in order to get the bordered corners. this is one approach i usually take when i just don’t want to think and use a CSS approach. Plus i think its just fine for what i need. Although there is a Stu Nichols Approach for doing a complete CSS version. but to me is not all scalable for multiple objects. and i admit i’m just lazy.

I used a combination of css and images.

here is the css

.topbar {
    position:relative;
    border:1px solid #6a6a6a;
    background:transparent url(images/333back.png);
    width:201px;
    padding:15px;
    margin:10px auto 0 auto;
    text-align:center;
}
.topbar .header_lt {
    position:absolute;
    height:10px;
    width:10px;
    left:-1px;
    top:-1px;
    background:#000 url(images/lt_header.png) no-repeat scroll center top;
}
.topbar .header_lb {
    position:absolute;
    height:10px;
    width:10px;
    left:-1px;
    bottom:-1px;
    background:#000 url(images/lb_header.png) no-repeat scroll center top;
}
.topbar .header_rt {
    position:absolute;
    height:10px;
    width:10px;
    right:-1px;
    top:-1px;
    background:#000 url(images/rt_header.png) no-repeat scroll -2px 0;
}
.topbar .header_rb {
    position:absolute;
    height:10px;
    width:10px;
    right:-1px;
    bottom:-1px;
    background:#000 url(images/rb_header.png) no-repeat scroll -2px 0;
}

here is the code

<div class="topbar" style="font-size: 13pt;">
<div class="header_lt"></div>
<div class="header_lb"></div>
<div class="header_rt"></div>
<div class="header_rb"></div>
LOREM IPSUM DOLAR
</div>

so here are 2 blocks.
the first one uses the 1px background block.

this one uses the 100 x 100 px background block.

In Firefox they look identical, in IE7 you can see that one has a gradient. Bizarre eh? I though so.
so the fix is just making the background image a bit larger. that’s about it.

here are the images i used for this demonstration

andy samberg is way funny in this.