Da fast alle gängige Browser CSS3 beherrschen, lassen sich Transparenz-Effekte einfach und schnell verwirklichen.
Bilder oder Texte mit einer festen Transparenz erstellen: Mit der Erstellung eines neuen "CSS-Eintrages" können Bilder, Texte, Tabellen, ... mit einer Transparenz variabel dargestellt werden. In den folgenden Zeilen statisch.
Die folgenden Zeilen werden in die CSS-Datei eingefügt. Mit class="trans" können dann Bilder, Texte, Tabellen transparent dargestellt werden. Je kleiner der Wert (Zeile 4+5), desto stärker die Transparenz.
1 2 3 4 5 6 7
<style> .trans { opacity:0.4; filter:alpha(opacity=40; /* Für IE8 und früher */ } </style>
Der HTML-Code sieht dann wie folgt aus:
1 2 3 4 5 6 7 8
Text: <span class="trans">Dieser Text wird transparent dargestellt.</span>
• Dieser Text wird transparent dargestellt: Dieser Text wird transparent dargestellt.
• Dieses Bild wird transparent dargestellt:
Transparenz für Bilder oder Texte per Mouseover aufheben: Mit der Erstellung eines neuen "CSS-Eintrages" können Bilder, Texte, Tabellen, ... transparent dargestellt werden. Wird die Maus über die transparente Darstellung geführt, erscheint das Objekt zu 100%.
Die folgenden Zeilen werden in die CSS-Datei eingefügt. Mit class="transm" können dann Bilder, Texte, Tabellen transparent dargestellt werden. Je kleiner der Wert, desto stärker die Transparenz.
1 2 3 4 5 6 7 8 9 10 11 12
<style> .transm { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } .transm:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } </style>
Der HTML-Code sieht dann wie folgt aus.
1 2 3 4 5 6 7 8
Text: <span class="transm">Dieser Text wird transparent dargestellt.</span>
• Dieser Text wird transparent dargestellt: Dieser Text wird transparent dargestellt.
• Dieses Bild wird transparent dargestellt:
Transparenzeffekte für die Iconbar: Mit der Erstellung eines neuen "Forum-Code" können Bilder und Texte über die Iconbar transparent dargestellt werden.
Iconbar unter "Admin > Layout > Iconbar" öffnen
Reiter "Foren-Code" aufrufen
Erweiterte Foren-Code einblenden und die folgenden Daten eingetragen.
Speichern!
Wichtig! Erstellte Foren-Codes in den Ordner "nicht sichtbar" verschieben.
Navigation mit besserer Lesbarkeit Aktualisiert 16.03.23
Bei der Auswahl der Themen über die Navigation kann der Hintergrund der Webseite störend auf die Lesbarkeit einwirken! Mit dem folgenden Script ist es möglich den Hintergrund abzudunkeln, um die Schrift klar hervorzubringen! Es hat sich gezeigt, dass eine stärkere Abdunklung die Aufmerksamkeit nicht auf den Hintergrund zieht, sondern mehr auf das Menü! Aber wie alles, ist es eine Frage des Geschmacks! Funktionen des Scriptes:
Abdunklung des Hintergrundes beim Navi-Mouseover (1.), auch fürs Portal und Mouseover Fußleiste!
Der Header, Registrieren, Login & Logout sind von der Abdunklung nicht betroffen!
Animiertes abdunkeln!
Abdunklung und Ansprechgeschwindigkeit einstellbar!
Abdunklung bei geöffneten Untermenü auch möglich (2.)!
Installation für alle Templates
1.
Das Script wird, um auf "document.ready" zu verzichten, in die "Fußzeile" kopiert!
In Zeile 6 wird unter "opacity" der Grad der Abdunklung eingestellt (0.0 - 0.9)!
Mit "transition" kann die Ansprechzeit für die Abdunklung eingestellt werden!
Neu! Die Abdunklung erfolgt nur beim Öffnen des Untermenüs!
Navigation mit besserer Lesbarkeit für alle Templates
Hallo charlie1965, habe das Skript 1 aus Beitrag # 2 für das neue Xobor (v6) erweitert. Das Skript 2 benötigt kein Update, weil beim Mouseover der Navileiste noch nichts passiert, erst nach einem Klick auf die Kategorie!
Text und Bild auf einem transparenten Hintergrundbild!
Leichter ist es Texte oder auch Bilder auf transparenter Hintergrundfarbe zu platzieren. Meistens findet oft "background-color: rgba(255,255,255,0.6)" Verwendung! Möchte man aber einen Text oder auch andere Bilder und Informationen auf ein transparentes Hintergrundbild bringen, wird es schwieriger! Oft werden hier Vordergrundtexte und Bilder zusammen transparent dargestellt!
Lösung:
Soll nur das Hintergrundbild transparent dargestellt werden, kommen übereinanderliegende Div-Container zum Einsatz! Ein Container enthält das Hintergrundbild, ein anderer die Transparenz und der letztere den Text! Allerdings ist darauf zu achten, dass Text und Bild gut erkennbar sind. Gut gezeigt hat sich ein eingefärbter Hintergrund, wie hier im Beitrag!
Zu Übersicht als HTML-Code:
Über den HTML-Code kann man gut erkennen, wie die Texte auf transparenten Hintergrundbilder erstellt werden!
In Zeile 3 befindet sich das Hintergrundbild.
Zeile 4 sorgt für ein verzerrungsfreies Hintergrundbild.
In Zeile 8 wird über den Wert 0.6 (0.1-1.0) die Transparenz des Hintergrundbildes eingestellt.
Gibt man die Zeilen 9+10 frei hat man die maximale Browser-Kompatibilität, die für sehr alte Browser, wie IE 5-8 oder Netscape gedacht sind!
Zeile 13-15 bestimmt die Formatierungen, Zeile 18 sorgt für verzerrungsfreie Bilder im Text-Container!
In Zeile 26-27 können Texte, auch Bilder Platz finden!
<img title="Ein Bild, dass in einer transparennten Box Platz findet!" src="https://files.homepagemodules.de/b104774/pictures_u459_heUwnVIR.jpg" width="200px"><br> Ein Text, der in einer transparenten Box Platz findet!
Installation für die Iconbar - Für alle Templates & Mobil
Text auf transparenten Hintergrundbildern für die Iconbar:
Mit der Erstellung eines neuen "Forum-Code" können Bilder und Texte über die Iconbar mit transparenten Hintergrund dargestellt werden. Das Hintergrundbild und die Transparenz kann frei gewählt werden!
Für den transparenten Hintergrund wird ein neuer Foren-Code benötigt!
Iconbar unter "Admin > Layout > Iconbar" öffnen
Reiter "Foren-Code" aufrufen
Erweiterte Foren-Code einblenden und die folgenden Daten eingetragen.
Speichern!
Wichtig! Erstellte Foren-Codes in den Ordner "nicht sichtbar" verschieben.
Gerade bei einer Start- oder Präsentationsseite kann man das wie ich finde gut optisch in Szene setzen. Klar, über Geschmack kann man immer streiten...
Völlig unbemerkt von der öffentlichen Wahrnehmung hätte Deutschland die EU-Richtline RL (EU) 2021-3315 (Befahren von Kreisverkehren) bis heute umsetzen müssen. Da Strafgeldzahlungen in Millionenhöhe drohen, müssen nun die zuständigen Behörden und Landratsämter in den nächsten Tagen reagieren und die Zusatzschilder schnellstmöglich an jedem Kreisverkehr anbringen. Die Änderung der STVO wurde mit ganz heißer Nadel kurz vor Toresschluss geändert. Darin sind auch folgende Bußgeldhöhen bei der Zeitüberschreitung festgelegt worden: bis 3,5 to. = 100 € bis 7,5 to. = 200 € + 1 Punkt ab 7,5 to. = 300 € + 2 Punkte
Bitte informiert Eure Mitarbeiter, da das ansonsten teuer wird! Ich würde das rechtssicher mit einer Arbeitsanweisung machen. Unser Uto hilft uns garantiert bei der Erstellung.
Kipper-Spedition
hat folgende Bilder an diesen Beitrag angehängt
Nachtrag zu #9: So, ich musste den halben Tag im Netz suchen. Jetzt hab ich die Neufassung der EU-Richtline RL (EU) 2021-3315 (Befahren von Kreisverkehren) gefunden!