54 besökare online
Drömvävaren webbshop
4 kunder online

webdesign och HTML

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 »

tabell i en annan tabell med bakgrundsfärg
     
     

 

 

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

 

skugga1.gif »

Namn:

Epost:

Meddelande:


 

skugga3.gif »

Namn:

Epost:

Meddelande:


 

skugga6.gif »

Namn:

Epost:

Meddelande:


 

Lägg formuläret i en tabell med bakgrundsfärg så förstärker du intrycket av djup i formulärfälten:

skugga1.gif »

Namn:

Epost:

Meddelande:

 

 

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.

  1. 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:

  2. 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å.
  3. Öppna menyn "Lagerstilar" (Layer style) och välj stilen "Innerskugga" (Inner Shadow) med knappen Lagerstilar:

  4. Ä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 »