Transparenz-Effekte

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Transparenz-Effekte

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Transparenz-Effekte datum

28.08.2012 21:55 (zuletzt bearbeitet: 16.03.2023 14:44)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3132
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	� Forum Spende
Likes	1018

Transparente-Effekte
Aktualisiert 16.03.23

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>
 
Bild: 
<span class="trans"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-1tys-5q.gif"></span>
 
Tabelle: 
<table  class="trans" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td> ....... </td></tr></table>
 

Schlie�en

• 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>
 
Bild: 
<span class="transm"><img src="https://files.homepagemodules.de/b104774/bhnetfiles-1tys-5q.gif"></span>
 
Tabelle: 
<table  class="transm" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td> .......<td><tr></table>
 

Schlie�en

• 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.

Ersetze:

1
2
3
 
 [transm]  
...  
[/transm]
 

Mit:

1
2
3
 
<span class="transm">  
...  
</span>
 

Grafik:

1
 
https://files.homepagemodules.de/b2001010/a_799_50667aa9.png

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schlie�en

Weitere interessante Links zur Iconbar:

  • Meine komplette Forum-Iconbar zum herunterladen
  • Beiträge nur für Mitglieder in der neuen Iconbar
  • Versteckte Kommentare in Forum-Beiträgen nutzen!
  • Smileys in der Schnellantwort
  • Glow - Leuchtender Text mit CSS3 "text-shadow"
  • Kleine Bildergalerie in der Iconbar
  • Kopiersperre / Markierungssperre / Eigenes Kontextmenü
  • Iconbar fixieren - gut für lange Beiträge
  • Suche "Iconbar"
  • Große Farbauswahl - Super Color-Picker

Bis dann und gutes Gelingen

Wolfgang

Antworten

#2 | Navigation mit besserer Lesbarkeit datum

14.03.2019 18:45 (zuletzt bearbeitet: 16.03.2023 21:09)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3132
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	� Forum Spende
Likes	1018

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

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!

1
2
3
4
5
6
7
8
9
10
11
12
 
<script>
//// Transparenz Navi - Bei geöffneten Submenü ////
window.addEventListener('load', function(){
 
$('.navigation ul, #global-news-li, .nav-item .dropdown-menu').hover(function(){
$('.main, .leftcol, .rightcol, .footer').css({'opacity':'0.3','transition':'0.8s','-webkit-transition':'0.8s'});
},function(){
$('.main, .leftcol, .rightcol, .footer').css({'opacity':'1.0','transition':'0.3s','-webkit-transition':'0.3s'});
});
 
});
</script>
 

Schlie�en

Das Script wird, um auf "document.ready" zu verzichten, in die "Fußzeile" kopiert!
In Zeile 5 wird unter "opacity" der Grad der Abdunklung eingestellt (0.0 - 0.9)!
Mit "transition" kann die Ansprechzeit für die Abdunklung eingestellt werden!
Registrieren, Login & Logout sind von der Abdunklung ausgeschlossen!
Sollen weitere Menüthemen ausgeschlossen werden, müssen sie jeweils mit "&&" in Zeile 4 hinzugefügt werden!
Im Templates (v6) ist da Skript nicht sinnvoll, weil hier die Untermenüs mit Mausklick geöffnet werden!
Bitte das 2. Skript nutzen!

1
2
3
4
5
6
7
8
9
10
 
<script>
//// Transparenz Navi ////
$('.navigation li, #global-news-li').hover(function(){
if(($(this).attr("id") != "link_login")&&($(this).attr("id") != "link_register")&&($(this).attr("id") != "user_page03708292295062494")){
$('.main,.container.portall,.leftcol,.rightcol,.footer').css({'opacity':'0.2','transition':'0.8s','-webkit-transition':'0.8s'});
};
},function(){
$('.main,.container.portall,.leftcol,.rightcol,.footer').css({'opacity':'1.0','transition':'0.3s','-webkit-transition':'0.3s'});
});
</script>
 

Schlie�en

Wolfgang

Daishi und Kipper-Spedition finden das Top!

Antworten

#3 | RE: Navigation mit besserer Lesbarkeit datum

06.10.2022 23:16

Und gibt es das auch für das V6?

Antworten

#4 | RE: Navigation mit besserer Lesbarkeit für alle Templates datum

08.10.2022 08:20

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!

Bis dann und gutes Gelingen

Wolfgang

charlie1965 findet das Top!

Antworten

#5 | Text auf transparenten Hintergrundbildern! datum

16.03.2023 14:27

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3132
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	� Forum Spende
Likes	1018

Text auf transparenten Hintergrundbildern!

