Magisch farbige Spirale

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 - Fragen & Antworten! � Magisch farbige Spirale

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 | Magisch farbige Spirale datum

26.05.2022 17:01

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Hier habe ich mal eine Magisch farbige Spirale in CodePen gebastelt, ist auch eine kleine Spielerei.

CSS - Magisch farbige Spirale

CSS Code

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
 

*,
*::before,
*::after {
  transform-style: preserve-3d;
  box-sizing: border-box;
}
 
body {
  min-height: 100vh;
  perspective: 1300px;
  perspective-origin: center calc(50% - 12vmin);
  overflow: hidden;
  background: white;
}
 
#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  margin-top: 6vmin;
  padding: 0;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
  animation: rotateUs 50000ms linear infinite;
  transform: scale3d(1.6, 1.3, 1.3);
}
 
.spiral {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  transform-style: preserve-3d;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: transparent;
  border: 0.5vmin solid red;
}
.spiral:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
 
.spiral:first-child {
  transform: translateZ(-0.1vmin) rotatez(0deg);
}
 
.spiral:nth-of-type(2) {
  transform: translateZ(-0.2vmin) rotatez(1deg);
}
.spiral:nth-of-type(3) {
  transform: translateZ(-0.3vmin) rotatez(2deg);
}
.spiral:nth-of-type(4) {
  transform: translateZ(-0.4vmin) rotatez(3deg);
}
.spiral:nth-of-type(5) {
  transform: translateZ(-0.5vmin) rotatez(4deg);
}
.spiral:nth-of-type(6) {
  transform: translateZ(-0.6vmin) rotatez(5deg);
}
.spiral:nth-of-type(7) {
  transform: translateZ(-0.7vmin) rotatez(6deg);
}
.spiral:nth-of-type(8) {
  transform: translateZ(-0.8vmin) rotatez(7deg);
}
.spiral:nth-of-type(9) {
  transform: translateZ(-0.9vmin) rotatez(8deg);
}
.spiral:nth-of-type(10) {
  transform: translateZ(-1vmin) rotatez(7deg);
}
.spiral:nth-of-type(11) {
  transform: translateZ(-1.1vmin) rotatez(6deg);
}
.spiral:nth-of-type(12) {
  transform: translateZ(-1.2vmin) rotatez(5deg);
}
.spiral:nth-of-type(13) {
  transform: translateZ(-1.3vmin) rotatez(4deg);
}
.spiral:nth-of-type(14) {
  transform: translateZ(-1.4vmin) rotatez(3deg);
}
.spiral:nth-of-type(15) {
  transform: translateZ(-1.5vmin) rotatez(2deg);
}
.spiral:nth-of-type(16) {
  transform: translateZ(-1.6vmin) rotatez(1deg);
}
.spiral:nth-of-type(17) {
  transform: translateZ(-1.7vmin) rotatez(1deg);
}
.spiral:nth-of-type(18) {
  transform: translateZ(-1.8vmin) rotatez(1deg);
}
.spiral:nth-of-type(19) {
  transform: translateZ(-1.9vmin) rotatez(1deg);
}
.spiral:nth-of-type(20) {
  transform: translateZ(-2vmin) rotatez(1deg);
}
 
