Enkel måte å lage en meny med revet papir i CSS

February 26

Opprette en revet papir meny i CSS er lett å gjøre ved først å opprette den revet papir bilde og legge bildet til CSS-kode. Bruk disse grunnleggende trinnene for å opprette revet papir i en grafisk programvare som inkluderer lag og effekter. Native programvare, for eksempel Paint, ikke vil være i stand til å skape effekten på egen hånd, men kan med gratis oppgradering av Paint.NET. Annen programvare, som Snagit, kommer med en revet papir effekt.

Bruksanvisning

Torn Paper bilde

1 Åpne din favoritt grafisk programvare som Paint.NET, gimp eller Photoshop.

2 Opprett en ny fil som representerer størrelsen på menyen. Legg et nytt lag på toppen. Fylle laget med hvite og deretter skjule laget. Legg til en gjennomsiktig lag på toppen av det hvite sjiktet.

3 Velg pensel og skape en ujevn linje over det hvite laget. Flett de gjennomsiktige og hvite lag og deretter kopiere.

4 Legg en Gaussian blur på det andre laget. Klikk på det øverste laget, og klikk deretter på det området som skal vises gjennom revet papir effekten med tryllestav verktøyet. Invertere utvalget, og deretter slette.

5 Slå sammen de to øverste lagene og klikk på området som skal vises med den magiske verktøyet. Slett utvalg.

6 Lagre bildet som en png fil.

7 Lag et nytt lag, og legge til tekst til bildet som "Home". Lagre filen med et nytt navn, for eksempel hjem og gjenta etter behov for ekstra menykategoriene.

HTML-fil

8 Åpne HTML-fil og legge til følgende CSS-koden til hodet delen av koden.

"<Html> <head>

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: 2 piksler; }

</ Style>

</ Head> "

9 Under kroppen delen av koden, legg til følgende kode. Erstatt "hjem", "om" og "kontakt" med revet papir bilder du har laget.

"<Body>

</ Body> </ html> "

10 Lagre filen.