Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!

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! � Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 | Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert! datum

10.09.2023 10:37 (zuletzt bearbeitet: 16.10.2023 17:12)

Daishi

Informationen anzeigen

Beitr�ge:	392
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	334

Hallo Wolfgang, habe nach langen testen und herumprobieren es hinbekommen, dass man die normalen Xobor-Spoiler, auch animieren lassen kann.

Ich habe mich von Wolfgang inspirieren lassen, er ist für mich ein Mentor. Er ist für mich ein sehr starkes Vorbild, er hat viel auf dem Kasten. Ich werde sein Level nie erreichen, aber ich gebe mir viel Mühe, das Ergebnis sieht man ja jetzt, wie es aussieht.

Ich hoffe, dass soweit das Aussehen der neuen Spoiler gut herüberkommt.

Hier mal die Codes vom normalen Xobor Spoiler:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
/* Anfang -  HPM Spoiler Design */
 
.hpm_spoiler {display:inline-block; width:auto; max-width:98%;}
.hpm_spoiler, .hpm_spoiler_headinput {outline:none; color:#000;}
 
.hpm_spoiler_body ul.xul {margin-left:0;}
.hpm_spoiler_body {width:auto; background-color:#fff; color:#000000; border-color:#383838; border-style:double; border-width:0 5px 5px 5px; border-radius:0 0 5px 5px; margin-left:5px;}
 
.hpm_spoiler_headdiv {  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
 box-shadow: 0px 0px 3px 1px #656565;
 background-size: 110% 110%;
 animation: gradient6 10s ease infinite, spin6 10s linear infinite;
 animation-play-state: paused;
}
 
div.hpm_spoiler:hover {
 animation-play-state: running;
}
 
@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}
 
@keyframes spin6 {
 to {
  transform: rotate(-3turn);
 }
} ; border:2px solid #777777; border-radius:5px;}
 
.hpm_spoiler_headdiv input {position:relative; color:#383838; width:98%}
.hpm_spoiler_headdiv:hover { background: repeating-radial-gradient(0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000,#ffff00);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
}}
 
div.hpm_spoiler:hover {
background: repeating-radial-gradient(0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000,#ffff00);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
};}
 
 pre {background-color:#fdfdfd; width:auto; max-width: 65vw; min-width:10vw; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4); display: inline-block; }
 
.codelines {background-color:#aaaaaa; color:#ffffff;}
 
.bbcode_code {ccolor:#eeeeee;}
 
.code {display:inline-block; max-width:auto; width:auto; }
 
 
.code pre {color:#000000; width:inherit; display: block;}
 
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto; width:auto; max-width:100vw; margin-right: 15px;}
 
.hpm_spoiler  pre {max-width: 50vw; min-width:15vw;}
 
 
 
 
/* Ende -  HPM Spoiler Design */
 

Schließen

Und hier der Code für Xobor-Spoiler mit Grafik:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
 
/* Anfang -  Xobor-Spoiler mit Grafik */
 
/* Xobor-Spoiler mit Grafik */
.hpm_spoiler4 .spoiler_bild  {
object-fit: cover; 
position:absolute; 
margin:-27px 0 0 22px; 
padding:2px 2px 4px 2px; 
max-width:40px; 
height:40px; 
border:1px solid rgba(103,199,234,1) 0%; 
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  animation: gradient3 5s ease infinite;
}
 
@keyframes gradient3 {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
};}
border-radius:5px 5px 0 0;
}
.hpm_spoiler4 .spoiler_bild_in {
display:block;
object-fit: cover; 
max-width:100px; 
max-height:10px; 
margin:0 10px 10px 0;
}
.hpm_spoiler4 .hpm_spoiler_headinput {
padding-left: 70px;
}
.hpm_spoiler4 .hpm_spoiler_headdiv {
margin-top: 40px;
}
 
 
 
 
/* Ende -  Xobor-Spoiler mit Grafik */
 
 

Schließen

Es war nur eine Inspiration und Idee, wie man noch den Xobor-Spoiler aussehen lassen kann und verändern kann.

Wollte hier nur meine Idee preisgeben, damit die Xobor-Spoiler nicht so langweilig und eintönig sind. Das ist nicht böse gemeint mit langweilig und eintönig. Wollte nur die Spoiler etwas aufpeppen und moderner wirken lassen.

Wer dazu noch Ideen hat und Inspirationen, darf gerne hierzu seine Meinung geben.

Nette Grüße

Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#2 | RE: Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert! datum

16.10.2023 13:30 (zuletzt bearbeitet: 16.10.2023 17:26)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1642

Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!

Hallo Daishi.

Da haben sich Fehler eingeschlichen!
Die Animation kann nicht starten!

HPM-Spoiler ohne Spoiler-Grafik

Was habe ich in Beitrag #1 geändert:

Die CSS geordnet und untereinandergeschrieben
Animation mit "spin" aus Zeile 14 herausgenommen (Rotation der gesamten Titelzeile) und Zeile 33-37 gelöscht.
In Zeile 42+49 fehlt die 6 beim Animationsname.
Zeile 40-51 zusammengefasst und Background-Farbe entfernt (keine Wirkung).
Formatierungen für die Schließ-Leiste sind hinzugekommen!

Was macht die Animation:

Die Titel- und Schließleiste haben einen Farbverlauf
Bei einem Mouseover der Titelleiste, Schließleiste oder Spoiler-Body, verändert sich der Farbverlauf kontinuierlich!
Beim Mouseout die letzte Farbe vom Farbverlauf stehen. Man kann erkennen, dass der Spoiler geöffnet worden ist!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
/* Anfang -  HPM Spoiler Design */
 
.hpm_spoiler {
  display:inline-block; 
  width:auto; 
  max-width:98%;
}
.hpm_spoiler, .hpm_spoiler_headinput {
  border-radius:5px;
  outline:none; 
  color:#000;
}
.hpm_spoiler_body ul.xul {
  margin-left:0;
}
.hpm_spoiler_body {
  width:auto; 
  background-color:#fff; 
  color:#000000; 
  border-color:#383838; 
  border-style:double; 
  border-width:0 5px 5px 5px; 
  border-radius:0 0 5px 5px; 
  margin-left:5px;
}
.hpm_spoiler_headdiv, .hpm_spoiler_closebutton {
  background: 
 linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-size: 110% 110%;
  box-shadow: 0px 0px 3px 1px #656565;
  animation: gradient6 10s ease infinite;
  animation-play-state: paused;
}
.hpm_spoiler:hover {
 animation-play-state: running;
}
.hpm_spoiler_headdiv input {
  position:relative; 
  color:#383838; 
  width:98%
}
.hpm_spoiler_headdiv:hover, .hpm_spoiler:hover, .hpm_spoiler_closebutton:hover {
  background-size: 400% 400%;
  animation: gradient6 10s ease infinite;
}
 
.hpm_spoiler_closebutton {
  font-style:italic; 
  border-top:1px solid #383838; 
  padding:2px 10px;
  cursor:pointer;
}
.hpm_spoiler_closebutton a {
  color:#000000 !important; 
}
.hpm_spoiler_closebutton a:-webkit-any-link:hover {
  display:block; 
  width:100%; 
  text-decoration:none !important; 
  color:#000000 !important;
}
 
@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}
 
 pre {background-color:#fdfdfd; width:auto; max-width: 65vw; min-width:10vw; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4); display: inline-block; }
 
.codelines {background-color:#aaaaaa; color:#ffffff;}
 
.code {display:inline-block; max-width:auto; width:auto; }
 
 
.code pre {color:#000000; width:inherit; display: block;}
 
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto; width:auto; max-width:100vw; margin-right: 15px;}
 
.hpm_spoiler  pre {max-width: 50vw; min-width:15vw;}
 
/* Ende -  HPM Spoiler Design */
 

Schließen

HPM-Spoiler mit Spoiler-Grafik
Aus "Xobor-Spoiler mit Grafik in der Titelleiste" - Beitrag #1

Was habe ich in Beitrag #1 geändert:

Die CSS geordnet und untereinandergeschrieben
"max-height" in Zeile 30 hatte einen falschen Wert, auf 100px erhöht

Was macht die Animation:

Titel- und Schließleiste haben einen Farbverlauf.
Die kleine Spoiler-Grafik hat einen rotierenden Farbverlauf!
Bei einem Mouseover der Titelleiste oder Spoiler-Body, verändert sich der Farbverlauf der Spoiler-Grafik, der Titel- und Schließleiste kontinuierlich!
Beim Mouseout die letzte Farbe vom Farbverlauf stehen. Man kann erkennen, dass der Spoiler geöffnet worden ist!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
/* Anfang -  HPM Spoiler Design */
 
.hpm_spoiler {
  display:inline-block; 
  width:auto; 
  max-width:98%;
}
.hpm_spoiler, .hpm_spoiler_headinput {
  border-radius:5px;
  outline:none; 
  color:#000;
}
.hpm_spoiler_body ul.xul {
  margin-left:0;
}
.hpm_spoiler_body {
  width:auto; 
  background-color:#fff; 
  color:#000000; 
  border-color:#383838; 
  border-style:double; 
  border-width:0 5px 5px 5px; 
  border-radius:0 0 5px 5px; 
  margin-left:5px;
}
.hpm_spoiler_headdiv, .hpm_spoiler_closebutton {
  background: 
 linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-size: 110% 110%;
  box-shadow: 0px 0px 3px 1px #656565;
  animation: gradient6 10s ease infinite;
  animation-play-state: paused;
}
.hpm_spoiler:hover {
 animation-play-state: running;
}
.hpm_spoiler_headdiv input {
  position:relative; 
  color:#383838; 
  width:98%
}
.hpm_spoiler_headdiv:hover, .hpm_spoiler:hover, .hpm_spoiler_closebutton:hover {
  background-size: 400% 400%;
  animation: gradient6 10s ease infinite;
}
 
.hpm_spoiler_closebutton {
  font-style:italic; 
  border-top:1px solid #383838; 
  padding:2px 10px;
  cursor:pointer;
}
.hpm_spoiler_closebutton a {
  color:#000000 !important; 
}
.hpm_spoiler_closebutton a:-webkit-any-link:hover {
  display:block; 
  width:100%; 
  text-decoration:none !important; 
  color:#000000 !important;
}
 
@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}
 
 pre {background-color:#fdfdfd; width:auto; max-width: 65vw; min-width:10vw; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4); display: inline-block; }
 
.codelines {background-color:#aaaaaa; color:#ffffff;}
 
.code {display:inline-block; max-width:auto; width:auto; }
 
 
.code pre {color:#000000; width:inherit; display: block;}
 
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto; width:auto; max-width:100vw; margin-right: 15px;}
 
.hpm_spoiler  pre {max-width: 50vw; min-width:15vw;}
 
 
/* Anfang -  Xobor-Spoiler zusätzlich mit Grafik */
 
.hpm_spoiler4 .spoiler_bild  {
  object-fit: cover; 
  position:absolute; 
  margin:-27px 0 0 22px; 
  padding:2px 2px 4px 2px; 
  max-width:40px; 
  height:40px; 
  border:1px solid rgba(103,199,234,1) 0%; 
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  animation: gradient3 5s ease infinite;
}
.hpm_spoiler4 .spoiler_bild_in {
  display:block;
  object-fit: cover; 
  max-width:100px; 
  max-height:100px; 
  margin:0 10px 10px 0;
}
.hpm_spoiler4 .hpm_spoiler_headinput {
  padding-left: 70px;
}
.hpm_spoiler4 .hpm_spoiler_headdiv {
  margin-top: 40px;
}
 
@keyframes gradient3 {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
 
/* Ende -  Xobor-Spoiler mit Grafik */
 

Schließen

HPM-Spoiler mit dezenten Grau-Tönen, auch mit kleiner Spoiler-Grafik:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
/* Anfang -  HPM Spoiler Design */
 
.hpm_spoiler {
  display:inline-block; 
  width:auto; 
  max-width:98%;
}
.hpm_spoiler, .hpm_spoiler_headinput {
  border-radius:5px;
  outline:none; 
  color:#000;
}
.hpm_spoiler_body ul.xul {
  margin-left:0;
}
.hpm_spoiler_body {
  width:auto; 
  background-color:#fff; 
  color:#000000; 
  border-color:#383838; 
  border-style:double; 
  border-width:0 5px 5px 5px; 
  border-radius:0 0 5px 5px; 
  margin-left:5px;
}
.hpm_spoiler_headdiv, .hpm_spoiler_closebutton {
  background: 
  linear-gradient(217deg, rgba(255,255,255,.8), rgba(255,255,255,0) 70.71%),
  linear-gradient(127deg, rgba(100,100,100,.8), rgba(120,120,120,0) 70.71%),
  linear-gradient(36deg, rgba(250,250,250,.8), rgba(250,250,250,0) 70.71%);
  background-size: 110% 110%;
  box-shadow: 0px 0px 3px 1px #656565;
}
.hpm_spoiler_headdiv input {
  position:relative; 
  color:#383838; 
  width:98%
}
.hpm_spoiler_headdiv:hover, .hpm_spoiler:hover, .hpm_spoiler_closebutton:hover {
  background-size: 400% 400%;
  animation: gradient6 10s ease infinite;
}
 
.hpm_spoiler_closebutton {
  font-style:italic; 
  border-top:1px solid #383838; 
  padding:2px 10px;
  cursor:pointer;
}
.hpm_spoiler_closebutton a {
  color:#000000 !important; 
}
.hpm_spoiler_closebutton a:-webkit-any-link:hover {
  display:block; 
  width:100%; 
  text-decoration:none !important; 
  color:#000000 !important;
}
 
@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}
 
 pre {background-color:#fdfdfd; width:auto; max-width: 65vw; min-width:10vw; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4); display: inline-block; }
 
.codelines {background-color:#aaaaaa; color:#ffffff;}
 
.code {display:inline-block; max-width:auto; width:auto; }
 
 
.code pre {color:#000000; width:inherit; display: block;}
 
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto; width:auto; max-width:100vw; margin-right: 15px;}
 
.hpm_spoiler  pre {max-width: 50vw; min-width:15vw;}
 
 
/* Anfang -  Xobor-Spoiler zusätzlich mit Grafik */
 
.hpm_spoiler4 .spoiler_bild  {
  object-fit: cover; 
  position:absolute; 
  margin:-27px 0 0 22px; 
  padding:2px 2px 4px 2px; 
  max-width:40px; 
  height:40px; 
  border:1px solid #aaaaaa;
  border-radius: 3px 3px 0 0;
  background: conic-gradient(#ffffff, #aaaaaa, #777777, #000000, #777777, #aaaaaa, #ffffff);
}
.hpm_spoiler4 .spoiler_bild_in {
  display:block;
  object-fit: cover; 
  max-width:100px; 
  max-height:100px; 
  margin:0 10px 10px 0;
}
.hpm_spoiler4 .hpm_spoiler_headinput {
  padding-left: 70px;
}
.hpm_spoiler4 .hpm_spoiler_headdiv {
  margin-top: 40px;
}
 
/* Ende -  Xobor-Spoiler mit Grafik */
 

Schließen

Bis dann und nochmal besten Dank Daishi für Deine Arbeit und Deine super Idee!

VG
Wolfgang

Kipper-Spedition, Nara und Daishi finden das Top!

Antworten

#3 | RE: Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert! datum

17.10.2023 22:58

Wieder einmal eine Klasseidee mit einer super Umsetzung!
Sagt mal, wo kann ich denn die Farbe im Farbverlauf des Spoilers ändern (von grau/weiß auf #658ba8 --> #ffffff) ? Ich hab da ergebnislos versucht was zu ändern...

Vorab schonmal ein großes

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

Antworten

#4 | RE: Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert! datum

18.10.2023 18:48 (zuletzt bearbeitet: 24.04.2024 07:34)

Daishi

Informationen anzeigen

Beitr�ge:	392
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	334

Hallo Kipper-Spedition, ich hoffe, du meinst es so

einfach den Code so einfügen, wo /* Anfang - hpm_spoiler Design */ bis /* Ende - hpm_spoiler Design */

Für deine Wunschfarbe #658ba8 habe ich in rgba(101, 139, 168) umgewandelt und #ffffff in rgba(255, 255, 255)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
/* Anfang -  hpm_spoiler Design */
 
.hpm_spoiler {
  display:inline-block; 
  width:auto; 
  max-width:98%;
}
.hpm_spoiler, .hpm_spoiler_headinput {
  border-radius:5px;
  outline:none; 
  color:#000;
}
.hpm_spoiler_body ul.xul {
  margin-left:0;
}
.hpm_spoiler_body {
  width:auto; 
  background-color:#fff; 
  color:#000000; 
  border-color:#383838; 
  border-style:double; 
  border-width:0 5px 5px 5px; 
  border-radius:0 0 5px 5px; 
  margin-left:5px;
}
.hpm_spoiler_headdiv, .hpm_spoiler_closebutton {
  background: 
  linear-gradient(217deg, rgba(101, 139, 168), rgba(255, 255, 255) 70.71%),
  linear-gradient(127deg, rgba(101, 139, 168), rgba(255, 255, 255) 70.71%),
  linear-gradient(36deg, rgba(101, 139, 168), rgba(255, 255, 255) 70.71%);
  background-size: 110% 110%;
  box-shadow: 0px 0px 3px 1px #656565;
}
.hpm_spoiler_headdiv input {
  position:relative; 
  color:#383838; 
  width:98%
}
.hpm_spoiler_headdiv:hover, .hpm_spoiler:hover, .hpm_spoiler_closebutton:hover {
  background-size: 400% 400%;
  animation: gradient6 10s ease infinite;
}
 
.hpm_spoiler_closebutton {
  font-style:italic; 
  border-top:1px solid #383838; 
  padding:2px 10px;
  cursor:pointer;
}
.hpm_spoiler_closebutton a {
  color:#000000 !important; 
}
.hpm_spoiler_closebutton a:-webkit-any-link:hover {
  display:block; 
  width:100%; 
  text-decoration:none !important; 
  color:#000000 !important;
}
 
@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}
 
 pre {background-color:#fdfdfd; width:auto; max-width: 65vw; min-width:10vw; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4); display: inline-block; }
 
.codelines {background-color:#aaaaaa; color:#ffffff;}
 
.code {display:inline-block; max-width:auto; width:auto; }
 
 
.code pre {color:#000000; width:inherit; display: block;}
 
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto; width:auto; max-width:100vw; margin-right: 15px;}
 
.hpm_spoiler  pre {max-width: 50vw; min-width:15vw;}
 
 
/* Ende -  hpm_spoiler Design */
 

Schließen

Um es besser zu erklären, die Farben sind hier nicht in HEX angegeben #658ba8, #ffffff, sondern in rgba(101, 139, 168), rgba(255, 255, 255)

Wenn man die Farbe wechseln möchte, kann diese in Zeile 28 bis 30 ändern, muss aber in rgba umgewandelt werden, die Wunschfarbe.

Und hier der Code für Xobor-Spoiler mit Grafik:

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
 
/* Anfang -  Xobor-Spoiler mit Grafik */
 
.hpm_spoiler4 .spoiler_bild  {
  object-fit: cover; 
  position:absolute; 
  margin:-27px 0 0 22px; 
  padding:2px 2px 4px 2px; 
  max-width:40px; 
  height:40px; 
  border:1px solid #aaaaaa;
  border-radius: 3px 3px 0 0;
  background: conic-gradient(#658ba8,#ffffff, #658ba8, #ffffff, #658ba8);
}
.hpm_spoiler4 .spoiler_bild_in {
  display:block;
  object-fit: cover; 
  max-width:100px; 
  max-height:100px; 
  margin:0 10px 10px 0;
}
.hpm_spoiler4 .hpm_spoiler_headinput {
  padding-left: 70px;
}
.hpm_spoiler4 .hpm_spoiler_headdiv {
  margin-top: 40px;
}
 
 
 
 
/* Ende -  Xobor-Spoiler mit Grafik */
 

Schließen

die Farben sind hier in HEX angegeben (#658ba8,#ffffff, #658ba8, #ffffff, #658ba8)

Ich hoffe das du es so meintest

Nette Grüße

Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#5 | RE: Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert! datum

18.10.2023 21:09

@Daishi

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

Daishi findet das Top!

Antworten

Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"! � � Sichtbarkeit von internen Themenüberschriften

�hnliche Themen

Antworten

Letzter Beitrag

Animierte Grüße unter der Navigation - Animiertes Plakat
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

26.06.2025 05:25
von

Wolfgang • Zugriffe: 507

Mehr Spoiler anlegen, mit verschiedener Optik
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von bienchen 2 26.04.2024 20:35
bienchen • Zugriffe: 307
Schließen Spoiler
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Anne 9 06.03.2024 19:42
Wolfgang • Zugriffe: 520

News-Laufschrift in der Kopf- & Fußzeile
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

10.03.2024 13:02
von

Kipper-Spedition • Zugriffe: 1036

Xobor-Spoiler mit Grafik in der Titelleiste
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 04.07.2022 22:30
Daishi • Zugriffe: 793
Xobor-Spoiler mit Hinweis
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 0 01.01.2021 19:49
Wolfgang • Zugriffe: 1471
Spoiler-Veschachtelung mit Code und Pre
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 30.10.2017 20:16
Wolfgang • Zugriffe: 4115

Xobor Adventskalender & Osterkalender mit Auslösegrafik für alle Templates
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

28.10.2025 11:05
von

Kipper-Spedition • Zugriffe: 10779

Xobor-Spoiler mit neuen Formatierungen ausstatten
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

24.11.2019 09:29
von

Wolfgang • Zugriffe: 4025

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!

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: 45 €

93%