@keyframes rotateUs {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
 
 

Schließen

HTML - Magisch farbige Spirale

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#canvas
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral 
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
  .spiral
 
 

Schließen

JavaScript - Magisch farbige Spirale

JavaScript[img=80px]//files.homepagemodules.de/b104774/a_449_3a658234.jpg[/img]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
/* 
Just playing around
 

Here's a little loop to start you off!
*/
 
gsap
  .to(".spiral", {
    xPercent: -60,
    borderColor: "hsla(+=200, +=0%, +=0%)",
    ease: "sine.inOut",
    duration: 1,
    stagger: {
      amount: 1,
      repeat: -1,
      yoyo: true
    }
  })
  .progress(0.7);
 
 

Schließen

Daishi

Antworten

#2 | RE: Magisch farbige Spirale datum

27.05.2022 16:42

Wolfgang

Administrator

Informationen anzeigen

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

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

Die "Magische farbige Spirale"

Hallo Daishi,
wie sieht die Spirale farblich bei Dir aus?
Wechselt sie die Farbe, oder bleibt eine feste Farbe?
In Deinem HTML-Skript scheint noch ein Fehler zu sein!
Da fehlen DIV's oder SPAN's, bitte überprüfen!
Habe mal DIV's eingebaut.

So sieht es bei mir nach Einfügen der DIV's aus!
Bei mir zeigt sich nach Einbau der DIV's ein langsam rotierendes, kreisrundes, rotes Gebilde, das seine Randstärke je nach Position im gesamte Umfang unterschiedlich verändert!

Die "Magische farbige Spirale" - HTML: Div-Container eingefügt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div id="canvas">
 
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
    
</div>
 

Wolfgang

Antworten

#3 | RE: Magisch farbige Spirale datum

27.05.2022 18:42 (zuletzt bearbeitet: 01.02.2023 19:59)

Daishi

Informationen anzeigen

Beitr�ge:	450
Registriert seit:	08.01.2022

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

Sie ist bunt, dazu braucht man das JavaScript. Sie läuft dann in alle Richtungen. Ich versuche das JavaScript in das Modul hier im Forum einzubauen. Auf der Homepage geht es tadellos. Ich bin ja an vielem am testen. Ich habe ja eine eigene PHP-Forensoftware, da bastele ich mit rum und funtzt soweit. Muss bei manchen Sachen auch noch rumbasteln. Manche CSS-Codes gehen in PHP nicht, aber wenn man sie einzeln bearbeitet gehen die wie gesagt. Ich teste ja selbst noch rum. Das Forum ist nicht öffentlich einsehbar. Habe mein alten PC zum Server umgebaut, da teste ich alles und erstellen tue ich das alles mit = [codepen]. Es ist ein Programm um das hier alles zu erstellen HTML CSS und CSS3 und JavaScript.

Den Code für JavaScript braucht man, damit die magische Spirale funktioniert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/* 
Just playing around
 
 
Here's a little loop to start you off!
*/
 
gsap
  .to(".spiral", {
    xPercent: -60,
    borderColor: "hsla(+=200, +=0%, +=0%)",
    ease: "sine.inOut",
    duration: 1,
    stagger: {
      amount: 1,
      repeat: -1,
      yoyo: true
    }
  })
  .progress(0.7);
 
 
 

Schließen

Genau wie hier die Textreflexion die geht auch nur wenn man die Namen im Javascript ändert. Ich füge noch das Bild ein, wie es aussieht.

Hier der CSS Code für Textreflexion

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
 
:root{
  --fontFamily: monospace;
  --fontSize: 4em;
  --fontWeight: bold;
}
body{
  background: #ffffff;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.reflection{
  color: #0007;
  height: 1em;
  
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  font-weight: var(--fontWeight);
  transform: rotateX(180deg) skewX(45deg) translateY(.48em) translateX(-.73em) scaleY(.6);
  background: #1624;
}
input {
  background: none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: none;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  font-weight: var(--fontWeight);
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
input:focus {
  outline: none;
}
#input-box{
}
 

Schließen

Hier der HTML Code für die Textreflexion

1
2
3
 
<body>
  <div  id="input-box" ></div>
</body>
 

[/spoiler2]

Hier der JavaScript Code für die Textreflexion:
[spoiler2=Der JavaScript Code für die Textreflexion]

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
 
class App extends React.Component{
 
  constructor(props) {
 
    super(props);
 
    this.state = {
 
      input: 'Hallo Wolfgang'
 
    };
 
    this.handleChange = this.handleChange.bind(this);
 
  }
 
  handleChange (event) {
 
    this.setState({
      input: event.target.value.toUpperCase()
    })
    
 
  }
 

  render() {
 
    return (
 
      <div>
 

        <input value={this.state.input} onChange={this.handleChange} />
 

        <pre className="reflection">{this.state.input}</pre>
 
      </div>
 
    );
 
  }
};
ReactDOM.render(<App />, document.getElementById("input-box"));
 

Schließen

Daishi

Antworten

#4 | Fehlersuche: Magisch sich drehende farbige Spirale datum

29.05.2022 09:44 (zuletzt bearbeitet: 01.02.2023 20:09)

Wolfgang

Administrator

Informationen anzeigen

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

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

Fehlersuche: Magisch sich drehende farbige Spirale

Hallo Daishi,
habe die farbige Spirale jetzt nachbauen können, die Textreflektion allerdings nicht!

Auf der Seite von CODEPEN kann man sich den Quellcode mit "Rechte Maustaste" und "Untersuchen" besser angesehen!
Hier sind noch mehrere JavaScript-Dateien eingebaut!
Will man außerhalb von CODEPEN die Spirale zum Laufen bringen, benötigt man noch mindestens ein JavaScript.

1
 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>

Wenn man in der "Codepen-Console" unter "HTML" auf den "Pfeil nach unten" klickt und "View Compiled HTML" auswählt, werden auch die DIV-Container angezeigt!

Die farbige Spirale im Forum sichtbar machen

Will man die Spirale zum Testen im Forum platzieren, muss der Eintrag in der CSS etwas geändert werden!
Der gesamte Eintrag kann in die "".

In Zeile 9-15 wurde der "body-Eintrag" deaktiviert
In Zeile 18+19 kommt "z-index" und "overflow" hinzu!
Soll sich die Spirale hinter den Foren-Boxen bewegen, entfällt "z-index"!
In Zeile 166 ist das noch notwendige JavaScript zu 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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
<style>
*,
*::before,
*::after {
  transform-style: preserve-3d;
  box-sizing: border-box;
}
 
/* body {
  min-height: 100vh;
  perspective: 1300px;
  perspective-origin: center calc(50% - 12vmin);
  overflow: hidden;
  background: white;
} */
 
#canvas {
  z-index:999999;
  overflow: hidden;
 
  position: absolute;
  width: 95%;
  height: 100%;
  margin: 0;
  margin-top: 6vmin;
  padding: 0;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
  animation: rotateUs 50000ms linear infinite;
  transform: scale3d(1.6, 1.3, 1.3);
}
 
