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 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 | 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:	275
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	235

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.

Um es besser darzustellen hatte ich das Video gemacht, mit Bildern bekam ich es nicht so sauber hin. Deswegen das Video, möchte mich entschuldigen das mein Mikro nicht richtig geht, deswegen die Musik.

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:	3201
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

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 Schieß-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: 18.10.2023 19:53)

Daishi

Informationen anzeigen

Beitr�ge:	275
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	235

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)

Bild sieht jetzt so aus, ich hoffe, du hast es so gemeint.

Bild:

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.

Hier Bild für Xobor-Spoiler mit Grafik:

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

PN-Hinweis vom Admin � � Kalender fürs Profil, fürs Poral und in den Beiträgen

�hnliche Themen

Antworten

Letzter Beitrag

Animierter Benutzer / Avatar mit Link zum Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 18 24.07.2023 00:08
Anne • Zugriffe: 1066
Spoiler Alarm
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 2 09.02.2023 12:34
Wolfgang • Zugriffe: 348
News-Laufschrift in der Kopf- & Fußzeile
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 2 14.07.2022 00:19
Wolfgang • Zugriffe: 415
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: 436

Neue Themen und neue Beiträge im Xobor (v6) auffälliger markieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

23.09.2022 14:53
von

Daishi • Zugriffe: 339

Xobor-Spoiler mit Hinweis
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 0 01.01.2021 19:49
Wolfgang • Zugriffe: 895
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: 3618

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

12.11.2023 10:03
von

Kipper-Spedition • Zugriffe: 7438

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: 2948

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 €

103%