Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Grafiken mit Transparenz

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Transparenz mit Bildern

Beispiele zu http://www.npage.de/forum/grafiken/20137-weissen-rand-entfernen.html

Beispiel 1

Im ersten Beispiel wird einfach ein Bild auf einen farbigen Hintergrund gelegt. Der farbige Hintergrund ist in bestimmten Bildbereichen zu sehen, da das Bild selbst an bestimmten Stellen durchsichtig ist. So etwas geht nur mit Bildern in den Formaten png und gif, jpg unterstützt keine Transparenz.

Es sind keine besonderen Anweisungen in HTML und CSS erforderlich.

Beispiel 2

Im zweiten Beispiel ist beim (gleichen) Bild auch in den Bereichen, die eigentlich nicht durchsichtig die Hintergrundfarbe zu erkennen.

Der CSS-Code hierfür ist:


Der HTML-Code sieht so aus:

Je kleiner der Wert ist, desto stärker scheint der Hintergrund durch.

Beispiel 3

Bei diesem Beispiel werden zwei Bilder übereinandergelegt. Beide Bilder -das Logo und die Schrift- besitzen transparente Bereiche. Das Logo wird als Hintergrundbild eingefügt. Die darüber gelagerte Schrift wird direkt als Bild eingefügt und ähnlich wie im Beispiel 2 mit Transparenzeigenschaften versehen. Dadurch ist durch das Bild mit der Schrift sowohl das Logo als auch der farbige Hintergrund zu sehen.

Der CSS-Code hierfür ist:


Da die beiden Bilder unterschiedliche Abmessungen haben müssen sie mit

50px center

und

margin-top:120px; 
margin-bottom:120px;

positioniert werden.

Der HTML-Code für dieses Beispiel sieht so aus:

Beispiel 4

Jetzt noch ein weiteres Beispiel, diesmal mit einer extra erstellten Grafik. Jeweils die gleiche Grafik sieht einmal so aus:

und einmal so:

Man sieht jeweils die Hinterrundfarbe durchscheinen. Das erfolgt in diesem Fall nicht durch spezielle CSS-Anweisungen sondern wird durch spezielle Eigenschaften der Grafik selbst ermöglich. Im png-Format (gif geht nicht) können nämlich nicht nur vollständig transparente Bereiche sondern auch solche, die teilweise transparent sind. In diesem Fall vermischt sich die teilweise transparente Farbe mit dem Hintergrund der Webseite.

Derartige Effekte kann man mit fast allen professionellen Grafikprogrammen erzielen, auch mit dem kostenlosen Paint.Net

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}
Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: www.faninfo.npage.de | www.freie-hexen-seite.de