.spiral {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  transform-style: preserve-3d;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background: transparent;
  border: 0.5vmin solid red;
}
 
.spiral:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
 
.spiral:first-child {
  transform: translateZ(-0.1vmin) rotatez(0deg);
}
 
.spiral:nth-of-type(2) {
  transform: translateZ(-0.2vmin) rotatez(1deg);
}
 
.spiral:nth-of-type(3) {
  transform: translateZ(-0.3vmin) rotatez(2deg);
}
 
.spiral:nth-of-type(4) {
  transform: translateZ(-0.4vmin) rotatez(3deg);
}
 
.spiral:nth-of-type(5) {
  transform: translateZ(-0.5vmin) rotatez(4deg);
}
 
.spiral:nth-of-type(6) {
  transform: translateZ(-0.6vmin) rotatez(5deg);
}
 
.spiral:nth-of-type(7) {
  transform: translateZ(-0.7vmin) rotatez(6deg);
}
 
.spiral:nth-of-type(8) {
  transform: translateZ(-0.8vmin) rotatez(7deg);
}
 
.spiral:nth-of-type(9) {
  transform: translateZ(-0.9vmin) rotatez(8deg);
}
 
.spiral:nth-of-type(10) {
  transform: translateZ(-1vmin) rotatez(7deg);
}
 
.spiral:nth-of-type(11) {
  transform: translateZ(-1.1vmin) rotatez(6deg);
}
 
.spiral:nth-of-type(12) {
  transform: translateZ(-1.2vmin) rotatez(5deg);
}
 
.spiral:nth-of-type(13) {
  transform: translateZ(-1.3vmin) rotatez(4deg);
}
 
.spiral:nth-of-type(14) {
  transform: translateZ(-1.4vmin) rotatez(3deg);
}
 
.spiral:nth-of-type(15) {
  transform: translateZ(-1.5vmin) rotatez(2deg);
}
 
.spiral:nth-of-type(16) {
  transform: translateZ(-1.6vmin) rotatez(1deg);
}
 
.spiral:nth-of-type(17) {
  transform: translateZ(-1.7vmin) rotatez(1deg);
}
 
.spiral:nth-of-type(18) {
  transform: translateZ(-1.8vmin) rotatez(1deg);
}
 
.spiral:nth-of-type(19) {
  transform: translateZ(-1.9vmin) rotatez(1deg);
}
 
.spiral:nth-of-type(20) {
  transform: translateZ(-2vmin) rotatez(1deg);
}
 
