Forum - RE: Update: Schneekugel

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! » Schneekugel

Seite 2 von 2 « Seite 1 2 Seite »

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.

#11 | RE: Update: Schneekugel datum

05.12.2025 19:20

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	362

Hallo Arndt

Habe mal deine Idee und Inspiration umgesetzt, leider bekomme ich sie nicht im Xobor Forum zum Laufen. Ja mein großes Problem ist das Xobor etwas zu kompliziert für mich ist. Mal schaffe ich es, dass es geht, manches Mal nicht.

Ich hoffe, dass du es so gemeint hast, habe es auch schon kleiner gemacht, nicht so groß.

Wenn die Arbeit so gut angekommen ist und du es so meintest, freue ich mich sehr. Sei mir aber nicht Böse, dass es im Forum nicht geht. Ich frage Wolfgang ganz lieb und nett, ob er das Script mal anschauen würde, ob ich für das Forum massive Fehler eingebaut habe, und er es verbessern könnte.

Hier mal das Script:

Bitte Code nicht ausprobieren, verzerrt das Forum und Klick für Schnee 2 funktioniert im Forum nicht.

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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
 
<style>
 
  .snowglobe-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100px;
  justify-content: center;
  align-content: center;
}
 
.snowglobe-count-message {
  position: absolute;
  top: 0px;
  text-align: center;
}
 
.snowglobe-secret-message {
  position: absolute;
  text-align: center;
}
 
.snowglobe-container {
  position: relative;
  text-align: center;
  width: 200px;
  height: 200px;
  z-index: 0;
}
.snowglobe-main-circle {
  position: absolute;
  top: 25%;
  left: 25%;
  z-index: 5;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #1E4C69;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgb(0,0,0,0.2);
}
 
.snowglobe-glass-circle {
  position: absolute;
  top: 25%;
  left: 25%;
  z-index: 15;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: rgb(255, 255, 255, 0.5);
  cursor: pointer;
  -moz-box-shadow: inset 0 0 15px #ffff;
  -webkit-box-shadow: inset 0 0 15px #ffff;
  box-shadow: inset 0 0 15px #ffff;
}
 
.snowglobe-base {
  z-index: 1;
  position: absolute;
  top: 60%;
  left: 25%;
  border-bottom: 50px solid #cf4848;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-radius: 100%;
  height: 0;
  width: 50px;
  cursor: pointer;
  transition: 0.5s;
}
 
.snowglobe-base-shadow{
  box-shadow: 0 10px 10px rgb(0, 0, 0, 0.4);
}
 
.snowglobe-scene-container {
  width: 100%;
  height: 100%;
}
 
.snowglobe-base-cutoff {
  z-index: 2;
  position: absolute;
  bottom: 0px;
  left: 18px;
  width: 65px;
  height: 25px;
  background-color: rgb(255, 212, 212, 0.5);
  border-radius: 50%;
    box-shadow: 0 5px 5px rgb(0,0,0,0.2);
}
 
.snowglobe-inner-img {
  z-index: 5;
  width: 75%;
  height: 50%;
  border-radius: 100%;
  position: absolute;
  left: 15px;
  bottom: 20px;
  transition: 1s;
}
 
.snowglobe-tree-img{
  opacity: 0;
  z-index: 4;
  width: 45%;
  height: 55%;
  border-radius: 100%;
  position: absolute;
  right: 10px;
  bottom: 20px;
  transition: 1s;
}
 
.snowglobe-tree-img-show{
  opacity: 1;
}
 
/* Schütteln */
/* #snowglobe:hover {
  Animation: Schütteln 0,5s;
  Animations-Iterationszähler: unendlich;
} */
 
