June 8
Creazione di un menu di carta strappata in CSS è facile da fare per prima cosa creare l'immagine carta strappata e poi aggiungere l'immagine al codice CSS. Utilizzare questi passaggi fondamentali per creare carta strappata in un software grafico che include livelli ed effetti. software nativo, come Paint, non sarà in grado di creare l'effetto di per sé, ma può con l'aggiornamento gratuito per Paint.NET. Altri software, come Snagit, viene fornito con un effetto carta strappata.
1 Aprite il vostro software di grafica preferito, come Paint.NET, gimp o Photoshop.
2 Creare un nuovo file che rappresenta la dimensione del menu. Aggiungere un nuovo livello in cima. Riempire lo strato di bianco e poi nascondere il livello. Aggiungere uno strato trasparente sopra dello strato bianco.
3 Selezionare il pennello e creare una linea irregolare attraverso lo strato bianco. Unire gli strati trasparenti e bianche e poi duplicare.
4 Aggiungere una sfocatura gaussiana sul secondo strato. Fare clic sul livello superiore e quindi fare clic sulla zona da mostrare attraverso l'effetto carta strappata con lo strumento bacchetta magica. Invertire la selezione e quindi eliminare.
5 Unire i due strati e fare clic sull'area per essere mostrato con lo strumento magico. Elimina la selezione.
6 Salvare l'immagine come file PNG.
7 Create un nuovo livello e aggiungere testo all'immagine come "casa". Salvare il file con un nuovo nome, ad esempio a casa e ripetere come necessario per le schede di menu aggiuntive.
8 Aprire il file HTML e aggiungere il seguente codice CSS per la sezione di testa del codice.
"<Html> <head>
<Style type = "text / css">
div.img {height: auto; width: auto;
float: left; text-align: center; }
div.img img
{Display: inline; margin: 3px; border: 1px solid # 333333; }
div.img a: hover img
{Border: 1px solid # 333333; }
div.desc
{Text-align: center; font-weight: normal; width: 120px; margin: 2px; }
</ Style>
</ Head> "
9 Nella sezione corpo del codice, aggiungere il seguente codice. Sostituire "casa", "su" e "contatto" con le immagini di carta strappati create.
"<Body>
<Div class = "img">
<a target="_blank" href="http://www.google.com">
<Img alt = "Carta" width = "300" height = "100" /> </a> </ div>
<Div class = "img">
<a target="_blank" href="http://www.google.com">
<Img alt = "Carta" width = "300" height = "100" /> </a> </ div>
<Div class = "img">
<a target="_blank" href="http://www.google.com">
<Img alt = "Carta" width = "300" height = "100" /> </a> </ div>
</ Body> </ html> "
10 Salvare il file.