…

In questo articolo imparerete come creare un bellissimo effetto di testo utilizzando i CSS3.
Utilizzeremo il plugin lettering.js per manipolare il testo e per creare un effetto hover sorprendente!

Link: http://webexpedition18.com/articles/create-super-cool-text-effect-using-css3-and-lettering-js/…

…

…

Tutti noi sappiamo che (purtroppo) Internet Explorer fa i “capricci” in tutte le varie versioni. Per ovviare a questo problema si usano i commenti condizionali, che permettono di creare una regola CSS personalizzata per ogni versione di IE.

Link: http://davidwalsh.name/ie-conditional-comments…

Questo bellissimo effetto CSS di scorrimento sullo sfondo permette di rendere dinamico il tuo sfondo creando un effetto ottico!

Link: http://www.fivefingercoding.com/xhtml-and-css/scrolling-transparent-background-effect

Demo: http://www.fivefingercoding.com/assets/demos/bkgd-scroll-trick/…

…

CODICE HTML

 
<ul class="gallery">
<li>
		<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul>
 

CODICE CSS

 
ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a…

 
@media screen {
	.page-break	{ height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
	.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
 …

Guarda la Demo: http://line25.s3.amazonaws.com/wp-content/uploads/2009/letterpress/demo/demo.html

 
<style type="text/css">
 
* { margin, padding: 0; }
 
body {
	background: #474747 url(bg.png);
	margin: 70px;
}
 
h1 a {
	display: block; text-decoration: none;
	font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
	text-align: center;
	color: #999; text-shadow: 0px 3px 8px #2a2a2a;
 }
 	h1 a:hover {
 		color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
 	}
 
h2 {
	font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: center;
 
	color: …

CODICE HTML

 
<div id="live-preview-form" class="lp-block">
 
 
		<strong>Your Name:</strong>
<input type="text" name="name" id="name" value="" class="input" />
 
		<strong>Your Email:</strong>
<input type="text" name="email" id="email" value="" class="input" />
 
		<strong>Your Website:</strong>
<input type="text" name="website" id="website" value="" class="input" />
 
		<strong>Your Comment:</strong>
		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
 
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-avatar"></div>
<div id="lp-name"></div>
<div id="lp-comment"></div>
</div>
 

CODICE CSS

 
.lp-block		{ width:400px; float:left; }
.lp-block input, .lp-block textarea { width:90%; }
#live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
 
#lp-name { font-weight:bold; }
#lp-avatar { float…