17
Jun
2
Jun
2
Webbdesign trender #3: Transparenta bakgrunder och effekter
Tack vare nu när nästan alla webbläsare stöder transparent så kan denna effekt användas lättare än någonsin. Det finns 3 alternativ i min vetskap hur man skapar detta. Första skulle vara om man manipulera transparenta effekt i Photoshop till exempel. Med då kommer nackdelen att där du skapar din effekt måste ha fast bredd och höjd.
Det här förslaget är nog det bästa i dagens läge. Som jag nämnde så stöder nästan alla nya webbläsare PNG (PNG24 i Photshop) som kan sparas som transparent i ditt grafik program. I detta fall så kan effekten vara elastisk. Det sista men det mest osäkra kortet är att använda nya CSS3 attribut som skapar denna effekt i den önskade div:en.
Relaterade guider och tips om transparenta bakgrunder
Hur du skapar detta med CSS3. Notera att detta funkar inte i alla webbläsare.
#div {
opacity: 0.6;
}
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
Christine Galvin Design
Unique 3w
Alex Swanson
Votaw Precision Technologies
Hotel Prestige
24 Ways
Design Phunk
Fred Maya
Impact South Africa
Comicspack
/Webunder
lebloe
Fabio Carneiro
RedoPC
Lisa Moseley
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Relaterade inlägg
Andreas Eriksson (July 22, 2009 at 21:53)
Det är inte bara CSS3 som stödjer transparans. Men behöver dock använda mer än opacity. Detta bör funka i tom IE 6, rätta mig om jag har fel.
#div {
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
}
Johan (July 23, 2009 at 11:51)
Tack för tipset Andreas! Har dock inte provat det själv.