skriv ut »Skugga med bakgrundbild
En innerskugga ger dina objekt mer djup och kan användas på allt som kan ha en bakgrundsbild. Exemplen nedan använder en GIF-bild som anges som bakgrund med hjälp av CSS (läs mer om CSS i guiden "CSS - stilmallar »). Bilderna som används kan du spara och använda i dina egna sidor. Har du tillgång till ett bildbehandlingsprogram kan du göra egna bakgrunder. Guiden visar även hur du gör egna bakgrunder i Photoshop 7.
Tabell: skugga i tabellceller
skugga1.gif »
| tabell | med | skugga |
skugga2.gif »
| ...en annan | skugga | med mer |
| avstånd | mellan | cellerna |
skugga3.gif »
| ...en annan | skugga | med mer |
| avstånd | från | cellkanten |
skugga4.gif »
| ...en mer | diskret | skugga |
skugga5.gif »
| ...en skugga | med mer | spridning |
skugga6.gif »
| skugga | i varje | cell |
skugga5.gif »
| skugga | i tabellen | istället |
| för i varje | cell... | |
Lägg tabellen i en annan tabell med bakgrundsfärg så förstärker du intrycket av djup i tabellcellerna:
skugga1.gif »
|
Steg 1:
Spara bilden med skuggan
Klicka på bildnamnet ovanför tabellen som du vill använda. Spara bilden i samma mapp som HTML-sidan den ska användas i.
Steg 2:
Lägg koden inom <BODY>
<BODY>
<table width="400" border="0"
cellspacing="2" cellpadding="5">
<tr class="skugga">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="skugga">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="skugga">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</BODY>
I exemplet är CSS-koden tillämpad på hela tabellraden <TR>. Du kan även lägga CSS-koden i varje tabellcell <TD> men det blir då mer kod:
<tr>
<td class="skugga"></td>
<td class="skugga"></td>
<td class="skugga"></td>
</tr>
Steg 3:
Lägg koden inom <HEAD>
<HEAD>
<style type="text/css">
<!--
.skugga {background-image: url(skugga.gif);}
-->
</style>
</HEAD>
OBS! Ändra sökvägen till bilden om du lägger den i annan mapp än HTML-sidan. Byt bildnamnet "skugga.gif" till namnet på den bild du använder.
Läs mer om tabeller i guiden "Tabeller" »
Formulär: skugga i formulärfält
Lägg formuläret i en tabell med bakgrundsfärg så förstärker du intrycket av djup i formulärfälten:
Steg 1:
Spara bilden med skuggan
Klicka på bildnamnet ovanför tabellen som du vill använda. Spara bilden i samma mapp som HTML-sidan den ska användas i.
Steg 2:
Lägg koden inom <BODY>
<BODY>
<form>
Namn:<br>
<input name="namn" type="text" class="skugga" size="40">
<br>
Epost:<br>
<input name="epost" type="text" class="skugga" size="40">
<br>
Meddelande:<br>
<textarea name="meddelande" cols="40"
rows="5" class="skugga"></textarea>
<br>
<input type="submit" name="Submit" value="Skicka">
</form>
</BODY>
Steg 3:
Lägg koden inom <HEAD>
<HEAD>
<style type="text/css">
<!--
.skugga {background-image: url(skugga.gif);}
-->
</style>
</HEAD>
OBS! Ändra sökvägen till bilden om du lägger den i annan mapp än HTML-sidan. Byt bildnamnet "skugga.gif" till namnet på den bild du använder.
Läs mer om formulär i guiden "Formulär - Forms" »
Skapa egna skuggor i Photoshop
Om du har tillgång till Photoshop, Paintshop Pro eller annat bildbehandlingsprogram kan du enkelt skapa egna skuggbakgrunder. Så här gör du i Photoshop 7.
- Skapa ett nytt dokument som är större än de objekt du ska använda bakgrunden till. Detta för
att en bakgrundsbild annars upprepas och din skugga blir då
felaktig om bilden är för liten. I exemplet är dokumentstorleken
1024x768 pixlar:
- Dubbelklicka på bakgrundslagret för
att få upp dialogrutan "Nytt lager":
Gör inga ändringar utan bekräfta bara med OK:
Nu är bakgrundslagret ett vanligt Lager som du kan tillämpa Lagerstilar på. - Öppna menyn "Lagerstilar" (Layer
style) och välj stilen "Innerskugga"
(Inner Shadow) med knappen Lagerstilar:
- Ändra värdena för skuggan för
att få ditt önskade utseende. De värden som ger
mest variation är Opacitet, Avstånd och Storlek:
Bekräfta med dina ändringar med OK och spara bilden som en GIF-bild. Läs mer om att spara som GIF i guiden "Spara för web - Transparent GIF, JPEG mm
Photoshop 5.5 - 6 och 7" »
