align text vertical center in div with css

Basic:
#box { height: 90px; line-height: 90px; }

A more versatile approach:
div { width: 250px; height: 100px; line-height: 100px; text-align: center; }
 span { display: inline-block; vertical-align: middle; line-height: normal; }

Display Table: 

div { display: table; width: 250px; height: 100px; text-align: center; }
span { display: table-cell; vertical-align: middle; }

Body image background

img#background {
 height: 100%; width: 100%; z-index: -1; position:absolute; color: white; 
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

<img id="background" src="image-location" alt="Background-image"> 

Unblod text in safari

-webkit-font-smoothing: antialiased;

sup css to adjust font

sup{ font-size:11px; font-weight:normal ; height: 0; line-height: 1; vertical-align:top; _vertical-align: bottom; position: relative; }

Google Web Fonts

https://developers.google.com/webfonts/docs/getting_started#Subsets

Create XML in PHP

<?php

// THIS IS ABSOLUTELY ESSENTIAL - DO NOT FORGET TO SET THIS
@date_default_timezone_set("GMT");

$writer = new XMLWriter();
// Output directly to the user

$writer->openURI('php://output');
$writer->startDocument('1.0');

$writer->setIndent(4);

// declare it as an rss document
$writer->startElement('rss');
$writer->writeAttribute('version', '2.0');
$writer->writeAttribute('xmlns:atom', 'http://www.w3.org/2005/Atom');


$writer->startElement("channel");
//----------------------------------------------------
//$writer->writeElement('ttl', '0');
$writer->writeElement('title', 'Latest Products');
$writer->writeElement('description', 'This is the latest products from our website.');
$writer->writeElement('link', 'http://www.domain.com/link.htm');
$writer->writeElement('pubDate', date("D, d M Y H:i:s e"));
$writer->startElement('image');
$writer->writeElement('title', 'Latest Products');
$writer->writeElement('link', 'http://www.domain.com/link.htm');
$writer->writeElement('url', 'http://www.iab.net/media/image/120x60.gif');
$writer->writeElement('width', '120');
$writer->writeElement('height', '60');
$writer->endElement();
//----------------------------------------------------



//----------------------------------------------------
$writer->startElement("item");
$writer->writeElement('title', 'New Product 8');
$writer->writeElement('link', 'http://www.domain.com/link.htm');
$writer->writeElement('description', 'Description 8 Yeah!');
$writer->writeElement('guid', 'http://www.domain.com/link.htm?tiem=1234');

$writer->writeElement('pubDate', date("D, d M Y H:i:s e"));

$writer->startElement('category');
$writer->writeAttribute('domain', 'http://www.domain.com/link.htm');
$writer->text('May 2008');
$writer->endElement(); // Category

// End Item
$writer->endElement();
//----------------------------------------------------


// End channel
$writer->endElement();

// End rss
$writer->endElement();

$writer->endDocument();

$writer->flush();
?>

play youtube video with mute sound

<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.1");
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.mute();
}
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/YOUR-CODE-HERE?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3",
"ytapiplayer", "290", "160", "8", null, null, params, atts)
</script>

sql select order by specific order

select * from tablename
Where id in (15,12,34,44,2)
Order by (Case When id = 15 then 0
When id = 12 then 1
When id = 34 then 2
When id = 44 then 3
When id = 2 then 4 Else id End)

coverflow effect

http://addyosmani.com/blog/jqueryuicoverflow/
http://www.deensoft.com/lab/protoflow/
http://blarnee.com/wp/an-improved-javascript-coverflow-demo-using-canvas-and-html5/
http://www.weberdesignlabs.com/blog/2007/09/flash-itunes-cover-flow/
http://jacksasylum.eu/ContentFlow/docu.php

CSS wide layout

to make the background going to wide of the site of any size of browser.

#wrapper{
width:100%; min-width:1200px;
position:relative;
}

scrolling vertical and horizontal

http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/
http://sorgalla.com/jcarousel/

CSS hacks and techniques

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

Lightbox

http://www.zimbio.com/Interesting+webthings/articles/97/Web+2+0+Round+up+Modal+Window+Lightbox+Effect
http://www.hiddenpixels.com/designer-and-developer-resources/lightbox/
http://www.bugninja.com/code/rounded-corners-tooltip-lightbox-example/#
http://planetozh.com/projects/lightbox-clones/

Centering (horizontally and vertically) an image in a div box

<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->

And that’s the relevant HTML

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

http://www.brunildo.org/test/img_center.html

CSS Opacity

/* for IE */
filter:alpha(opacity=85) !important;
/* CSS3 standard */
opacity: 0.8;
-moz-opacity:1;
position:relative;

Clickable DIV

add onClick="window.location.href='http://www.google.com'"

Jquery Plugins

http://www.malsup.com/jquery/
http://slidesjs.com/ - slide show plugins
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

back-and-forth scrolling effects

http://www.malsup.com/jquery/cycle/scrollhv.html
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
http://www.ndoherty.biz/demos/coda-slider/
http://web.enavu.com/tutorials/making-a-nice-jquery-content-scroller-with-ease/

CSS Minimum Height

height:400px;
height:auto !important;

min-height:400px;

Thickbox

http://jquery.com/demo/thickbox/