CSS3 Generator

http://css3generator.com/

Posted December 17, 2011 by Qingli in My blog

Cool Signature Generator

_/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/_/ _/ _/ _/_/ _/ _/ _/_/ _/ _/_/ _/ _/_/_/ _/
_/_/_/_/ _/_/_/_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/ _/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/_/_/ _/ _/ _/_/ _/ _/ _/_/ _/ _/ _/_/_/ _/

Link

Posted November 3, 2011 by Qingli in My blog

Super Awesome Buttons

The original link: ZURB.com

Demo

.awesome, .awesome:visited {
background: url(“/images/alert-overlay.png”) repeat-x scroll 0 0 #222222;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
padding: 5px 10px 6px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.awesome:hover {
background-color: #111111;
color: #FFFFFF;
}
.awesome:active {
top: 1px;
}
.small.awesome, .small.awesome:visited {
font-size: 11px;
}
.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.large.awesome, .large.awesome:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.green.awesome, .green.awesome:visited {
background-color: #91BD09;
}
.green.awesome:hover {
background-color: #749A02;
}
.blue.awesome, .blue.awesome:visited {
background-color: #2DAEBF;
}
.blue.awesome:hover {
background-color: #007D9A;
}
.red.awesome, .red.awesome:visited {
background-color: #E33100;
}
.red.awesome:hover {
background-color: #872300;
}
.magenta.awesome, .magenta.awesome:visited {
background-color: #A9014B;
}
.magenta.awesome:hover {
background-color: #630030;
}
.orange.awesome, .orange.awesome:visited {
background-color: #FF5C00;
}
.orange.awesome:hover {
background-color: #D45500;
}
.yellow.awesome, .yellow.awesome:visited {
background-color: #FFB515;
}
.yellow.awesome:hover {
background-color: #FC9200;
}

Posted October 27, 2011 by Qingli in My blog

wp_shortcode add product image fadein and fadeout

// [product pro_id=”1″ img_url=”” img_tit=”product name” doc_url=”#” content=””]
function product_info($atts, $content = null) {
extract(shortcode_atts(array(
‘pro_id’ => ‘1’,
‘img_url’ => ‘img/image.jpg’,
‘img_tit’ => ”,
‘doc_url’ => ‘#’,
‘content’ => ‘text text text….’,
), $atts));

$img_tit_union = str_replace(” “, “-“, $img_tit);

$code = ‘

Product image thumbnail
Click here to see Product ‘ . $pro_id . ‘ brief info
Click here to download PDF info
download icon

</div>
</div>

‘ . $img_tit . ‘ ‘ . $pro_id . ‘

' . ucwords($img_tit) . '‘ . $content . ‘

‘;

return $code;
}

add_shortcode(‘product’, ‘product_info’);

Posted October 18, 2011 by Qingli in My blog

wp_shortcode Learn more text link

Shortcode for Learn more…

//[learnMore link=”#” title=”Learn More”]
function learnMore($atts, $content = null){
extract(shortcode_atts(array(
‘link’ => ‘#’,
‘title’ => ‘Click Here To Learn More’
), $atts));

$code = ‘<em style=”font:italic bold 14px Georgia,Serif;”><a href=”‘. $link .'” title=”‘. $title .'” style=”white-space:nowrap;color: #1a5030; text-decoration: none;”>learn more…</a></em>’;
return $code;
}
add_shortcode(‘learnMore’, ‘learnMore’);

Posted October 18, 2011 by Qingli in My blog