.snowglobe-shaker {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
 
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
 
.snowglobe-spin {
  transform: rotate(360deg);
}
 
/* Schnee */
.snow-container {
  opacity: 0.2;
  z-index: 9;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transition: 0.5s ease-out;
}
 
.snow-container-show {
  opacity: 1;
}
 
.snow1 {
  background: url(//files.homepagemodules.de/b916726/a_4_1e7d9465.png);
  background-repeat: repeat;
  background-position: center;
  background-size: 100px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: snowOne 10s infinite linear;
  border-radius: 100%;
  z-index: 9;
}
 
.snow2 {
  background: url(//files.homepagemodules.de/b916726/a_4_1e7d9465.png);
  background-repeat: repeat;
  background-position: center;
  background-size: 200px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: snowTwo 10s infinite linear;
  border-radius: 100%;
  z-index: 9;
}
 
@keyframes snowOne {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 200px 750px;
  }
}
@keyframes snowTwo {
  0% {
    background-position: 0px -200px;
  }
  100% {
    background-position: 0px 750px;
  }
}
 
  
</style>
<h1>Klicke auf den Globus, um ihn zu schütteln.!</h1>
<div class="snowglobe-wrapper">
 
  <div class="snowglobe-count-message">
    <span id="shakeCounter"></span>
  </div>
 
  <div id="snowglobe" class="snowglobe-container">
    <div class="snowglobe-glass-circle"></div>
 
    <div class="snowglobe-main-circle">
 
      <div class="snowglobe-scene-container">
        <div id="snowContainer" class="snow-container">
          <div id="snow1" class="snow1"></div>
          <div id="snow2" class="snow2"></div>
        </div>
        <!-- Hier kann eigenes bild eingefügt werden -->
        <img id="snowglobeImg" class="snowglobe-inner-img" src="https://files.homepagemodules.de/b104774/avatar-b64e7106-995.gif" />
        <!-- Bild für schneefall 2 für klick auf schneekugel bitte nicht Löschen -->
        <img id="treeImg" class="snowglobe-tree-img" src="//files.homepagemodules.de/b916726/a_5_dc061ef1.png"/>
      </div>
 
      <div class="snowglobe-base-cutoff"></div>
    </div>
 
    <div id="snowglobeBase" class="snowglobe-base">
    </div>
 
  </div>
 
  <div class="snowglobe-secret-message">
    <p><b id="secretMessage"></b></p>
  </div>
</div>
 

<script>
  
 

var shakeCount = 0;
var shakeIntervalCount = 0;
var shakeCountMsg = document.getElementById("shakeCounter");
var msgElement = document.getElementById("secretMessage");
var globeElement = document.getElementById("snowglobe");
var snowContainer = document.getElementById("snowContainer");
var innerImg = document.getElementById("snowglobeImg");
var treeImg = document.getElementById("treeImg");
var base = document.getElementById("snowglobeBase");
 
window.onload = function(e) {
  if (localStorage["gavins-snowglobe-count"]) {
    shakeCount = localStorage.getItem("gavins-snowglobe-count");
  }
 
  document.getElementById("snowglobe").addEventListener("click", function() {
    shakeCount++;
    localStorage["gavins-snowglobe-count"] = shakeCount;
    shakeIntervalCount++;
 
    shakeCountMsg.innerHTML =
      "Du hast die Schneekugel geschüttelt " + shakeCount + " mal!";
    msgElement.innerHTML = "<a href='' onclick='resetScore()'>Clear Score</a>";
    performActions();
 
    snowContainer.classList.add("snow-container-show");
    globeElement.classList.add("snowglobe-shaker");
    base.classList.add("snowglobe-base-shadow");
 
    setTimeout(function() {
      globeElement.classList.remove("snowglobe-shaker");
      snowContainer.classList.remove("snow-container-show");
      base.classList.remove("snowglobe-base-shadow");
    }, 1000);
  });
};
 
function performActions() {
  if (shakeIntervalCount >= 10) {
    shakeIntervalCount = 0;
    innerImg.classList.add("snowglobe-spin");
    setTimeout(function() {
      innerImg.classList.remove("snowglobe-spin");
    }, 1000);
  }
  
  if(shakeCount >= 100){
    treeImg.classList.add("snowglobe-tree-img-show");
  } else {
    treeImg.classList.remove("snowglobe-tree-img-show");
  }
  
}
 
function resetScore() {
  shakeCount = 0;
  shakeIntervalCount = 0;
  localStorage.removeItem("gavins-snowglobe-count");
}
  
  
</script>
 

Schließen

Wie es ausschaut

Inspiration von Kipper-Spedition!

Ich hoffe, dass du es so gemeint hast. Habe mir extra viel Mühe gegeben und mich freut es, wenn Wolfgang über das Script schaut. Natürlich wenn Wolfgang Ideen hat, kann er sie auch mit einfließen lassen.

Wünsche euch allen einen schönen Abend und ein schönes Wochenende. :O)

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#12 | Schneekugel mit Forum-Logo datum

07.12.2025 03:42

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Schneekugel mit Forum-Logo

Zitat von Kipper-Spedition im Beitrag #9
Würde man die Kugel auch mit einem eingefügten Bild oder einer Grafik hinbekommen?
Eine personalisierte Weihnachtskugel hätte schon was...

Nur so ne Idee, aber keinen Plan für die Umsetzung.

Arndt

Hallo ArndtSuper Idee!

Habe auch eine schöne Lösung für die Glaskugel gefunden, bei der man die Schneeflocken, das Hintergrundbild und das Logo selbst bestimmen kann!
Auch ist es möglich die Größe beliebig einzustellen und einen freien Text in den Sockel der Glaskugel zu platzieren!
Alle Variablen sind gut änderbar, ganz oben in der CSS zu finden!
Wird die Kugel vergrößert oder verkleinert, passen sich alle Werte in der CSS an!

Installation für alle Templates & Mobil

Gut sortiert mit allen Funktionen und den wichtigsten Einstellungen oben:

Das komplette Skript kann der Einfachheit wegen für die Template (v1-4) in die Kopf- oder Fußzeile, für das neue Xobor V6 & Mobil nach Eigenes Javascript kopiert werden.
Das Skript kann auch für alle Templates & Mobil als Plugin unter "Untere Leiste - Header" angelegt werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick !

In Zeile 4-9 lässt sich alles variabel einstellen.
In Zeile 9 lassen sich noch die Ecken einstellen, für runde Logos (50%) und eckige Logos (7%).
Wird Zeile 26 freigegeben, bekommt das Logo einen goldenen Rahmen.
In Zeile 52 kann die Anzahl der Flocken und in Zeile 53 die Geschwindigkeit eingestellt werden!

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
 
<!-- Schneekugel mit LOGO -->
<style>
.KugelContainer {
   --Größe: 320px;
   --SchneeflockeBild: url("https://files.homepagemodules.de/b104774/a_548_793b4fa5.gif");
   --HintergrundBild: url("https://files.homepagemodules.de/b104774/a_870_c831b55c.jpg");
   --LogoBild: url("https://files.homepagemodules.de/b104774/avatar-b64e7106-995.gif");
   --SockelText: "Eine angenehme Adventszeit und ruhige Tage bis Weihnachten";
   --LogoEcken: 50%; /* 50% = Rund  // 7% = Eckig */
}
.KugelContainer {margin:40px auto;display:flex;flex-direction:column;align-items:center;}
.KugelRahmen {position:relative;width:var(--Größe);height:var(--Größe);border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.7);box-shadow:inset 0 0 20px rgba(255,255,255,.6);}
.KugelRahmen::before {content:"";position:absolute;top:15px;left:15px;width:60px;height:30px;border-radius:50%;background:radial-gradient(circle at top left,rgba(255,255,255,.7),transparent);transform:rotate(-20deg);}
.KugelHintergrund {position:absolute;border-radius:50%;width:100%;height:100%; background-size: cover; display: block; margin: 0; background: var(--HintergrundBild) center/cover no-repeat;}
.KugelLogo {border-radius: var(--LogoEcken); background-size: contain; position:absolute;height:50%; width:50%;top:50%;left:50%;transform:translate(-50%,-50%); box-shadow:0 0 12px rgba(255,255,255,.8); box-shadow:0 0 12px rgba(255,255,255,.8); padding:5px;  background: var(--LogoBild) center/contain no-repeat;}
.KugelFlocke{position:absolute;width: calc(var(--Größe)/21);height:calc(var(--Größe)/21);background:var(--SchneeflockeBild) center/contain no-repeat;animation:fallen linear infinite;}
.KugelSockel {background:linear-gradient(to bottom,#b30000,#660000); border:4px solid gold; position:relative; max-width: 95%; width:calc(var(--Größe)*1.2); height: auto;border-radius:25px 25px 10px 10px;margin-top:calc(-1 * var(--Größe)/11); box-shadow:inset 0 3px 6px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.6), 0 6px 12px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;}
.KugelSockelText {font: calc(var(--Größe)/21) Georgia,serif; color:#f5e6c4; max-width: 80%;text-shadow:1px 1px 2px #000;padding: calc(var(--Größe)/100) calc(var(--Größe)/32)}
.KugelSockelText::before {content: var(--SockelText);}
.SockelSymbol {font-size: calc(var(--Größe)/18); position:absolute; top:50%; transform:translateY(-50%) ;}
.SockelSymbol.links { left:10px; }
.SockelSymbol.rechts { right:10px; }
 
.KugelLogo {
  /* Goldener Rahmen fürs Logo */
  /* border:1px solid gold; */
}
 
@keyframes fallen {
  0%{transform:translateY(-20px);opacity:1;}
  100%{transform:translateY(var(--Größe));opacity:0;}
}
</style>
 
<center>
<div class="KugelContainer">
  <div class="KugelRahmen">
    <div class="KugelHintergrund"></div>
    <div class="KugelLogo"></div>
  </div>
  <div class="KugelSockel">
    <span class="SockelSymbol links">&#127876;</span>
    <div class="KugelSockelText"></div>
    <span class="SockelSymbol rechts">&#11088;</span>
  </div>
</div>
</center>
 
<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
<script>
// Anzahl Schneeflocken automatisch erzeugen
const anzahlFlocken = 20;
const Geschwindigkeit = 5; // 15 = langsam  // 2 = schanell
 
const kugel=$('.KugelRahmen'),breite=parseInt(kugel.css('width')); for(let i=0;i<anzahlFlocken;i++) $('<div class="KugelFlocke"></div>').css({left:Math.random()*breite+"px",animationDuration:(Geschwindigkeit+Math.random()*Geschwindigkeit)+"s"}).appendTo(kugel);
</script>
 

Ultra kompakt mit allen Funktionen und den wichtigsten Einstellungen oben:

In Zeile 4-9 lässt sich alles variabel einstellen.
In Zeile 9 lassen sich noch die Ecken einstellen, für runde Logos (50%) und eckige Logos (7%).
Wird Zeile 15 freigegeben, bekommt das Logo einen goldenen Rahmen.
In Zeile 24 kann die Anzahl der Flocken und in Zeile 25 die Geschwindigkeit eingestellt werden!

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
 
<!-- Schneekugel mit LOGO -->
<style>
.KugelContainer {
   --Größe: 320px;
   --SchneeflockeBild: url("https://files.homepagemodules.de/b104774/a_548_793b4fa5.gif");
   --HintergrundBild: url("https://files.homepagemodules.de/b104774/a_870_c831b55c.jpg");
   --LogoBild: url("https://files.homepagemodules.de/b104774/avatar-b64e7106-995.gif");
   --SockelText: "Eine angenehme Adventszeit und ruhige Tage bis Weihnachten";
   --LogoEcken: 50%; /* 50% = Rund  // 7% = Eckig */
}
.KugelContainer{margin:40px auto;display:flex;flex-direction:column;align-items:center;}.KugelRahmen{position:relative;width:var(--Größe);height:var(--Größe);border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.7);box-shadow:inset 0 0 20px rgba(255,255,255,.6);}.KugelRahmen::before{content:"";position:absolute;top:15px;left:15px;width:60px;height:30px;border-radius:50%;background:radial-gradient(circle at top left,rgba(255,255,255,.7),transparent);transform:rotate(-20deg);}.KugelHintergrund{position:absolute;border-radius:50%;width:100%;height:100%;background-size:cover;display:block;margin:0;background:var(--HintergrundBild) center/cover no-repeat;}.KugelLogo{border-radius:var(--LogoEcken);background-size:contain;position:absolute;height:50%;width:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(255,255,255,.8);padding:5px;background:var(--LogoBild) center/contain no-repeat;}.KugelFlocke{position:absolute;width: calc(var(--Größe)/21);height:calc(var(--Größe)/21);background:var(--SchneeflockeBild) center/contain no-repeat;animation:fallen linear infinite;}.KugelSockel {background:linear-gradient(to bottom,#b30000,#660000); border:4px solid gold; position:relative; max-width: 95%; width:calc(var(--Größe)*1.2); height: auto;border-radius:25px 25px 10px 10px;margin-top:calc(-1 * var(--Größe)/11); box-shadow:inset 0 3px 6px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.6), 0 6px 12px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;}.KugelSockelText {font: calc(var(--Größe)/21) Georgia,serif; color:#f5e6c4; max-width: 80%;text-shadow:1px 1px 2px #000;padding: calc(var(--Größe)/100) calc(var(--Größe)/32)}.KugelSockelText::before{content:var(--SockelText);}.SockelSymbol {font-size: calc(var(--Größe)/18); position:absolute; top:50%; transform:translateY(-50%);}.SockelSymbol.links{left:10px;}.SockelSymbol.rechts{right:10px;}@keyframes fallen{0%{transform:translateY(-20px);opacity:1;}100%{transform:translateY(var(--Größe));opacity:0;}}
 
.KugelLogo {
  /* Goldener LOGO-Rahmen */
  /* border:1px solid gold; */
}
</style>
 
<center><div class="KugelContainer"><div class="KugelRahmen"><div class="KugelHintergrund"></div><div class="KugelLogo"></div></div><div class="KugelSockel"><span class="SockelSymbol links">&#127876;</span><div class="KugelSockelText"></div><span class="SockelSymbol rechts">&#11088;</span></div></div></center>
 
<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
<script>
// Anzahl Schneeflocken automatisch erzeugen
const anzahlFlocken = 20;
const Geschwindigkeit = 5; // 15 = langsam  // 2 = schanell
 
const kugel=$('.KugelRahmen'),breite=parseInt(kugel.css('width')); for(let i=0;i<anzahlFlocken;i++) $('<div class="KugelFlocke"></div>').css({left:Math.random()*breite+"px",animationDuration:(Geschwindigkeit+Math.random()*Geschwindigkeit)+"s"}).appendTo(kugel);
</script>
 

Schließen

Will man die Form der Schneeflocken verändern, braucht nur die Bild-Adresse geändert zu werden.

Folgende Bilder stehen hier zu Auswahl:

Große Schneeflocke:

//files.homepagemodules.de/b104774/a_549_2673fe4a.gif

Kleine Schneeflocke:

//files.homepagemodules.de/b104774/a_550_02dfe4d8.gif

Eisige Schneeflocke:

//files.homepagemodules.de/b104774/a_548_793b4fa5.gif

Schließen

Große CSS- , HTML- & JavaScript-DateienDie vorangegangene Glaskugel mit der riesigen CSS hat mich auch zum Nachdenken gebraucht!
Es ist faszinierend, was man mit der CSS alles machen kann, wie man auch am Würfel sehen konnte.
Auch hier ist eine große CSS-Datei zum Einsatz gekommen.
Wenn man recherchiert, haben große CSS-Dateien auch so ihre Nachteile, wie HTML und JavaScript.
Hier erhöhen sich Ladezeiten, die Seiten bauen sich nur langsam auf, viele Animationen sind nicht mehr fließend, sondern ruckeln nur, ...!
Auch sollen mehrere CSS-Dateien die Ladezeiten erhöhen!
Hier müsste alle CSS-Einträge von den Skripten zusammengefasst werden.
Wäre gut zu überlegen und gut zu dokumentieren, weil die CSS-Einträge von den selbst erstellten Skripten z.B. alle in "Eigener CSS Code" gespeichert werden müssten.

Was kann man tun?Ich werde, wenn notwendig, bei den Skriptvorschlägen immer zwei Versionen präsentieren, eine gut sortierte und überschaubare und eine weitere Version Ultrastark komprimiert, meist einreihig mit einem Kommentartext darüber!
Die Ultrastark komprimierte Version kann bis zu einem Drittel kleiner sein und verbessert somit die Ladezeiten!

Bis dann und viel Spaß mir der neuen LOGO-Glaskugel!
Wolfgang

Anne findet das Top!

Antworten

#13 | RE: Schneekugel mit Forum-Logo datum

07.12.2025 15:46 (zuletzt bearbeitet: 07.12.2025 15:46)

Zitat von Wolfgang im Beitrag #12
Die Ultrastark komprimierte Version kann bis zu einem Drittel kleiner sein und erhöht somit die Ladezeiten!

Moment: Erhöht = verschlechtert? Oder senkt = verbessert?

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#14 | RE: Schneekugel mit Forum-Logo datum

07.12.2025 16:56

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	362

So wie ich das verstehe, meint Wolfgang die CSS. Ich bastele viel mit CSS und meine Arbeiten sind Überlängen an CSS. Ist die CSS sehr groß, wirkt sich das auf die Ladezeiten der Webseite aus.

Ein Beispiel:

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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
 
 .pixel{
  width: 410px;
  height: 250px;
  position: absolute;
  top: calc(50% - 125px);
  left: calc(50% - 205px);
}
.pixel:before{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0px;
  left: 50px;
  background-color: #b93600;
  box-shadow: 10px 0 #b93600,
    /*NOEL*/
    20px 0 #b93600,
    -10px 10px #b93600,
    0px 10px #b93600,
    10px 10px #b93600,
    20px 10px #b93600,
    30px 10px #b93600,
    -20px 20px #FFFFFF,
    -10px 20px #FFFFFF,
    10px 20px #b93600,
    20px 20px #b93600,
    30px 20px #b93600,
    40px 20px #b93600,
    -20px 30px #FFFFFF,
    -10px 30px #FFFFFF,
    10px 30px #b93600,
    20px 30px #b93600,
    30px 30px #b93600,
    40px 30px #b93600,
    0px 40px #b93600,
    10px 40px #b93600,
    20px 40px #b93600,
    30px 40px #b93600,
    40px 40px #b93600,
    50px 40px #b93600,
    -10px 50px #b93600,
    0px 50px #b93600,
    10px 50px #b93600,
    20px 50px #b93600,
    30px 50px #b93600,
    40px 50px #b93600,
    50px 50px #b93600,
    60px 50px #b93600,
    -20px 60px #FFFFFF,
    -10px 60px #FFFFFF,
    0px 60px #FFFFFF,
    10px 60px #FFFFFF,
    20px 60px #FFFFFF,
    30px 60px #FFFFFF,
    40px 60px #FFFFFF,
    50px 60px #FFFFFF,
    60px 60px #FFFFFF,
    70px 60px #FFFFFF,
    -10px 70px #FFFFFF,
    0px 70px #fdc9a1,
    10px 70px #fdc9a1,
    20px 70px #fdc9a1,
    30px 70px #fdc9a1,
    40px 70px #fdc9a1,
    50px 70px #fdc9a1,
    60px 70px #FFFFFF,
    -10px 80px #FFFFFF,
    0px 80px #fdc9a1,
    10px 80px #000000,
    20px 80px #fdc9a1,
    30px 80px #fdc9a1,
    40px 80px #000000,
    50px 80px #fdc9a1,
    60px 80px #FFFFFF,
    -10px 90px #FFFFFF,
    0px 90px #fdc9a1,
    10px 90px #fdc9a1,
    20px 90px #fdc9a1,
    30px 90px #fdc9a1,
    40px 90px #fdc9a1,
    50px 90px #fdc9a1,
    60px 90px #FFFFFF,
    -50px 100px #FFFFFF,
    -40px 100px #FFFFFF,
    -10px 100px #FFFFFF,
    0px 100px #fdc9a1,
    10px 100px #FFFFFF,
    20px 100px #FFFFFF,
    30px 100px #FFFFFF,
    40px 100px #FFFFFF,
    50px 100px #fdc9a1,
    60px 100px #FFFFFF,
    90px 100px #FFFFFF,
    100px 100px #FFFFFF,
    -10px 110px #FFFFFF,
    -50px 110px #FFFFFF,
    -40px 110px #FFFFFF,
    0px 110px #FFFFFF,
    10px 110px #FFFFFF,
    20px 110px #fa6b44,
    30px 110px #fa6b44,
    40px 110px #FFFFFF,
    50px 110px #FFFFFF,
    60px 110px #FFFFFF,
    90px 110px #FFFFFF,
    100px 110px #FFFFFF,
    -40px 120px #b93600,
    -30px 120px #b93600,
    0px 120px #FFFFFF,
    10px 120px #FFFFFF,
    20px 120px #FFFFFF,
    30px 120px #FFFFFF,
    40px 120px #FFFFFF,
    50px 120px #FFFFFF,
    80px 120px #b93600,
    90px 120px #b93600,
    -40px 130px #b93600,
    -30px 130px #b93600,
    -20px 130px #b93600,
    -10px 130px #b93600,
    0px 130px #b93600,
    10px 130px #FFFFFF,
    20px 130px #FFFFFF,
    30px 130px #FFFFFF,
    40px 130px #FFFFFF,
    50px 130px #b93600,
    60px 130px #b93600,
    70px 130px #b93600,
    80px 130px #b93600,
    90px 130px #b93600,
    -30px 140px #b93600,
    -20px 140px #b93600,
    -10px 140px #b93600,
    0px 140px #b93600,
    10px 140px #b93600,
    20px 140px #b93600,
    30px 140px #b93600,
    40px 140px #b93600,
    50px 140px #b93600,
    60px 140px #b93600,
    70px 140px #b93600,
    80px 140px #b93600,
    -20px 150px #b93600,
    -10px 150px #b93600,
    0px 150px #b93600,
    10px 150px #b93600,
    20px 150px #b93600,
    30px 150px #b93600,
    40px 150px #b93600,
    50px 150px #b93600,
    60px 150px #b93600,
    70px 150px #b93600,
    -10px 160px #b93600,
    0px 160px #b93600,
    10px 160px #b93600,
    20px 160px #b93600,
    30px 160px #b93600,
    40px 160px #b93600,
    50px 160px #b93600,
    60px 160px #b93600, 
    -10px 170px #5c2800,
    0px 170px #5c2800,
    10px 170px #5c2800,
    20px 170px #fcb71a,
    30px 170px #fcb71a,
    40px 170px #5c2800,
    50px 170px #5c2800,
    60px 170px #5c2800,
    -10px 180px #b93600,
    0px 180px #b93600,
    10px 180px #b93600,
    20px 180px #b93600,
    30px 180px #b93600,
    40px 180px #b93600,
    50px 180px #b93600,
    60px 180px #b93600,
    -10px 190px #b93600,
    0px 190px #b93600,
    10px 190px #b93600,
    20px 190px #b93600,
    30px 190px #b93600,
    40px 190px #b93600,
    50px 190px #b93600,
    60px 190px #b93600,
    0px 200px #b93600,
    10px 200px #b93600,
    40px 200px #b93600,
    50px 200px #b93600,
    0px 210px #b93600,
    10px 210px #b93600,
    40px 210px #b93600,
    50px 210px #b93600,
    0px 220px #000000,
    10px 220px #000000,
    40px 220px #000000,
    50px 220px #000000,
    -10px 230px #000000,
    0px 230px #000000,
    10px 230px #000000,
    40px 230px #000000,
    50px 230px #000000,
    60px 230px #000000,
    -10px 240px #000000,
    0px 240px #000000,
    10px 240px #000000,
    40px 240px #000000,
    50px 240px #000000,
    60px 240px #000000,
    /*GEGENWÄRTIG 1*/
    120px 240px #000000,
    130px 240px #000000,
    140px 240px #000000,
    150px 240px #000000,
    160px 240px #000000,
    170px 240px #000000,
    180px 240px #000000,
    190px 240px #000000,
    200px 240px #000000,
    120px 230px #000000,
    130px 230px #2c5aa9,
    140px 230px #2c5aa9,
    150px 230px #000000,
    160px 230px #fdd929,
    170px 230px #000000,
    180px 230px #2c5aa9,
    190px 230px #2c5aa9,
    200px 230px #000000,
    120px 220px #000000,
    130px 220px #2c5aa9,
    140px 220px #2c5aa9,
    150px 220px #000000,
    160px 220px #fdd929,
    170px 220px #000000,
    180px 220px #2c5aa9,
    190px 220px #2c5aa9,
    200px 220px #000000,    
    120px 210px #000000,
    130px 210px #2c5aa9,
    140px 210px #2c5aa9,
    150px 210px #000000,
    160px 210px #fdd929,
    170px 210px #000000,
    180px 210px #2c5aa9,
    190px 210px #2c5aa9,
    200px 210px #000000,    
    120px 200px #000000,
    130px 200px #2c5aa9,
    140px 200px #2c5aa9,
    150px 200px #000000,
    160px 200px #fdd929,
    170px 200px #000000,
    180px 200px #2c5aa9,
    190px 200px #2c5aa9,
    200px 200px #000000,    
    120px 190px #000000,
    130px 190px #000000,
    140px 190px #000000,
    150px 190px #000000,
    160px 190px #000000,
    170px 190px #000000,
    180px 190px #000000,
    190px 190px #000000,
    200px 190px #000000,
    130px 180px #000000,
    140px 180px #fdd929,
    150px 180px #000000,
    160px 180px #fdd929,
    170px 180px #000000,
    180px 180px #fdd929,
    190px 180px #000000,    
    130px 170px #000000,
    140px 170px #fdd929,
    150px 170px #000000,
    160px 170px #000000,
    170px 170px #000000,
    180px 170px #fdd929,
    190px 170px #000000,
    140px 160px #000000,
    180px 160px #000000,
    /*GEGENWÄRTIG 2*/
    230px 240px #000000,
    240px 240px #000000,
    250px 240px #000000,
    260px 240px #000000,
    270px 240px #000000,
    280px 240px #000000,
    290px 240px #000000,
    300px 240px #000000,
    310px 240px #000000,
    230px 230px #000000,
    240px 230px #cc5ea5,
    250px 230px #cc5ea5,
    260px 230px #000000,
    270px 230px #56bc66,
    280px 230px #000000,
    290px 230px #cc5ea5,
    300px 230px #cc5ea5,
    310px 230px #000000,
    230px 220px #000000,
    240px 220px #cc5ea5,
    250px 220px #cc5ea5,
    260px 220px #000000,
    270px 220px #56bc66,
    280px 220px #000000,
    290px 220px #cc5ea5,
    300px 220px #cc5ea5,
    310px 220px #000000,    
    230px 210px #000000,
    240px 210px #cc5ea5,
    250px 210px #cc5ea5,
    260px 210px #000000,
    270px 210px #56bc66,
    280px 210px #000000,
    290px 210px #cc5ea5,
    300px 210px #cc5ea5,
    310px 210px #000000,    
    230px 200px #000000,
    240px 200px #cc5ea5,
    250px 200px #cc5ea5,
    260px 200px #000000,
    270px 200px #56bc66,
    280px 200px #000000,
    290px 200px #cc5ea5,
    300px 200px #cc5ea5,
    310px 200px #000000,    
    230px 190px #000000,
    240px 190px #000000,
    250px 190px #000000,
    260px 190px #000000,
    270px 190px #000000,
    280px 190px #000000,
    290px 190px #000000,
    300px 190px #000000,
    310px 190px #000000,
    240px 180px #000000,
    250px 180px #56bc66,
    260px 180px #000000,
    270px 180px #56bc66,
    280px 180px #000000,
    290px 180px #56bc66,
    300px 180px #000000,    
    240px 170px #000000,
    250px 170px #56bc66,
    260px 170px #000000,
    270px 170px #000000,
    280px 170px #000000,
    290px 170px #56bc66,
    300px 170px #000000,
    250px 160px #000000,
    290px 160px #000000
}
.pixel:after{
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 95px;
  left: 170px;
  background-color: #b93600;
  box-shadow: 5px 0 #b93600,
    /*WEIHNACHTEN*/
    /*C*/
    10px 0 #b93600,
    -5px -5px #b93600,
    0px -5px #b93600,
    5px -5px #b93600,
    10px -5px #b93600,
    15px -5px #b93600,    
    -5px -10px #b93600,
    0px -10px #b93600,
    10px -10px #b93600,
    15px -10px #b93600,
    -10px -15px #b93600,
    -5px -15px #b93600,
    -10px -20px #b93600,
    -5px -20px #b93600,
    -5px -25px #b93600,
    0px -25px #b93600,
    10px -25px #b93600,
    15px -25px #b93600,    
    -5px -30px #b93600,
    0px -30px #b93600,
    5px -30px #b93600,
    10px -30px #b93600,
    15px -30px #b93600,    
    0px -35px #b93600,
    5px -35px #b93600,
    10px -35px #b93600,
    /*H*/
    25px 0px #b93600,
    30px 0px #b93600,
    40px 0px #b93600,
    45px 0px #b93600,    
    25px -5px #b93600,
    30px -5px #b93600,
    40px -5px #b93600,
    45px -5px #b93600,    
    25px -10px #b93600,
    30px -10px #b93600,
    40px -10px #b93600,
    45px -10px #b93600,    
    25px -15px #b93600,
    30px -15px #b93600,
    35px -15px #b93600,
    40px -15px #b93600,
    45px -15px #b93600,    
    25px -20px #b93600,
    30px -20px #b93600,
    35px -20px #b93600,
    40px -20px #b93600,
    45px -20px #b93600,    
    25px -25px #b93600,
    30px -25px #b93600,
    40px -25px #b93600,
    45px -25px #b93600,    
    25px -30px #b93600,
    30px -30px #b93600,
    40px -30px #b93600,
    45px -30px #b93600,    
    25px -35px #b93600,
    30px -35px #b93600,
    40px -35px #b93600,
    45px -35px #b93600,
    /*R*/
    55px 0 #b93600,
    60px 0 #b93600,
    70px 0 #b93600,
    75px 0 #b93600,    
    55px 0 #b93600,
    60px 0 #b93600,
    70px 0 #b93600,
    75px 0 #b93600,    
    55px -5px #b93600,
    60px -5px #b93600,
    70px -5px #b93600,
    75px -5px #b93600,    
    55px -10px #b93600,
    60px -10px #b93600,
    65px -10px #b93600,
    70px -10px #b93600,    
    55px -15px #b93600,
    60px -15px #b93600,
    65px -15px #b93600,    
    55px -20px #b93600,
    60px -20px #b93600,
    65px -20px #b93600,
    70px -20px #b93600,    
    55px -25px #b93600,
    60px -25px #b93600,
    70px -25px #b93600,
    75px -25px #b93600,    
    55px -30px #b93600,
    60px -30px #b93600,
    70px -30px #b93600,
    75px -30px #b93600,    
    55px -35px #b93600,
    60px -35px #b93600,
    65px -35px #b93600,
    70px -35px #b93600,
    /*I*/
    85px 0px #b93600,
    90px 0px #b93600,
    85px -5px #b93600,
    90px -5px #b93600,
    85px -10px #b93600,
    90px -10px #b93600,
    85px -15px #b93600,
    90px -15px #b93600,
    85px -20px #b93600,
    90px -20px #b93600,
    85px -25px #b93600,
    90px -25px #b93600,
    85px -30px #b93600,
    90px -30px #b93600,
    85px -35px #b93600,
    90px -35px #b93600,
    /*s*/
    105px 0px #b93600,
    110px 0px #b93600,
    100px -5px #b93600,
    105px -5px #b93600,
    110px -5px #b93600,
    115px -5px #b93600,
    100px -10px #b93600,
    115px -10px #b93600,
    115px -15px #b93600,
    110px -15px #b93600,
    110px -20px #b93600,
    105px -20px #b93600,
    100px -20px #b93600,
    100px -25px #b93600,
    100px -30px #b93600,
    105px -30px #b93600,
    110px -30px #b93600,
    115px -30px #b93600,
    105px -35px #b93600,
    110px -35px #b93600,
    /*T*/
    130px 0px #b93600,
    135px 0px #b93600,
    130px -5px #b93600,
    135px -5px #b93600,
    130px -10px #b93600,
    135px -10px #b93600,
    130px -15px #b93600,
    135px -15px #b93600,
    130px -20px #b93600,
    135px -20px #b93600,
    130px -25px #b93600,
    135px -25px #b93600,
    125px -30px #b93600,
    130px -30px #b93600,
    135px -30px #b93600,
    140px -30px #b93600,
    125px -35px #b93600,
    130px -35px #b93600,
    135px -35px #b93600,
    140px -35px #b93600,
    /*M*/
    150px 0px #b93600,
    155px 0px #b93600,
    175px 0px #b93600,
    180px 0px #b93600,
    150px -5px #b93600,
    155px -5px #b93600,
    175px -5px #b93600,
    180px -5px #b93600,
    150px -10px #b93600,
    155px -10px #b93600,
    175px -10px #b93600,
    180px -10px #b93600,
    150px -15px #b93600,
    155px -15px #b93600,
    175px -15px #b93600,
    180px -15px #b93600,
    150px -20px #b93600,
    155px -20px #b93600,
    165px -20px #b93600,
    175px -20px #b93600,
    180px -20px #b93600,
    150px -25px #b93600,
    155px -25px #b93600,
    160px -25px #b93600,
    165px -25px #b93600,
    170px -25px #b93600,
    175px -25px #b93600,
    180px -25px #b93600,
    150px -30px #b93600,
    155px -30px #b93600,
    160px -30px #b93600,
    170px -30px #b93600,
    175px -30px #b93600,
    180px -30px #b93600,
    150px -35px #b93600,
    155px -35px #b93600,
    175px -35px #b93600,
    180px -35px #b93600,
    /*A*/
    190px 0px #b93600,
    195px 0px #b93600,
    205px 0px #b93600,
    210px 0px #b93600,    
    190px -5px #b93600,
    195px -5px #b93600,
    200px -5px #b93600,
    205px -5px #b93600,
    210px -5px #b93600,    
    190px -10px #b93600,
    195px -10px #b93600,
    200px -10px #b93600,
    205px -10px #b93600,
    210px -10px #b93600,    
    190px -15px #b93600,
    195px -15px #b93600,
    205px -15px #b93600,
    210px -15px #b93600,    
    190px -20px #b93600,
    195px -20px #b93600,
    205px -20px #b93600,
    210px -20px #b93600,    
    190px -25px #b93600,
    195px -25px #b93600,
    200px -25px #b93600,
    205px -25px #b93600,
    210px -25px #b93600,    
    195px -30px #b93600,
    200px -30px #b93600,
    205px -30px #b93600,    
    200px -35px #b93600,
    /*S*/
    225px 0px #b93600,
    230px 0px #b93600,
    220px -5px #b93600,
    225px -5px #b93600,
    230px -5px #b93600,
    235px -5px #b93600,
    220px -10px #b93600,
    235px -10px #b93600,
    235px -15px #b93600,
    230px -15px #b93600,
    230px -20px #b93600,
    225px -20px #b93600,
    220px -20px #b93600,
    220px -25px #b93600,
    220px -30px #b93600,
    225px -30px #b93600,
    230px -30px #b93600,
    235px -30px #b93600,
    225px -35px #b93600,
    230px -35px #b93600,
    /*FRÖHLICH*/
    /*M*/    
    40px -45px #f0f526,
    45px -45px #f0f526,
    65px -45px #f0f526,
    70px -45px #f0f526,
    40px -50px #f0f526,
    45px -50px #f0f526,
    65px -50px #f0f526,
    70px -50px #f0f526,
    40px -55px #f0f526,
    45px -55px #f0f526,
    65px -55px #f0f526,
    70px -55px #f0f526,
    40px -60px #f0f526,
    45px -60px #f0f526,
    65px -60px #f0f526,
    70px -60px #f0f526,
    40px -65px #f0f526,
    45px -65px #f0f526,
    55px -65px #f0f526,
    65px -65px #f0f526,
    70px -65px #f0f526,
    40px -70px #f0f526,
    45px -70px #f0f526,
    50px -70px #f0f526,
    55px -70px #f0f526,
    60px -70px #f0f526,
    65px -70px #f0f526,
    70px -70px #f0f526,
    40px -75px #f0f526,
    45px -75px #f0f526,
    50px -75px #f0f526,
    60px -75px #f0f526,
    65px -75px #f0f526,
    70px -75px #f0f526,
    40px -80px #f0f526,
    45px -80px #f0f526,
    65px -80px #f0f526,
    70px -80px #f0f526,
    /*E*/
    80px -45px #f0f526,
    85px -45px #f0f526,
    90px -45px #f0f526,
    95px -45px #f0f526,
    80px -50px #f0f526,
    85px -50px #f0f526,
    90px -50px #f0f526,
    95px -50px #f0f526,
    80px -55px #f0f526,
    85px -55px #f0f526,
    80px -60px #f0f526,
    85px -60px #f0f526,
    90px -60px #f0f526,    
    80px -65px #f0f526,
    85px -65px #f0f526,
    90px -65px #f0f526,
    80px -70px #f0f526,
    85px -70px #f0f526,    
    80px -75px #f0f526,
    85px -75px #f0f526,
    90px -75px #f0f526,
    95px -75px #f0f526,    
    80px -80px #f0f526,
    85px -80px #f0f526,
    90px -80px #f0f526,
    95px -80px #f0f526,
    /*R*/
    105px -45px #f0f526,
    110px -45px #f0f526,
    120px -45px #f0f526,
    125px -45px #f0f526,    
    105px -50px #f0f526,
    110px -50px #f0f526,
    120px -50px #f0f526,
    125px -50px #f0f526,    
    105px -55px #f0f526,
    110px -55px #f0f526,
    115px -55px #f0f526,
    120px -55px #f0f526,    
    105px -60px #f0f526,
    110px -60px #f0f526,
    115px -60px #f0f526,    
    105px -65px #f0f526,
    110px -65px #f0f526,
    115px -65px #f0f526,
    120px -65px #f0f526,    
    105px -70px #f0f526,
    110px -70px #f0f526,
    120px -70px #f0f526,
    125px -70px #f0f526,    
    105px -75px #f0f526,
    110px -75px #f0f526,
    120px -75px #f0f526,
    125px -75px #f0f526,    
    105px -80px #f0f526,
    110px -80px #f0f526,
    115px -80px #f0f526,
    120px -80px #f0f526,
    
    /*R*/
    135px -45px #f0f526,
    140px -45px #f0f526,
    150px -45px #f0f526,
    155px -45px #f0f526,    
    135px -50px #f0f526,
    140px -50px #f0f526,
    150px -50px #f0f526,
    155px -50px #f0f526,    
    135px -55px #f0f526,
    140px -55px #f0f526,
    145px -55px #f0f526,
    150px -55px #f0f526,    
    135px -60px #f0f526,
    140px -60px #f0f526,
    145px -60px #f0f526,    
    135px -65px #f0f526,
    140px -65px #f0f526,
    145px -65px #f0f526,
    150px -65px #f0f526,    
    135px -70px #f0f526,
    140px -70px #f0f526,
    150px -70px #f0f526,
    155px -70px #f0f526,    
    135px -75px #f0f526,
    140px -75px #f0f526,
    150px -75px #f0f526,
    155px -75px #f0f526,    
    135px -80px #f0f526,
    140px -80px #f0f526,
    145px -80px #f0f526,
    150px -80px #f0f526,
    /*Y*/
    175px -45px #f0f526,
    180px -45px #f0f526,
    175px -50px #f0f526,
    180px -50px #f0f526,
    175px -55px #f0f526,
    180px -55px #f0f526,
    175px -60px #f0f526,
    180px -60px #f0f526,
    170px -65px #f0f526,
    175px -65px #f0f526,
    180px -65px #f0f526,
    185px -65px #f0f526,
    170px -70px #f0f526,
    185px -70px #f0f526,
    165px -75px #f0f526,
    170px -75px #f0f526,
    185px -75px #f0f526,
    190px -75px #f0f526,    
    165px -80px #f0f526,
    170px -80px #f0f526,
    185px -80px #f0f526,
    190px -80px #f0f526;
  opacity: 1;
  animation: animateText 3s linear infinite;
}
@keyframes animateText{
  0%{
    opacity: .5
  }
  50%{
    opacity: 1
  }
  100%{
    opacity: .5
  }
} 
 

Schließen

Hier mit ultrastarke Komprimierung:

1
 
 .pixel{ width:410px; height:250px; position:absolute; top:calc(50% - 125px); left:calc(50% - 205px)}.pixel:before{ content:""; width:10px; height:10px; position:absolute; top:0px; left:50px; background-color:#b93600; box-shadow:10px 0 #b93600,  20px 0 #b93600, -10px 10px #b93600, 0px 10px #b93600, 10px 10px #b93600, 20px 10px #b93600, 30px 10px #b93600, -20px 20px #FFF, -10px 20px #FFF, 10px 20px #b93600, 20px 20px #b93600, 30px 20px #b93600, 40px 20px #b93600, -20px 30px #FFF, -10px 30px #FFF, 10px 30px #b93600, 20px 30px #b93600, 30px 30px #b93600, 40px 30px #b93600, 0px 40px #b93600, 10px 40px #b93600, 20px 40px #b93600, 30px 40px #b93600, 40px 40px #b93600, 50px 40px #b93600, -10px 50px #b93600, 0px 50px #b93600, 10px 50px #b93600, 20px 50px #b93600, 30px 50px #b93600, 40px 50px #b93600, 50px 50px #b93600, 60px 50px #b93600, -20px 60px #FFF, -10px 60px #FFF, 0px 60px #FFF, 10px 60px #FFF, 20px 60px #FFF, 30px 60px #FFF, 40px 60px #FFF, 50px 60px #FFF, 60px 60px #FFF, 70px 60px #FFF, -10px 70px #FFF, 0px 70px #fdc9a1, 10px 70px #fdc9a1, 20px 70px #fdc9a1, 30px 70px #fdc9a1, 40px 70px #fdc9a1, 50px 70px #fdc9a1, 60px 70px #FFF, -10px 80px #FFF, 0px 80px #fdc9a1, 10px 80px #000, 20px 80px #fdc9a1, 30px 80px #fdc9a1, 40px 80px #000, 50px 80px #fdc9a1, 60px 80px #FFF, -10px 90px #FFF, 0px 90px #fdc9a1, 10px 90px #fdc9a1, 20px 90px #fdc9a1, 30px 90px #fdc9a1, 40px 90px #fdc9a1, 50px 90px #fdc9a1, 60px 90px #FFF, -50px 100px #FFF, -40px 100px #FFF, -10px 100px #FFF, 0px 100px #fdc9a1, 10px 100px #FFF, 20px 100px #FFF, 30px 100px #FFF, 40px 100px #FFF, 50px 100px #fdc9a1, 60px 100px #FFF, 90px 100px #FFF, 100px 100px #FFF, -10px 110px #FFF, -50px 110px #FFF, -40px 110px #FFF, 0px 110px #FFF, 10px 110px #FFF, 20px 110px #fa6b44, 30px 110px #fa6b44, 40px 110px #FFF, 50px 110px #FFF, 60px 110px #FFF, 90px 110px #FFF, 100px 110px #FFF, -40px 120px #b93600, -30px 120px #b93600, 0px 120px #FFF, 10px 120px #FFF, 20px 120px #FFF, 30px 120px #FFF, 40px 120px #FFF, 50px 120px #FFF, 80px 120px #b93600, 90px 120px #b93600, -40px 130px #b93600, -30px 130px #b93600, -20px 130px #b93600, -10px 130px #b93600, 0px 130px #b93600, 10px 130px #FFF, 20px 130px #FFF, 30px 130px #FFF, 40px 130px #FFF, 50px 130px #b93600, 60px 130px #b93600, 70px 130px #b93600, 80px 130px #b93600, 90px 130px #b93600, -30px 140px #b93600, -20px 140px #b93600, -10px 140px #b93600, 0px 140px #b93600, 10px 140px #b93600, 20px 140px #b93600, 30px 140px #b93600, 40px 140px #b93600, 50px 140px #b93600, 60px 140px #b93600, 70px 140px #b93600, 80px 140px #b93600, -20px 150px #b93600, -10px 150px #b93600, 0px 150px #b93600, 10px 150px #b93600, 20px 150px #b93600, 30px 150px #b93600, 40px 150px #b93600, 50px 150px #b93600, 60px 150px #b93600, 70px 150px #b93600, -10px 160px #b93600, 0px 160px #b93600, 10px 160px #b93600, 20px 160px #b93600, 30px 160px #b93600, 40px 160px #b93600, 50px 160px #b93600, 60px 160px #b93600, -10px 170px #5c2800, 0px 170px #5c2800, 10px 170px #5c2800, 20px 170px #fcb71a, 30px 170px #fcb71a, 40px 170px #5c2800, 50px 170px #5c2800, 60px 170px #5c2800, -10px 180px #b93600, 0px 180px #b93600, 10px 180px #b93600, 20px 180px #b93600, 30px 180px #b93600, 40px 180px #b93600, 50px 180px #b93600, 60px 180px #b93600, -10px 190px #b93600, 0px 190px #b93600, 10px 190px #b93600, 20px 190px #b93600, 30px 190px #b93600, 40px 190px #b93600, 50px 190px #b93600, 60px 190px #b93600, 0px 200px #b93600, 10px 200px #b93600, 40px 200px #b93600, 50px 200px #b93600, 0px 210px #b93600, 10px 210px #b93600, 40px 210px #b93600, 50px 210px #b93600, 0px 220px #000, 10px 220px #000, 40px 220px #000, 50px 220px #000, -10px 230px #000, 0px 230px #000, 10px 230px #000, 40px 230px #000, 50px 230px #000, 60px 230px #000, -10px 240px #000, 0px 240px #000, 10px 240px #000, 40px 240px #000, 50px 240px #000, 60px 240px #000,  120px 240px #000, 130px 240px #000, 140px 240px #000, 150px 240px #000, 160px 240px #000, 170px 240px #000, 180px 240px #000, 190px 240px #000, 200px 240px #000, 120px 230px #000, 130px 230px #2c5aa9, 140px 230px #2c5aa9, 150px 230px #000, 160px 230px #fdd929, 170px 230px #000, 180px 230px #2c5aa9, 190px 230px #2c5aa9, 200px 230px #000, 120px 220px #000, 130px 220px #2c5aa9, 140px 220px #2c5aa9, 150px 220px #000, 160px 220px #fdd929, 170px 220px #000, 180px 220px #2c5aa9, 190px 220px #2c5aa9, 200px 220px #000,  120px 210px #000, 130px 210px #2c5aa9, 140px 210px #2c5aa9, 150px 210px #000, 160px 210px #fdd929, 170px 210px #000, 180px 210px #2c5aa9, 190px 210px #2c5aa9, 200px 210px #000,  120px 200px #000, 130px 200px #2c5aa9, 140px 200px #2c5aa9, 150px 200px #000, 160px 200px #fdd929, 170px 200px #000, 180px 200px #2c5aa9, 190px 200px #2c5aa9, 200px 200px #000,  120px 190px #000, 130px 190px #000, 140px 190px #000, 150px 190px #000, 160px 190px #000, 170px 190px #000, 180px 190px #000, 190px 190px #000, 200px 190px #000, 130px 180px #000, 140px 180px #fdd929, 150px 180px #000, 160px 180px #fdd929, 170px 180px #000, 180px 180px #fdd929, 190px 180px #000,  130px 170px #000, 140px 170px #fdd929, 150px 170px #000, 160px 170px #000, 170px 170px #000, 180px 170px #fdd929, 190px 170px #000, 140px 160px #000, 180px 160px #000,  230px 240px #000, 240px 240px #000, 250px 240px #000, 260px 240px #000, 270px 240px #000, 280px 240px #000, 290px 240px #000, 300px 240px #000, 310px 240px #000, 230px 230px #000, 240px 230px #cc5ea5, 250px 230px #cc5ea5, 260px 230px #000, 270px 230px #56bc66, 280px 230px #000, 290px 230px #cc5ea5, 300px 230px #cc5ea5, 310px 230px #000, 230px 220px #000, 240px 220px #cc5ea5, 250px 220px #cc5ea5, 260px 220px #000, 270px 220px #56bc66, 280px 220px #000, 290px 220px #cc5ea5, 300px 220px #cc5ea5, 310px 220px #000,  230px 210px #000, 240px 210px #cc5ea5, 250px 210px #cc5ea5, 260px 210px #000, 270px 210px #56bc66, 280px 210px #000, 290px 210px #cc5ea5, 300px 210px #cc5ea5, 310px 210px #000,  230px 200px #000, 240px 200px #cc5ea5, 250px 200px #cc5ea5, 260px 200px #000, 270px 200px #56bc66, 280px 200px #000, 290px 200px #cc5ea5, 300px 200px #cc5ea5, 310px 200px #000,  230px 190px #000, 240px 190px #000, 250px 190px #000, 260px 190px #000, 270px 190px #000, 280px 190px #000, 290px 190px #000, 300px 190px #000, 310px 190px #000, 240px 180px #000, 250px 180px #56bc66, 260px 180px #000, 270px 180px #56bc66, 280px 180px #000, 290px 180px #56bc66, 300px 180px #000,  240px 170px #000, 250px 170px #56bc66, 260px 170px #000, 270px 170px #000, 280px 170px #000, 290px 170px #56bc66, 300px 170px #000, 250px 160px #000, 290px 160px #000}.pixel:after{ content:""; width:5px; height:5px; position:absolute; top:95px; left:170px; background-color:#b93600; box-shadow:5px 0 #b93600,  /*C*/ 10px 0 #b93600, -5px -5px #b93600, 0px -5px #b93600, 5px -5px #b93600, 10px -5px #b93600, 15px -5px #b93600,  -5px -10px #b93600, 0px -10px #b93600, 10px -10px #b93600, 15px -10px #b93600, -10px -15px #b93600, -5px -15px #b93600, -10px -20px #b93600, -5px -20px #b93600, -5px -25px #b93600, 0px -25px #b93600, 10px -25px #b93600, 15px -25px #b93600,  -5px -30px #b93600, 0px -30px #b93600, 5px -30px #b93600, 10px -30px #b93600, 15px -30px #b93600,  0px -35px #b93600, 5px -35px #b93600, 10px -35px #b93600, /*H*/ 25px 0px #b93600, 30px 0px #b93600, 40px 0px #b93600, 45px 0px #b93600,  25px -5px #b93600, 30px -5px #b93600, 40px -5px #b93600, 45px -5px #b93600,  25px -10px #b93600, 30px -10px #b93600, 40px -10px #b93600, 45px -10px #b93600,  25px -15px #b93600, 30px -15px #b93600, 35px -15px #b93600, 40px -15px #b93600, 45px -15px #b93600,  25px -20px #b93600, 30px -20px #b93600, 35px -20px #b93600, 40px -20px #b93600, 45px -20px #b93600,  25px -25px #b93600, 30px -25px #b93600, 40px -25px #b93600, 45px -25px #b93600,  25px -30px #b93600, 30px -30px #b93600, 40px -30px #b93600, 45px -30px #b93600,  25px -35px #b93600, 30px -35px #b93600, 40px -35px #b93600, 45px -35px #b93600, /*R*/ 55px 0 #b93600, 60px 0 #b93600, 70px 0 #b93600, 75px 0 #b93600,  55px 0 #b93600, 60px 0 #b93600, 70px 0 #b93600, 75px 0 #b93600,  55px -5px #b93600, 60px -5px #b93600, 70px -5px #b93600, 75px -5px #b93600,  55px -10px #b93600, 60px -10px #b93600, 65px -10px #b93600, 70px -10px #b93600,  55px -15px #b93600, 60px -15px #b93600, 65px -15px #b93600,  55px -20px #b93600, 60px -20px #b93600, 65px -20px #b93600, 70px -20px #b93600,  55px -25px #b93600, 60px -25px #b93600, 70px -25px #b93600, 75px -25px #b93600,  55px -30px #b93600, 60px -30px #b93600, 70px -30px #b93600, 75px -30px #b93600,  55px -35px #b93600, 60px -35px #b93600, 65px -35px #b93600, 70px -35px #b93600, /*I*/ 85px 0px #b93600, 90px 0px #b93600, 85px -5px #b93600, 90px -5px #b93600, 85px -10px #b93600, 90px -10px #b93600, 85px -15px #b93600, 90px -15px #b93600, 85px -20px #b93600, 90px -20px #b93600, 85px -25px #b93600, 90px -25px #b93600, 85px -30px #b93600, 90px -30px #b93600, 85px -35px #b93600, 90px -35px #b93600, /*s*/ 105px 0px #b93600, 110px 0px #b93600, 100px -5px #b93600, 105px -5px #b93600, 110px -5px #b93600, 115px -5px #b93600, 100px -10px #b93600, 115px -10px #b93600, 115px -15px #b93600, 110px -15px #b93600, 110px -20px #b93600, 105px -20px #b93600, 100px -20px #b93600, 100px -25px #b93600, 100px -30px #b93600, 105px -30px #b93600, 110px -30px #b93600, 115px -30px #b93600, 105px -35px #b93600, 110px -35px #b93600, /*T*/ 130px 0px #b93600, 135px 0px #b93600, 130px -5px #b93600, 135px -5px #b93600, 130px -10px #b93600, 135px -10px #b93600, 130px -15px #b93600, 135px -15px #b93600, 130px -20px #b93600, 135px -20px #b93600, 130px -25px #b93600, 135px -25px #b93600, 125px -30px #b93600, 130px -30px #b93600, 135px -30px #b93600, 140px -30px #b93600, 125px -35px #b93600, 130px -35px #b93600, 135px -35px #b93600, 140px -35px #b93600, /*M*/ 150px 0px #b93600, 155px 0px #b93600, 175px 0px #b93600, 180px 0px #b93600, 150px -5px #b93600, 155px -5px #b93600, 175px -5px #b93600, 180px -5px #b93600, 150px -10px #b93600, 155px -10px #b93600, 175px -10px #b93600, 180px -10px #b93600, 150px -15px #b93600, 155px -15px #b93600, 175px -15px #b93600, 180px -15px #b93600, 150px -20px #b93600, 155px -20px #b93600, 165px -20px #b93600, 175px -20px #b93600, 180px -20px #b93600, 150px -25px #b93600, 155px -25px #b93600, 160px -25px #b93600, 165px -25px #b93600, 170px -25px #b93600, 175px -25px #b93600, 180px -25px #b93600, 150px -30px #b93600, 155px -30px #b93600, 160px -30px #b93600, 170px -30px #b93600, 175px -30px #b93600, 180px -30px #b93600, 150px -35px #b93600, 155px -35px #b93600, 175px -35px #b93600, 180px -35px #b93600, /*A*/ 190px 0px #b93600, 195px 0px #b93600, 205px 0px #b93600, 210px 0px #b93600,  190px -5px #b93600, 195px -5px #b93600, 200px -5px #b93600, 205px -5px #b93600, 210px -5px #b93600,  190px -10px #b93600, 195px -10px #b93600, 200px -10px #b93600, 205px -10px #b93600, 210px -10px #b93600,  190px -15px #b93600, 195px -15px #b93600, 205px -15px #b93600, 210px -15px #b93600,  190px -20px #b93600, 195px -20px #b93600, 205px -20px #b93600, 210px -20px #b93600,  190px -25px #b93600, 195px -25px #b93600, 200px -25px #b93600, 205px -25px #b93600, 210px -25px #b93600,  195px -30px #b93600, 200px -30px #b93600, 205px -30px #b93600,  200px -35px #b93600, /*S*/ 225px 0px #b93600, 230px 0px #b93600, 220px -5px #b93600, 225px -5px #b93600, 230px -5px #b93600, 235px -5px #b93600, 220px -10px #b93600, 235px -10px #b93600, 235px -15px #b93600, 230px -15px #b93600, 230px -20px #b93600, 225px -20px #b93600, 220px -20px #b93600, 220px -25px #b93600, 220px -30px #b93600, 225px -30px #b93600, 230px -30px #b93600, 235px -30px #b93600, 225px -35px #b93600, 230px -35px #b93600,  /*M*/  40px -45px #f0f526, 45px -45px #f0f526, 65px -45px #f0f526, 70px -45px #f0f526, 40px -50px #f0f526, 45px -50px #f0f526, 65px -50px #f0f526, 70px -50px #f0f526, 40px -55px #f0f526, 45px -55px #f0f526, 65px -55px #f0f526, 70px -55px #f0f526, 40px -60px #f0f526, 45px -60px #f0f526, 65px -60px #f0f526, 70px -60px #f0f526, 40px -65px #f0f526, 45px -65px #f0f526, 55px -65px #f0f526, 65px -65px #f0f526, 70px -65px #f0f526, 40px -70px #f0f526, 45px -70px #f0f526, 50px -70px #f0f526, 55px -70px #f0f526, 60px -70px #f0f526, 65px -70px #f0f526, 70px -70px #f0f526, 40px -75px #f0f526, 45px -75px #f0f526, 50px -75px #f0f526, 60px -75px #f0f526, 65px -75px #f0f526, 70px -75px #f0f526, 40px -80px #f0f526, 45px -80px #f0f526, 65px -80px #f0f526, 70px -80px #f0f526, /*E*/ 80px -45px #f0f526, 85px -45px #f0f526, 90px -45px #f0f526, 95px -45px #f0f526, 80px -50px #f0f526, 85px -50px #f0f526, 90px -50px #f0f526, 95px -50px #f0f526, 80px -55px #f0f526, 85px -55px #f0f526, 80px -60px #f0f526, 85px -60px #f0f526, 90px -60px #f0f526,  80px -65px #f0f526, 85px -65px #f0f526, 90px -65px #f0f526, 80px -70px #f0f526, 85px -70px #f0f526,  80px -75px #f0f526, 85px -75px #f0f526, 90px -75px #f0f526, 95px -75px #f0f526,  80px -80px #f0f526, 85px -80px #f0f526, 90px -80px #f0f526, 95px -80px #f0f526, /*R*/ 105px -45px #f0f526, 110px -45px #f0f526, 120px -45px #f0f526, 125px -45px #f0f526,  105px -50px #f0f526, 110px -50px #f0f526, 120px -50px #f0f526, 125px -50px #f0f526,  105px -55px #f0f526, 110px -55px #f0f526, 115px -55px #f0f526, 120px -55px #f0f526,  105px -60px #f0f526, 110px -60px #f0f526, 115px -60px #f0f526,  105px -65px #f0f526, 110px -65px #f0f526, 115px -65px #f0f526, 120px -65px #f0f526,  105px -70px #f0f526, 110px -70px #f0f526, 120px -70px #f0f526, 125px -70px #f0f526,  105px -75px #f0f526, 110px -75px #f0f526, 120px -75px #f0f526, 125px -75px #f0f526,  105px -80px #f0f526, 110px -80px #f0f526, 115px -80px #f0f526, 120px -80px #f0f526,  /*R*/ 135px -45px #f0f526, 140px -45px #f0f526, 150px -45px #f0f526, 155px -45px #f0f526,  135px -50px #f0f526, 140px -50px #f0f526, 150px -50px #f0f526, 155px -50px #f0f526,  135px -55px #f0f526, 140px -55px #f0f526, 145px -55px #f0f526, 150px -55px #f0f526,  135px -60px #f0f526, 140px -60px #f0f526, 145px -60px #f0f526,  135px -65px #f0f526, 140px -65px #f0f526, 145px -65px #f0f526, 150px -65px #f0f526,  135px -70px #f0f526, 140px -70px #f0f526, 150px -70px #f0f526, 155px -70px #f0f526,  135px -75px #f0f526, 140px -75px #f0f526, 150px -75px #f0f526, 155px -75px #f0f526,  135px -80px #f0f526, 140px -80px #f0f526, 145px -80px #f0f526, 150px -80px #f0f526, /*Y*/ 175px -45px #f0f526, 180px -45px #f0f526, 175px -50px #f0f526, 180px -50px #f0f526, 175px -55px #f0f526, 180px -55px #f0f526, 175px -60px #f0f526, 180px -60px #f0f526, 170px -65px #f0f526, 175px -65px #f0f526, 180px -65px #f0f526, 185px -65px #f0f526, 170px -70px #f0f526, 185px -70px #f0f526, 165px -75px #f0f526, 170px -75px #f0f526, 185px -75px #f0f526, 190px -75px #f0f526,  165px -80px #f0f526, 170px -80px #f0f526, 185px -80px #f0f526, 190px -80px #f0f526; opacity:1; animation:animateText 3s linear infinite}@keyframes animateText{ 0%{ opacity:.5 } 50%{ opacity:1 } 100%{ opacity:.5 }}

Schließen

Kompressionsergebnisse:

Originalgröße: 19331 Bytes
Komprimierte Größe: 14784 Bytes
Einsparung: 4547 Bytes (24 %)

Um die Ladezeit zu verkürzen und Bandbreite zu sparen. Sie haben die Wahl zwischen drei Komprimierungsstufen, je nachdem, wie wichtig Ihnen Lesbarkeit und Komprimierungsgrad sind.

Ich hoffe, ich konnte es richtig formulieren und erklären.

Ich entschuldige mich für die schlechte Aussprache.

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang und Dankeschön finden das Top!

Antworten

#15 | RE: Schneekugel mit Forum-Logo datum

07.12.2025 17:08

RE: Schneekugel mit Forum-Logo

Zitat von Dankeschön im Beitrag #13
Zitat von Wolfgang im Beitrag #12
Die Ultrastark komprimierte Version kann bis zu einem Drittel kleiner sein und erhöht somit die Ladezeiten!

Moment: Erhöht = verschlechtert? Oder senkt = verbessert?

Mmh, da hatte ich mich einfach verschrieben, wie Ihr bereits gemerkt habt.
Daishi hat es noch genauer erklärt.
Ich schau mal, was ich hier im Forum machen kann!
So, dass man noch alles finden kann und die Übersicht behält!

Bis dann
Wolfgang

Daishi und Dankeschön finden das Top!

Antworten

#16 | RE: Schneekugel mit Forum-Logo - Geschüttelt! datum

08.12.2025 01:17

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

RE: Schneekugel mit Forum-Logo - Geschüttelt!

Zitat von Daishi im Beitrag #11
Hallo Arndt

Habe mal deine Idee und Inspiration umgesetzt, leider bekomme ich sie nicht im Xobor Forum zum Laufen....
Ich frage Wolfgang .........

Hier mal das Script:
.......

Hallo DaishiDeine Schneekugel fand ich am Anfang nicht besonders ansprechend.
Dann habe ich mir das JavaScript angeschaut und mich gefragt, was für Funktionen da wohl versteckt waren!
Deine tolle Glaskugel hat 4 Funktionen, super!

Aber am Design müsste man unbedingt etwas machen (Sockel)!

Bei mir lief die Glaskugel ohne große Probleme, habe aber trotzdem die Classes erweitert!
Die Größe der Glaskugel kann über eine Einstellung bestimmt werden, alle anderen Werte ziehen mit Hilfe von "VAR" in der CSS nach!
Habe den Zähler, und den Text, wie oft man geklickt hat, herausgenommen und durch ein Tooltipp ersetzt (Bitte mehrmals anklicken! )!

Habe das Skript, hier im Forum in der Fußleiste ausprobiert, funktioniert bestens!

1. FunktionIm Ruhezustand, wenn man nichts macht, schneit es ganz normal!

2. FunktionNach jeden Klick ruckelt die Glaskugel. Nach einem zweiten Klick auf das LOGO (einstellbar), erscheint ein Tannenbaum im Vordergrund!

3. FunktionNach jeden Klick ruckelt die Glaskugel. Nach weiteren drei Klicks auf das LOGO (einstellbar), tritt das LOGO in den Vordergrund und dreht sich!

4. FunktionNach jeden Klick ruckelt die Glaskugel. Klickt man sehr schnell auf das LOGO, gibt es einen Schneesturm! Grandios!

Installation für alle Templates / Mobil

Der Text zur inneren Grafik

Das komplette Skript kann der Einfachheit wegen für die Template (v1-4) in die Kopf- oder Fußzeile, für das neue Xobor V6 & Mobil nach Eigenes Javascript kopiert werden.
Das Skript kann auch für alle Templates & Mobil als Plugin unter "Untere Leiste - Header" angelegt werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick !

In Zeile 3 kann die Größe der Schneekugel bestimmt werden!
In Zeile 41+42 sind die Grafiken für das "LOGO" und für den Tannenbaum eingetragen.
In Zeile 59 + 62 können die Anzahl der Klicks für den Tannenbaum und für das rotierende LOGO bestimmt werden!

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
 
<style>
.Schneekugel-wrapper { 
  --globe-size: 300px; /* 200px - 800px */
}
.Schneekugel-wrapper{position:relative;display:flex;width:100%;height: auto;justify-content:center;align-content:center;}
.Schneekugel-count-message,.Schneekugel-secret-message{position:absolute;text-align:center}
.Schneekugel-container{position:relative;text-align:center;width:var(--globe-size);height:var(--globe-size);z-index:0}
.Schneekugel-main-circle{position:absolute;top:25%;left:25%;z-index:5;width:calc(var(--globe-size)/2);height:calc( var(--globe-size) / 2);border-radius:100%;background:#1E4C69;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.Schneekugel-glass-circle{position:absolute;top:25%;left:25%;z-index:15;width:calc(var(--globe-size)/2);height:calc( var(--globe-size) / 2);border-radius:100%;background:rgba(255,255,255,.5);cursor:pointer;box-shadow:inset 0 0 15px #fff}
.Schneekugel-base{z-index:1;position:absolute;top:60%;left:25%;border-bottom:calc(var(--globe-size)/4) solid #cf4848;border-left:calc(var(--globe-size)/8) solid transparent;border-right:calc(var(--globe-size)/8) solid transparent;border-radius:100%;height:0;width:calc(var(--globe-size)/4);cursor:pointer;transition:.5s;}
.Schneekugel-base-shadow{box-shadow:0 10px 10px rgba(0,0,0,.4)}
.Schneekugel-scene-container{width:100%;height:100%}
.Schneekugel-base-cutoff{z-index:2;position:absolute;bottom:0;left:calc(var(--globe-size)/11.11);width:calc(var(--globe-size)/3.1);height:calc(var(--globe-size)/8);background:rgba(255,212,212,.5);border-radius:50%;box-shadow:0 5px 5px rgba(0,0,0,.2)}
.Schneekugel-inner-img{z-index:5;width:75%;height:50%;border-radius:100%;position:absolute;left:calc(var(--globe-size)/16);bottom:calc(var(--globe-size)/8);transition:1s}
.Schneekugel-Baum-img{opacity:0;z-index:4;width:45%;height:55%;border-radius:100%;position:absolute;right:calc(var(--globe-size)/20);bottom:calc(var(--globe-size)/10);transition:1s}
.Schneekugel-Baum-img-show{opacity:1}
.Schneekugel-shaker{animation:SchneekugelSchütteln .5s infinite}
.Schneekugel-spin{transform:rotate(360deg)}
.Schnee-container{opacity:.2;z-index:9;text-align:center;position:absolute;top:0;width:100%;height:100%;border-radius:100%;transition:.5s ease-out}
.Schnee-container-show{opacity:1}
.Schnee1,.Schnee2{background:url(https://files.homepagemodules.de/b916726/a_4_1e7d9465.png) repeat center;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;z-index:9}
.Schnee1{background-size:calc(var(--globe-size)/2);animation:SchneeOne 10s linear infinite}
.Schnee2{background-size:var(--globe-size);animation:SchneeTwo 10s linear infinite}
 
@keyframes SchneeOne{0%{background-position:0 0}100%{background-position:var(--globe-size) calc(var(--globe-size)*3.75)}}
@keyframes SchneeTwo{0%{background-position:0 calc(-1*var(--globe-size))}100%{background-position:0 calc(var(--globe-size)*3.75)}}
 
@keyframes SchneekugelSchütteln{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}
</style>
 

<div class="Schneekugel-wrapper" title="Bitte mehrmals anklicken!">
  <div id="Schneekugel" class="Schneekugel-container">
    <div class="Schneekugel-glass-circle"></div>
    <div class="Schneekugel-main-circle">
      <div class="Schneekugel-scene-container">
        <div id="SchneeContainer" class="Schnee-container">
          <div class="Schnee1"></div>
          <div class="Schnee2"></div>
        </div>
        <img id="SchneekugelImg" class="Schneekugel-inner-img" src="https://files.homepagemodules.de/b104774/avatar-b64e7106-995.gif"/>
        <img id="BaumImg" class="Schneekugel-Baum-img" src="https://files.homepagemodules.de/b916726/a_5_dc061ef1.png"/>
      </div>
      <div class="Schneekugel-base-cutoff"></div>
    </div>
    <div id="SchneekugelBase" class="Schneekugel-base"></div>
  </div>
</div>
 

<script>
document.addEventListener('DOMContentLoaded', function() { 
  let shakeCount = 0, interval = 0; $("#Schneekugel").on("click", function() { shakeCount++; interval++;
 
    // Schneefall + Schütteln
    $("#SchneeContainer").addClass("Schnee-container-show"); $("#Schneekugel").addClass("Schneekugel-shaker"); $("#SchneekugelBase").addClass("Schneekugel-base-shadow"); setTimeout(function() { $("#Schneekugel").removeClass("Schneekugel-shaker"); $("#SchneeContainer").removeClass("Schnee-container-show");$("#SchneekugelBase").removeClass("Schneekugel-base-shadow"); }, 1000);
 
    // Baum nach 2 Klicks sichtbar machen
    if (shakeCount >= 2) {$("#BaumImg").addClass("Schneekugel-Baum-img-show").css("z-index", 20);}
 
    // Logo nach 5 Klicks drehen und in den Vordergrund holen
    if (shakeCount >= 5) {$("#SchneekugelImg").addClass("Schneekugel-spin").css("z-index", 25); setTimeout(function() {$("#SchneekugelImg").removeClass("Schneekugel-spin");}, 1000); }
  });
});
</script>
 
 

Schließen

Bis dann und besten Dank für die interessante Glaskugel
Gruß
Wolfgang

Kipper-Spedition, Dankeschön und Daishi finden das Top!

Antworten

#17 | RE: Schneekugel mit Forum-Logo - Geschüttelt! datum

11.12.2025 18:05 (zuletzt bearbeitet: 12.12.2025 00:30)

Wenn mann ein s.g. Glasbild nimmt, dann kann man fast alles weglassen.
Bild: //files.homepagemodules.de/b610439/a_1570_a92bb702.jpg
(PS: lizenzfrei / frei verfügbar unter Pixabay)

Bild: //files.homepagemodules.de/b610439/a_1572_b3f75872.png
(PS: lizenzfrei / frei verfügbar unter Pixabay)

Mit dem Schneefall sieht das richtig edel aus.
Noch mit Photoshop eine gebogene Schrift oder ein "geformtes" Logo in die Kugel mit rein, dann kann Weihnachten werden!

Speziell für Wolfgang

Bild: //files.homepagemodules.de/b610439/a_1575_8324620e.png
(PS: lizenzfrei / erstellt mit KI und Canva)

Im Skript muss das auskommentiert werden, ansonsten ist der "Logo-Kreis" zu sehen.

/*.KugelLogo {border-radius: var(--LogoEcken); background-size: contain; position:absolute;height:50%; width:50%;top:50%;left:50%;transform:translate(-50%,-50%); box-shadow:0 0 12px rgba(255,255,255,.8); box-shadow:0 0 12px rgba(255,255,255,.8); padding:5px; background: var(--LogoBild) center/contain no-repeat;} */

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

Wolfgang, Hans58, Dankeschön und Anne finden das Top!

Antworten

Wie findet man neue Sprach-Variablen nach Template-Update? » « Like-Button / Bedanken-Funktion ändern

Seite 2 von 2 « Seite 1 2 Seite »

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

Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! » Schneekugel

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 €

41%

Schneekugel mit Forum-Logo

RE: Schneekugel mit Forum-Logo

RE: Schneekugel mit Forum-Logo - Geschüttelt!

In Ruhe - Es schneit ×

2x klicken - Tannenbaum ×

5x klicken - LOGO dreht ×