creare un bordo per un apagina

Css Tutorial: Creare un bordo per una pagina…

Filed Under (Css, Tutorials) by Salmen on 02-10-2008

Tagged Under : Css, Tutorials

Ciao a tutti in questo Css Tutorial vi mosterò come creare un bordo per una pagina web.

Step 1

Prima cosa dovete inserire dei DIV vuoti nella vostra pagina.Potete anche inserirli alla fine della pagina.

 
	<div class="edge" id="left"></div>
	<div class="edge" id="right"></div>
	<div class="edge" id="top"></div>
	<div class="edge" id="bottom"></div>
</body>

Se notate che tutti i DIV hanno lo stesso nome class per considerarli come un gruppo e ogni uno ha un ID unico per poter modificarli individualmante.

Step 2

Agiungete il codice css alla vostra pagina per posizionare i div e attivare i bordi.

^?View Code ENC__CSS

 
	#left, #right {
		position: fixed;
		top: 0; bottom: 0;
		width: 88px;
		}
		#left { left: 0;  background: url(images/left.png) left center repeat-y;}
		#right { right: 0; background: url(images/right.png) right center repeat-y;}
 
	#top, #bottom {
		position: fixed;
		left: 0; right: 0;
		height: 88px;
		}
		#top { top: 0px; background: url(images/top.png) top center repeat-x; }
		#bottom { bottom: 0px; background: url(images/bottom.png) bottom center repeat-x; }

L’immagine utilizzata è un alpha-transparente png salvata da photoshop.