Webbdesign direkt » bilder http://www.webbdesigndirekt.se - blogg om webbdesign och programmering Sat, 12 Jun 2010 21:52:03 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Genomskinliga bilder med CSS http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/ http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/#comments Mon, 24 Aug 2009 23:03:07 +0000 Mattias http://www.webbdesigndirekt.se/?p=858 Att göra bilder genomskinliga är inte helt enkelt eftersom alla webbläsare  har sitt eget sätt att hantera genomskinlighet. För att genomskinlighet ska fungera i alla webbläsare behövs därför inte mindre än fyra olika CSS regler.

CSS

img.transparent {
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   -khtml-opacity: 0.4;
   opacity: 0.4;
}

I ovanstående exempel är bilden 40% genomskinlig.

Observera att sidan måste ha en korrekt Doctype för att genomskinlighet ska fungera i Internet Explorer.

CSS egenskap Förklaring
opacity: 0.4; Denna egenskap fungerar i nyare versioner av Firefox, Safari och Opera. Detta är den nuvarande standarden i CSS.
filter:alpha(opacity=40); Denna egenskap används av Internet Explorer
-moz-opacity:0.5; Denna egenskap används av äldre Molzilla webbläsare som Netscape Navigator.
-khtml-opacity: 0.5; Denna egenskap används av äldre versioner av Safari (1.x)
]]> http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/feed/ 2 Gratis bakgrundsbilder http://www.webbdesigndirekt.se/gratis-bakgrundsbilder/ http://www.webbdesigndirekt.se/gratis-bakgrundsbilder/#comments Mon, 13 Oct 2008 11:53:03 +0000 Mattias http://www.webbdesigndirekt.se/?p=269 GRsites har ett stort arkiv med bakgrundstexturer som man gratis får använda till sin hemsida. Kvaliteten är dock väldigt varierande så det kan löna sig att leta runt ett tag. Några av våra favoriter är dessa.

Gräs Moln Tyg Löv
Papper Stjärna Trä Hallon
Hallon
Kretskort Siffror Noter Serier
Kretskort Matrix Noter Kalle och Hobbe

Klicka på bilderna för att förstora dem!

Gradienta bakgrunder

GRsites har även en användbart verktyg för att skapa gradienta texturer som man sedan kan använda till bakgrund på sin sida.

Samtliga bilder är gratis att använda och den enda motprestationen är att de ber om en tillbakalänk till adressen http://www.grsites.com.

Så här ändrar du bakgrundsbild

Med CSS går det enkelt att byta bakgrundsbild på en webbsida.  Genom att ange CSS egenskapen ”background”  för elementet HTML body kan man ange en URL till den bild som ska utgöra bakgrunden. Se nedanstående exempel:

CSS

body {background-image:url('bakgrundsbild.jpg')}

Läs mer hur man ändrar bakgrundsbilder i CSS.

]]> http://www.webbdesigndirekt.se/gratis-bakgrundsbilder/feed/ 1