Wednesday, March 30, 2011

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/

Tuesday, March 22, 2011

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

Friday, March 11, 2011

CSS Opacity

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

Thursday, March 10, 2011

Clickable DIV

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

Tuesday, March 08, 2011

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/