Anzeige
Tutorialbeschreibung

Transparenz auf Webseiten

Transparenz auf Webseiten

Mit Diesem Tutorials zeige ich euch wie man auf Seiten Bilder, Tabellen und etc.. durchsichtig gestallten könnt. Ihr benötigt dazu nur ein Editor oder ein adneres Programm wie zb. Dreamweaver oder Webweaver.


Sowas auf eine Hp zu bauen ist Praktisch da man dafür keine Bilder braucht die durchsichtig sind, auf den folgenden Link könnt ihr ein Beispiel davon sehen wie ich es benutzte.

Man kann in beiden Browsern (IE und Firefox) Bilder durchsichtig oder halb transparent machen. Beide brauchen verschiedene Codes und das will ich euch hier zeigen wie das geht.

Als erstes braucht ihr eine .css- datei wo die Einstellungen für die Transparenten Bilder steht. Hier arbeiten wir mit Classen. Is mir lieber, weil ich weiß das damit es auf jeden fall Funktioniert.

Für den IE braucht ihr folgendes:

filter:alpha(opacity=100);

Die Hundert ist die Stärke der Transparentbarkeit also 100= Nicht durchsichtig
und 0= durchsichtig.

Für den Firefox Braucht ihr folgendes:

-moz-opacity:0.95;

Hier ist es genau wie bei IE nur das halt 1.00 = Nicht durchsichtig ist und 0.00=durchsichtig.
Wichtig bei Firefox ist, ihr dürft die Minus-Zeichen nicht vergessen sonnst klappts nicht.
Da wir jetzt die Codes haben können wir unsere .css-datei jetzt erstellen.
Ich benutzte jetzt meine von der Hp aber jeden ist es frei anders zu machen und auch für was.

Css

.table_op {filter:alpha(opacity=95);
             -moz-opacity:0.95;
             background-color:#FFFFFF;}
.table_op2 { filter:alpha(opacity=85);
             -moz-opacity:0.85;
             background-color:#FFFFFF;}

Hier seht ihr 2 Classen die sind dazu da damit es an verschiedenen stellen halt unterschiedlich Transparentbarkeiten gibt. Für den Hintergrund habe ich Weiß genommen das verursacht dann bei Schwarzen Hintergrundbild, das ihr auf der HP sehen könnt, das es ein bisschen blaser wird im Conten und Nav berreich.

Da wir jetzt unsere Css haben können wir mit der index.html beginnen.

index.html

  <table border="0" cellpadding="0" cellspacing="0" class="table_op">
        <tr>
            <td background="/bilder/content_bg.jpg"><center><img src="/bilder/content.jpg" border="0" width="100%"></center></td>
        </tr>
        <tr>
            <td><img src="/bilder/content_top.jpg" border="0"></td>
        </tr>
        <tr>
            <td background="/bilder/content_middle.jpg"><div>Der Contenbereich
Der Contenbereich
Der Contenbereich
Der Contenbereich
Der Contenbereich</div></td>
        </tr>
        <tr>
            <td><img src="/bilder/content_bottom.jpg" border="0"></td>
        </tr>
    </table>   

so Sieht mein Contentbereich aus. Die Tabelle bekommt den Hintergrund Weiß und den Transparentwert 95%. Somit kann man den Hintergrund Transparent machen und Bilder die dahinter liegen zum vorschein bringen.

Das ist oft sehr Hilfreich da man only Images von Photoshop nicht sehr weit kommt wenn man so ein effekt haben möchte.

Ich hoffe es war Hilfreich und ein gut verständliches Tut falls fragen oder Kritiken bestehen einfach im Forum Posten.

Bilder

Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Lainay
  • 05.04.2011 - 11:33

Danke für das Tutorial. Versucht und leider doch nicht das passende Ergebnis wie gewünscht erhalten.
Für all jene die dies jedoch benötigen, sicherlich eine interessante Methode, leider auf div. Browser beschränkt

Portrait von dmoritz
  • 02.03.2011 - 13:18

Leider nichts für mich, da nciht W3C-konform. Da löse ich das besser direkt in Photoshop.
Trotzdem hilfreich, viele Wege führen schließlich nach Rom.

Portrait von einHonk
  • 27.08.2010 - 17:13

Ganz nett, aber ich verwende dann doch lieber die Transparenz von png's

Portrait von yumanita
  • 11.08.2010 - 09:40

danke gut erklärt, aber mit photoshop wohl doch besser zu realisieren

Portrait von 13ev
  • 02.04.2010 - 17:28

danke für die hilfe die hat mir sehr geholfen

Portrait von schluggy
  • 05.10.2009 - 19:46

Negtiv ist, dass nicht nur der Hintergrund, sondern auch die Schrift transparrent wird. Daher unbrauchbar. Ebenso das Beispiel anhand eines tabellenlayouts.

Portrait von Shoki
  • 18.08.2009 - 22:32

Super, danke!

Hat mir weitergeholfen.

Portrait von juhecomp
  • 18.06.2009 - 13:48

ddanke hat mir geholfen auch wenn ich s nicht unbedingt verwenden werde

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.04.2009 - 18:30

w3c würde meckern, ich würde einfach mit Photoshop ein transparentes .png erstellen, damit hat man so gut wie alle Browser auf deiner Seite!

Portrait von Rudi68
  • 07.02.2009 - 14:05

Alles sauber erklärt , hier wird dir geholfen

Portrait von manta656
  • 28.11.2008 - 18:38

Gut , aber wie bereits gesagt , man sieht es mit sehr vielen Browsern nicht. Es geht ja auch ganz leicht mit Photoshop ;)

Portrait von hhl
hhl
  • 12.11.2008 - 15:00

nice tutorial, nicht w3c-konform, aber geeignet für die meisten meiner besucher!!!

gibts solche css-befehle nicht auch für die weiter unten beschriebenen, benachteiligten nutzer von mac, linux und opera? ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.08.2008 - 11:07

Sorry, aber das, wie es meine Vorredner schon sagten, geht wirklich nur bei wenigen Browsern...
Also lasst es besser das einzubauen, sieht, dann wenn die Seite noch zu benutzen ist, oftmals sehr unprofessionell und schlecht aus!
Wenn man einen solchen Effekt unbedingt haben muss dann sollte man es wirklich in Photoshop umsetzen (wenn es denn geht!) ansonsten die Idee verwerfen...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.06.2008 - 03:23

super genau das was ich gesucht habe

Portrait von leumas
  • 23.05.2008 - 06:13

super so etwas habe ich gesucht

Portrait von speedcu
  • 21.02.2008 - 14:13

wow klasse! da fallen mir gleich wieder tausend möglichkeiten ein, was man damit machen kann. werd ich dann gleich ausprobieren :)

dankeschön!

Portrait von djvolume
  • 04.02.2008 - 11:18

danke genau das habe ich gesucht hoffe nur das das auch für ie6 funk.

Portrait von inesmausi
  • 01.02.2008 - 22:13

halloooo

damit kann ich meine hp noch versehen.
freuuuuu.

lg von ines

Portrait von Simon90
  • 23.01.2008 - 17:23

danke, gut beschrieben, werd ich gleich mal ausprobieren

Portrait von ReatKay
  • 05.11.2007 - 15:23

Sry, aber da diese CSS-Eigenschaft nur von wenigen Browsern akzeptiert wird und nicht der W3C-Norm entspricht, gibts nur einen Stern!

x
×
×