@Kipper-Spedition

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<style>
.background {
  background: url("https://files.homepagemodules.de/b104774/pictures_u459_heUwnVIR.jpg") no-repeat center top;
  background-size: cover;
}
.box-background { 
  padding: 20px;
  background-color: rgba(255,255,255,0.6);
  /* background-color: #ffffff; */
  /* opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; */
}
.box-background .text-background {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.box-background .text-background img {
  object-fit: cover;
}
</style>
 
<div class="background">
  <div class="box-background">
    <div class="text-background">
	  
      <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!
		
    </div>
  </div>
</div>
 

Schlie�en

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.

Ersetze:

1
2
3
 
[backgroundTrans={{image}}={{size}}]
...  
[/backgroundTrans]
 

Mit:

1
2
3
 
<div style="background: url('{{image}}') no-repeat center top; background-size: cover;"><div style="background-color: rgba(255,255,255,{{size}}); padding:10px;">  
...  
</div></div>
 

Grafik:

1
 
https://files.homepagemodules.de/b2001010/a_799_50667aa9.png

Weitere Einstellungen:

1
 
Reihenfolge: 0

Button in der Iconbar anlegen!

Iconbar aufrufen!
Button unter "HTML" anlegen.
Namen vergeben z.B. "Hintergrund transparent".
Unter "HTML:" den folgenden Code eintragen.
Speichern nicht vergessen!
Button erscheint am Ende der Iconbar. Button im Menü links an die richtige Stelle schieben!

1
 
<div onclick="xob_insert('[backgroundTrans=https://www.bildadresse.de=0.6]\n\n','[/backgroundTrans]')" class="xob_icon_cont"><img alt="Tranparenter Hintergrund" title="Transparenter Hintergrund" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Der neuen Forum-Codes sieht im Beitrag wie folgt aus!

[backgroundTrans=https://www.bildadresse.de=0.6]

[/backgroundTrans]

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann und besten Dank an Kipper-Spedition für die Inspiration!
Wolfgang

Kipper-Spedition und 844er finden das Top!

Antworten

#6 | RE: Text auf transparenten Hintergrundbildern! datum

16.03.2023 16:13

Wolfgang, ich hab zu danken!
Ich stell mal am WE meine Seite hier ein.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#7 | RE: Text auf transparenten Hintergrundbildern! datum

16.03.2023 18:50 (zuletzt bearbeitet: 16.03.2023 19:38)

Wenn es einem in den Fingern juckt, hab ich gleichmal gebastelt...

--> das Ergebnis: Wer-und-wann-darf-eine-s-g-Blitzer-App-benutzen <--

Wolfgang, das hast du wunderbar umgesetzt. Und wichtig: auch für einen Laien wie mich einfach und verständlich machbar! und

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#8 | RE: Text auf transparenten Hintergrundbildern! datum

17.03.2023 16:03

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...

von heute: BGL-Gruene-blockieren-bessere-Arbeitsbedingungen-fuer-Brummifahrer

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#9 | RE: Text auf transparenten Hintergrundbildern! datum

01.04.2023 10:03 (zuletzt bearbeitet: 01.04.2023 18:02)

Deutschland muss EU-Richtlinie umsetzen!

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

EU-�nderung.jpg

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Hans58 und Wolfgang finden das Top!

Antworten

#10 | RE: Text auf transparenten Hintergrundbildern! datum

01.04.2023 18:04

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!

--> Neufassung der EU-Richtline RL (EU) 2021-3315 (Befahren von Kreisverkehren) <--

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

Projekt: Maskottchen James, Hermine & Familie - Die Forum Roboter � � Präsentationskalender - Darstellung interessanter Themen

�hnliche Themen

Antworten

Letzter Beitrag

Hover-Effekt für einen Forum-Code der Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anke 8 11.09.2023 21:53
Anke • Zugriffe: 233
Hover-Effekt für Anworten im v6 Template deaktivieren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von 844er 2 21.08.2023 11:13
844er • Zugriffe: 85
Hover-Effekt beim Überfahren mit der Maus
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 6 06.03.2022 07:07
Wolfgang • Zugriffe: 494
Zu Silvester: Feuerwerk-Effekte für die Homepage mit Sound
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 10 29.12.2022 21:54
Wolfgang • Zugriffe: 9974

Hover-Effekt in der Foren Übersicht und Foren Ansicht
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von DJ-Frechdax

01.08.2015 20:52
von

DJ-Frechdax • Zugriffe: 882

Text-Effekte / Teil 1-4
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Jürgen 12 07.12.2021 22:04
Wolfgang • Zugriffe: 3843

RE: Einlaufender Text - Effekte fürs Forum oder die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

20.01.2021 21:45
von

Wolfgang • Zugriffe: 1534

Texte, Sätze und Bilder mit einem Klick aus- und einblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

26.05.2018 00:56
von

Wolfgang • Zugriffe: 1965

Scripte und Effekte fürs Forum und die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

07.07.2019 12:33
von

Wolfgang • Zugriffe: 13039

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

123%