@keyframes rotateUs {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
</style>
 

<div id="canvas">
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"> </div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
  <div class="spiral"></div>
</div>
 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script id="rendered-js">
/* 
Just playing around
 

Here's a little loop to start you off!
*/
 
gsap.
to(".spiral", {
  xPercent: -60,
  borderColor: "hsla(+=200, +=0%, +=0%)",
  ease: "sine.inOut",
  duration: 1,
  stagger: {
    amount: 1,
    repeat: -1,
    yoyo: true } }).
 

progress(0.7);
//# sourceURL=pen.js
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Besten Dank für das interessante Skript
Gruß
Wolfgang

Antworten

#5 | Fehlersuche: Textreflektion datum

30.05.2022 23:36 (zuletzt bearbeitet: 31.05.2022 11:59)

Wolfgang

Administrator

Informationen anzeigen

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

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

Fehlersuche: Textreflektion

Hallo Daishi
Hallo Daishi

Super Effekt, ausgefallen, auch mit wenig Aufwand anzuzeigen und gut anwendbar....

Außerhalb von "CODEPEN", mit zusätzlichen JavaScript-Dateien habe ich es nicht hinbekommen....
Ohne das JavaScript funktioniert es auch!
Allerdings muss man den Text zweimal eingeben (Zeile 3+4)!
Interessanterweise lässt sich die Textreflektion auch direkt mit dem BB-Forencode realisieren, wie hier die Überschrift!
Oder als HTML-Script mit CSS-Style!

Der BB-Forencode:

1
2
3
4
 
[style=font-family: monospace; font-weight: bold; display: flex; width: auto; height: auto; justify-content: left; align-items: center; text-align: center; margin: 0 0 0 20px; padding: 0; white-space: nowrap;]
[b][style=font-family: monospace; font-size: 2.6em; background: none; border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: none; text-align: center; margin: 0; padding: 0; width: 100%;]Hallo User[/style]
[style=font-size: 2.6em; color:#667269; height: 1em; position: relative; text-align: center; margin: 0; padding: 0 20px; transform: rotateX(180deg) skewX(45deg) translateY(0.48em) translateX(-0.73em) scaleY(0.6); background:#c0d6c4; float:left;]Hallo User[/style][/b]
[/style]
 

Das HTML-Script mit CSS-Style:

Der gesamte Eintrag kann in die "Kopfzeile".
Auch hier muss der Text zweimal eingegeben werden, in Zeile 50+51!

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
 
<style>
.reflection {
  font-size: 2.6em;
  color: #0007;
  height: 1em;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0 20px;
  transform: rotateX(180deg) skewX(45deg) translateY(0.48em) translateX(-0.73em) scaleY(0.6);
  background: #1624;
}
input.reflex { 
  font-weight: bold;
  font-family: monospace;
  font-size: 2.6em;
  
  background: none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
input.reflex:focus {
  outline: none;
}
#input-box {
  font-family: monospace;
  font-weight: bold;
  
  display: flex;
  width: auto;
  height: auto;
  justify-content: left;
  align-items: center;
  text-align: center;
  margin: 0 0 0 20px;
  padding: 0;
  white-space: nowrap;
}
</style>
 

<div id="input-box">
<div>
<input class="reflex" value="Hallo User">
<pre class="reflection">Hallo User</pre>
</div>
</div>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

PS: Funktioniert in allen Templates

Besten Dank für die interessanten Vorschläge und Ideen
Gruß
Wolfgang

Antworten

Etwas spät: Frohe Ostern � � Unter-Account in Haupt-Account

�hnliche Themen

Antworten

Letzter Beitrag

Bräuchte mal Hilfe - TAB-Menü und Portal
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 11 31.10.2022 10:26
Daishi • Zugriffe: 1540
Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 1027
Kopieren-Button zu Code-Block hinzufügen
Erstellt im Forum Das neue Template Xobor (v6). von creator 13 22.01.2022 10:17
Daishi • Zugriffe: 2529
Syntax-Highlighting: Foren-Code farbig darstellen!
Erstellt im Forum Das neue Template Xobor (v6). von Anne 3 28.08.2021 21:36
Anne • Zugriffe: 1353

Syntax-Highlighting - Quellcode im Forum farbig darstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.02.2015 21:29
von

Wolfgang • Zugriffe: 1713

Grafiken, Zeichen und Formen in Word 2007/2010-2016 erstellen und ohne Hintergrund abspeichern
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. von Wolfgang

29.11.2015 17:58
von

Magister • Zugriffe: 3853

Skripte 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

25.10.2009 17:41
von

Wolfgang • Zugriffe: 14894

Forum-Codes nicht ausführen, Forum-Codes farbig darstellen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

07.01.2009 00:45
von

Wolfgang • Zugriffe: 2048

Forum �bersicht → XOBOR-Foren und Homepages →

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! → Magisch farbige Spirale

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 €

37%

⚡Stress‑Test

�

🔥 Konsole �ffnen

Um die Browser-Konsole zu �ffnen, dr�cke:

F12 oder Ctrl + Shift + I

W�hle danach den Reiter Console.

Dort kannst du:
� Test-Anfragen sehen
� Fehler erkennen
� Netzwerk-Infos pr�fen