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

#1 | Schneekugel datum

28.11.2023 10:49 (zuletzt bearbeitet: 28.11.2023 11:00)

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

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

All die schöne Arbeit für nichts ** Heul ** ** Schluchts ** Ich werde daraus nicht schlau, habe mir echt so viel Mühe gegeben, und meine wenige Zeit hier hineingesteckt und es funktioniert nicht, es zeigt nicht richtig an.

Es war auch nochmal zum verschönern der Beiträge, da ich ja gestern und heute Morgen in der Frühe Schnee geschaufelt habe, sah ich diese schöne Schneekugel. Habe sie versucht nachzubauen und ist mir so weit gelungen, bin überglücklich, dass ich es geschafft habe, ist auch wieder in reiner CSS geschrieben.

Als Hintergrund habe ich weihnachtliche Stimmungsfarbe genommen, rot und grün. Kann man aber deaktivieren, das geht dann so rot und grün mit Komma markieren und dann none hineinschreiben.

Also so:

1
 
 --color-background: radial-gradient(at 50% 80%, red, green);

In:

1
 
--color-background: radial-gradient(at 50% 80%, none);

Wie immer normal in der Iconbar

Forencode Z.B.

1
 
[schneekugel]

Dann der HTML - Code

Dann die CSS in die CSS

Ich habe es getestet, aber ich drehe noch durch, bekomme es nicht sauber angezeigt, ich weiß jetzt nicht, ob es an meine Classes liegt oder ich habe wieder einen Mords-Fehler eingebaut, den ich so jetzt nicht sehe.

Ich möchte mich wirklich entschuldigen, würde gerne mehr Zeit investieren. Ich habe so viele Ideen und Inspirationen, aber das Telefon und Whatsapp klingelt und ich muss wieder los Schnee schippen.

Wollte diese schöne Arbeit euch allen mal zeigen. In CodePen läuft sie sauber und fehlerfrei, nur bekomme ich es im Xobor Forum nicht hin, mir fehlt wirklich die richtige Zeit dafür.

Hier wie es ausschaut:

schneekugel!

Und hier mal der Ganze Code für die Schneekugel:

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
 
<style>
:root {
  --color-background: radial-gradient(at 50% 80%, red, green);
  --color-base: #000;
  --color-wand-light: #99462c;
  --color-wand-dark: #662c1b;
   
  --schneekugel-size: 50vh;
  --schneekugel-inner-size: calc(var(--schneekugel-size) / 1.03);
  --schneekugel-glass-width: calc(calc(var(--schneekugel-size) - var(--schneekugel-inner-size)));
  --schneekugel-color: #FFF5;
  
  --flocke-size: 1vh;
}
 
html,
body {
  height: 100%;
}
 
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--color-background);
  overflow: hidden;
}
 
.schneekugel {
  position: absolute;
  display: flex;
  justify-content: center;
  width: var(--schneekugel-size);
  height: var(--schneekugel-size);
  border: calc(var(--schneekugel-size) / 100) solid var(--schneekugel-color);
  border-radius: 50%;
  overflow: hidden;
  box-schatten: inset 0 0 calc(var(--schneekugel-size) / 6) var(--schneekugel-color);
}
 
.sockel {
  position: absolute;
  background: var(--color-base);
  border-radius: 100% / 40%;
}
 
.sockel.hinten,
.sockel.vorderseite {
  width: calc(var(--schneekugel-size) * 0.75);
  height: calc(var(--schneekugel-size) * 0.4);
  translate: 0 calc(var(--schneekugel-size) * 0.5);  
}
 
.sockel.vorderseite {
  mask: radial-gradient(100% 50% at 50% 12%, #0000 50%, #000 51%);
  -webkit-mask: radial-gradient(100% 50% at 50% 12%, #0000 50%, #000 51%);
}
 
.sockel.unten {
  width: calc(var(--schneekugel-size) * 0.85);
  height: calc(var(--schneekugel-size) * 0.2);
  translate: 0 calc(var(--schneekugel-size) * 0.6);
  border-radius: 80% / 50%;
}
 
.sockel .glanz {
  position: absolute;
  width: calc(var(--schneekugel-size) * 0.68);
  height: 8vh;
  background: linear-gradient(to right, #000 0%, #FFF6 6%, #FFF1 50%, #000 65%);
  border-radius: 100% / 50%;
  -webkit-mask: radial-gradient(120% 105% at 50% 35%, #0000 50%, #000 51%);
  mask: radial-gradient(120% 105% at 50% 35%, #0000 50%, #000 51%);
}
 
.sockel.vorderseite .glanz {
  translate: 1vh 0.6vh;
}
 
.sockel.unten .glanz {
  translate: 1vh -2vh;
}
 
.schatten {
  width: calc(var(--schneekugel-size) * 1.8);
  height: 10vh;
  background: radial-gradient(farthest-side, #0007, #0000);
  border-radius: 50%;
  translate: 5vh calc(var(--schneekugel-size) * 0.65);
}
 
.schneekugel .glanz {
  position: absolute;
  width: calc(var(--schneekugel-size) / 3);
  height: calc(var(--schneekugel-size) / 7);
  background: linear-gradient(to right, #FFF6, #FFF1);
  border-radius: 50%;
  rotate: -36deg;
  translate: -11vh 6vh;
}
 
.schneekugel .schnee-schicht-oberflaeche {
  position: absolute;
  translate: 0 calc(var(--schneekugel-size) / 1.55);
  width: calc(var(--schneekugel-size) / 1.175);
  height: calc(var(--schneekugel-size) / 6);
  border-radius: 50%;
  background: radial-gradient(ellipse at bottom, #FFF, #AAA);
}
 
.schneekugel .schnee-schicht {
  position: absolute;
  width: var(--schneekugel-inner-size);
  height: var(--schneekugel-inner-size);
  border-radius: 50%;
  background: #FFF;
  translate: 0 calc(var(--schneekugel-glass-width) / 2);
  clip-path: inset(calc(var(--schneekugel-size) / 1.375) 0 0 0);
  box-schatten: inset 0 0 calc(var(--schneekugel-size) / 5) #000;
}
 
.schneekugel .flocke {
  --abs: max(var(--i), -1 * var(--i));
  --x: calc(var(--schneekugel-size) / 18 * var(--i));
  background: white;
  border-radius: 50%;
  width: var(--flocke-size);
  height: var(--flocke-size);
  translate: var(--x) calc(var(--flocke-size) * -1);
  animation: schneeflocken-fall calc(3s * var(--abs)) infinite ease-in;
  animation-delay: calc(var(--i) * 2s);
}
 
.tannenbaum {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -10vh 16vh;
}
 
.tannenbaum .fuellung {
  width: var(--width);
  height: var(--height);
  clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--tilt)) 0, var(--tilt) 0);
  background: linear-gradient(to top, #061 50%, #040);
}
 
.tannenbaum .fuellung.spitze {
  --width: 8vh;
  --tilt: calc(var(--width) / 2);
  --height: 5vh;
}
 
.tannenbaum .fuellung.mitte {
  --width: 12vh;
  --tilt: 4vh;
  --height: 6vh;
}
 
.tannenbaum .fuellung.unten {
  --width: 14vh;
  --tilt: 3vh;
  --height: 8vh;
}
 
.haus {
  position: absolute;
  translate: calc(var(--schneekugel-size) / 8 * -1) calc(var(--schneekugel-size) / 2);
}
 
.haus .wand {
  position: inherit;
  height: calc(var(--schneekugel-size) / 7);
  translate: var(--translate-x) calc(var(--schneekugel-size) / 12);
}
 
.haus .wand.vorderseite {
  --translate-x: 0;
  width: calc(var(--schneekugel-size) / 5);
  background: var(--color-wand-light);
  overflow: hidden;
}
 
.haus .wand.seite {
  --translate-x: 0;
  width: calc(var(--schneekugel-size) / 2.2);
  background: var(--color-wand-dark);
}
 
.haus .dach {
  position: inherit;
  height: calc(var(--schneekugel-size) / 5.5);
  translate: var(--translate-x) calc(var(--schneekugel-size) / 12 * -1);
}
 
.haus .dach.rechts {
  --translate-x: calc(var(--schneekugel-size) / 9.5);
  width: calc(var(--schneekugel-size) / 3);
  transform: skew(30deg);
  background: radial-gradient(ellipse at bottom, #EEE 30%, #AAA 100%);
}
 
.haus .dach.links {
  --translate-x: calc(var(--schneekugel-size) / 40 * -0.5);
  width: calc(var(--schneekugel-size) / 4);
  transform: skew(-30deg);
  background: linear-gradient(to bottom, #000A, #0000),
    linear-gradient(to right, 
    #AAA 0%, #AAA 8%, 
    var(--color-wand-dark) 8%, var(--color-wand-dark) 25%, 
    var(--color-wand-light) 25%, var(--color-wand-light) 100%);
}
 
.haus .dach.top.wand {
  --translate-x: calc(var(--schneekugel-size) / 20);
  background: #99462c;
  width: calc(var(--schneekugel-size) / 4.5);
}
 
.haus .fenster {
  position: inherit;
  border: calc(var(--schneekugel-size) / 200) solid #99462c;
  background: linear-gradient(to right, 
  #f9c76e 0%, #f9c76e 48%, #99462c 48%, #99462c 52%, #f9c76e 52%, #f9c76e 100%);;
  width: calc(var(--schneekugel-size) / 12);
  height: calc(var(--schneekugel-size) / 16);
  translate: calc(var(--schneekugel-size) / 3.5) calc(var(--schneekugel-size) / 24);
}
 
.haus .tuere {
  position: inherit;
  border: calc(var(--schneekugel-size) / 200) solid #662c1b;
  background: linear-gradient(to bottom, 
  #f9c76e 0%, #f9c76e 22%, #662c1b 22%, #662c1b 26%, #f9c76e 26%, #f9c76e 100%);;
  width: calc(var(--schneekugel-size) / 19);
  height: calc(var(--schneekugel-size) / 10);
  translate: calc(var(--schneekugel-size) / 18) calc(var(--schneekugel-size) / 30);
}
 
@keyframes schneeflocken-fall {
  0%, 90% {
    opacity: 1;
  }
  
  90%, 100% {
    translate: var(--x) calc(var(--schneekugel-size) / 1.4);
  }
  
  100% {
    opacity: 0;
  }
}  
</style>
 
<div class="schatten"></div>
  <div class="sockel hinten"></div>
  <div class="schneekugel">
   <div class="schnee-schicht"></div>
   <div class="schnee-schicht-oberflaeche"></div>
   <div class="tannenbaum">
     <div class="fuellung spitze"></div>
     <div class="fuellung mitte"></div>
     <div class="fuellung unten"></div>
   </div>
   <div class="haus">
     <div class="wand seite">
        <div class="fenster"></div>
     </div>
     <div class="wand vorderseite">
        <div class="tuere"></div>
     </div>
     <div class="dach links"></div>
     <div class="dach rechts"></div>
    </div>
    <div class="flocke" style="--i: -9"></div>
    <div class="flocke" style="--i: -8"></div>
    <div class="flocke" style="--i: -7"></div>
    <div class="flocke" style="--i: -6"></div>
    <div class="flocke" style="--i: -5"></div>
    <div class="flocke" style="--i: -4"></div>
    <div class="flocke" style="--i: -3"></div>
    <div class="flocke" style="--i: -2"></div>
    <div class="flocke" style="--i: -1"></div>
    <div class="flocke" style="--i: 1"></div>
    <div class="flocke" style="--i: 2"></div>
    <div class="flocke" style="--i: 3"></div>
    <div class="flocke" style="--i: 4"></div>
    <div class="flocke" style="--i: 5"></div>
    <div class="flocke" style="--i: 6"></div>
    <div class="flocke" style="--i: 7"></div>
    <div class="flocke" style="--i: 8"></div>
    <div class="flocke" style="--i: 9"></div>
    <div class="glanz"></div>
  </div>
  <div class="sockel vorderseite">
    <div class="glanz"></div>
  </div>
  <div class="sockel unten">
    <div class="glanz"></div>    
  </div>
 
 

Schließen

Ich möchte mich von ganzen Herzen entschuldigen, dass ich es nicht hinbekommen habe, aus Zeitgründen und die Zeit die mir jetzt fehlt, aber ich zeige euch gerne meine Ideen und Inspirationen.

Ich muss jetzt leider wieder los die Kunden melden sich und rufen an wann ich komme. Ich entschuldige mich wirklich von Herzen, dachte mir nur die Idee und inspiration kommt hier bei euch gut an.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | Schneekugel fürs Forum datum

22.12.2023 08:53 (zuletzt bearbeitet: 30.12.2023 00:48)

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 fürs Forum

Aktualisiert 30.11.2025

Hallo Daishi,
die Zeit rennt so dahin und die Ideen zur Weihnachtszeit bleiben nicht aus, sind wie ein schönes Füllhorn....

Wenn man sich anschaut, was es so für animierte Gifs gibt .....

Als GIF-Animation

Bildadresse: https://files.homepagemodules.de/b104774/a_675_3ff5f34a.gif

Hier kommt die Umsetzung der Schneekugel, damit sie auch im Forum funktioniert und gut aussieht.
Es ist mal wieder interessant, was man mit der CSS alles machen kann!
Klasse ist auch, dass man mit einer Eintragung die Größe der gesamten Kugel verändert und die anderen Einstellungen ziehen automatisch nach!
Die Größe der CSS ist allerdings beachtlich!
Ich finde, dass man sich aus der CSS wertvolle Einstellungen und Funktionen herausziehen und sie für andere Effekte gut nutzen kann !

Was habe ich gemacht?

Habe geschaut, ob man die Einträge "body und html " weglassen oder in anderen Tags unterbringen kann!
Habe einige Einträge korrigiert, damit die Schneekugel in den unterschiedlichen Größen auch gut aussieht!
Habe der Schneekugel noch eine kleine Überschrift mit Nara's Glitzer-Effekt spendiert!

Über Zeile 8 kann die Schneekugel auf eine beliebigen Größe eingestellt werden!
Über Zeile 3-6 können die Farben dem Forum angepasst werden!
Zeile 3 bestimmt die Hintergrundfarbe der Schneekugel! Wird sie gelöscht, scheint die Hintergrundfarbe des Forums durch!
Die Schneekugel kann in die Kopf- oder Fußzeile, aber auch gut in einer Portal-Box eingebaut 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
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
 
<style>
:root {
 --color-background: radial-gradient(at 50% 60%,  #ffff00, #ff0000, #ffaaaa); 
 --color-base: #000;
  --color-wand-light: #99462c;
  --color-wand-dark: #662c1b;
   
  --schneekugel-size: 12vh;
  --schneekugel-inner-size: calc(var(--schneekugel-size) / 1.03);
  --schneekugel-glass-width: calc(calc(var(--schneekugel-size) - var(--schneekugel-inner-size)));
  --schneekugel-color: #FFF5;
  
  --flocke-size: calc(var(--schneekugel-size) / 44);
}
 
.schneekugel_body {
  height: calc(var(--schneekugel-size)*1.5);
  width: calc(var(--schneekugel-size)*1.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  background: var(--color-background);
  overflow: hidden;
  bborder-radius: 5px;
  bborder: 1px solid #cccccc;
}
 
.schneekugel {
  position: absolute;
  display: flex;
  justify-content: center;
  width: var(--schneekugel-size);
  height: var(--schneekugel-size);
  border: calc(var(--schneekugel-size) / 100) solid var(--schneekugel-color);
  border-radius: 50%;
  overflow: hidden;
  box-schatten: inset 0 0 calc(var(--schneekugel-size) / 6) var(--schneekugel-color);
}
 
.sockel {
  position: absolute;
  background: var(--color-base);
  border-radius: 100% / 40%;
}
 
.sockel.hinten, .sockel.vorderseite {
  width: calc(var(--schneekugel-size) * 0.75);
  height: calc(var(--schneekugel-size) * 0.4);
  translate: 0 calc(var(--schneekugel-size) * 0.5);  
}
 
.sockel.vorderseite {
  mask: radial-gradient(100% 50% at 50% 12%, #0000 50%, #000 51%);
  -webkit-mask: radial-gradient(100% 50% at 50% 12%, #0000 50%, #000 51%);
}
 
.sockel.unten {
  width: calc(var(--schneekugel-size) * 0.85);
  height: calc(var(--schneekugel-size) * 0.2);
  translate: 0 calc(var(--schneekugel-size) * 0.6);
  border-radius: 80% / 50%;
}
 
.sockel .glanz {
  position: absolute;
  width: calc(var(--schneekugel-size) * 0.78);
  height: calc(var(--schneekugel-size) / 9);
  background: linear-gradient(to right, #000 0%, #FFF6 6%, #FFF1 50%, #000 65%);
  border-radius: 100% / 50%;
  -webkit-mask: radial-gradient(120% 105% at 50% 35%, #0000 50%, #000 51%);
  mask: radial-gradient(130% 105% at 60% 35%, #0000 50%, #000 51%);
}
 
.sockel.vorderseite .glanz {
  translate: 1vh 2vh;
}
 
.sockel.unten .glanz {
  translate: 1vh 0vh;
}
 
.schneekugel_body .schatten {
  width: calc(var(--schneekugel-size) * 1.8);
  height: 10vh;
  background: radial-gradient(farthest-side, #0007, #0000);
  border-radius: 50%;
  translate: 5vh calc(var(--schneekugel-size) * 0.65);
}
 
.schneekugel .glanz {
  position: absolute;
  width: calc(var(--schneekugel-size) / 3);
  height: calc(var(--schneekugel-size) / 7);
  background: linear-gradient(to right, #FFF6, #FFF1);
  border-radius: 50%;
  rotate: -36deg;
  translate: calc(var(--schneekugel-size)/-4.0) calc(var(--schneekugel-size)/7.3); 
}
 
.schneekugel .schnee-schicht-oberflaeche {
  position: absolute;
  translate: 0 calc(var(--schneekugel-size) / 1.55);
  width: calc(var(--schneekugel-size) / 1.175);
  height: calc(var(--schneekugel-size) / 6);
  border-radius: 50%;
  background: radial-gradient(ellipse at bottom, #FFF, #AAA);
}
 
.schneekugel .schnee-schicht {
  position: absolute;
  width: var(--schneekugel-inner-size);
  height: var(--schneekugel-inner-size);
  border-radius: 50%;
  background: #FFF;
  translate: 0 calc(var(--schneekugel-glass-width) / 2);
  clip-path: inset(calc(var(--schneekugel-size) / 1.375) 0 0 0);
  box-schatten: inset 0 0 calc(var(--schneekugel-size) / 5) #000;
}
 
.schneekugel .flocke {
  --abs: max(var(--i), -1 * var(--i));
  --x: calc(var(--schneekugel-size) / 18 * var(--i));
  background: white;
  border-radius: 50%;
  width: var(--flocke-size);
  height: var(--flocke-size);
  translate: var(--x) calc(var(--flocke-size) * -1);
  animation: schneeflocken-fall calc(3s * var(--abs)) infinite ease-in;
  animation-delay: calc(var(--i) * 2s);
}
 
.tannenbaum {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: calc(var(--schneekugel-size)/-5.4) calc(var(--schneekugel-size)/3.1); 
}
 
.tannenbaum .fuellung {
  width: var(--width);
  height: var(--height);
  clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--tilt)) 0, var(--tilt) 0);
  background: linear-gradient(to top, #061 50%, #040);
}
 
.tannenbaum .fuellung.spitze {
  --width: calc(var(--schneekugel-size)/6.5);
  --tilt: calc(var(--width) / 2.0);
  --height: calc(var(--schneekugel-size)/9.8);
}
 
.tannenbaum .fuellung.mitte {
 --width: calc(var(--schneekugel-size)/4.7);
 --tilt: calc(var(--width) / 3.0);
 --height: calc(var(--schneekugel-size)/8.3);
}
 
.tannenbaum .fuellung.unten {
 --width: calc(var(--schneekugel-size)/4.1);
 --tilt: calc(var(--width) / 4);
 --height: calc(var(--schneekugel-size)/6.5);
}
 
.haus {
  position: absolute;
  translate: calc(var(--schneekugel-size) / 8 * -1) calc(var(--schneekugel-size) / 2);
}
 
.haus .wand {
  position: inherit;
  border-radius:5%;
  height: calc(var(--schneekugel-size) / 7);
  translate: var(--translate-x) calc(var(--schneekugel-size) / 12);
}
 
.haus .wand.vorderseite {
  --translate-x: 0;
  width: calc(var(--schneekugel-size) / 5);
  background: var(--color-wand-light);
  overflow: hidden;
}
 
.haus .wand.seite {
  --translate-x: 0;
  width: calc(var(--schneekugel-size) / 2.2);
  background: var(--color-wand-dark);
}
 
.haus .dach {
  position: inherit;
  border-radius:5%;
  height: calc(var(--schneekugel-size) / 5.1);
  translate: var(--translate-x) calc(var(--schneekugel-size) / 11 * -1);
}
 
.haus .dach.rechts {
  --translate-x: calc(var(--schneekugel-size) / 9.5);
  width: calc(var(--schneekugel-size) / 3);
  transform: skew(30deg);
  background: radial-gradient(ellipse at bottom, #EEE 30%, #AAA 100%);
}
 
.haus .dach.links {
  --translate-x: calc(var(--schneekugel-size) / 40 * -0.5);
  width: calc(var(--schneekugel-size) / 4);
  transform: skew(-30deg);
  background: linear-gradient(to bottom, #000A, #0000),
    linear-gradient(to right, 
    #AAA 0%, #AAA 8%, 
    var(--color-wand-dark) 8%, var(--color-wand-dark) 25%, 
    var(--color-wand-light) 25%, var(--color-wand-light) 100%);
}
 
.haus .dach.top.wand {
  --translate-x: calc(var(--schneekugel-size) / 20);
  background: #99462c;
  width: calc(var(--schneekugel-size) / 4.5);
}
 
.haus .fenster {  
  position: inherit;
  border: calc(var(--schneekugel-size) / 200) solid #99462c;
  border-radius:10%;
  background: linear-gradient(to right, 
  #f9c76e 0%, #f9c76e 48%, #99462c 48%, #99462c 52%, #f9c76e 52%, #f9c76e 100%);;
  width: calc(var(--schneekugel-size) / 12);
  height: calc(var(--schneekugel-size) / 16);
  translate: calc(var(--schneekugel-size) / 3.5) calc(var(--schneekugel-size) / 24);
}
 
.haus .tuere {  
  position: inherit;
  border: calc(var(--schneekugel-size) / 200) solid #662c1b;
  border-radius:10%;
  background: linear-gradient(to bottom, #f9c76e 0%, #f9c76e 22%, #662c1b 22%, #662c1b 26%, #f9c76e 26%, #f9c76e 100%);;
  width: calc(var(--schneekugel-size) / 19);
  height: calc(var(--schneekugel-size) / 10);
  translate: calc(var(--schneekugel-size) / 18) calc(var(--schneekugel-size) / 30);
}
 
@keyframes schneeflocken-fall {
  0%, 90% {
    opacity: 1;
  }
  
  90%, 100% {
    translate: var(--x) calc(var(--schneekugel-size) / 1.4);
  }
  
  100% {
    opacity: 0;
  }
} 
 
.schneekugel_titel {
  font-size: 16px !important;
  text-transform: uppercase;
  font-family: VERDANA,ARIAL,HELVETICA;
  text-align:center;
  background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
  color: #fff;
  padding: 5px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #ff3d37;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgb(64, 61, 55);
}
</style>
 
<center>
<div class="schneekugel_titel">Ein schönes Weihnachtsfest</div>
<div class="schneekugel_body">
  <div class="schatten"></div>
  <div class="sockel hinten"></div>
  <div class="schneekugel">
    <div class="schnee-schicht"></div>
    <div class="schnee-schicht-oberflaeche"></div>
    <div class="tannenbaum">
      <div class="fuellung spitze"></div>
      <div class="fuellung mitte"></div>
      <div class="fuellung unten"></div>
    </div>
    <div class="haus">
      <div class="wand seite">
        <div class="fenster"></div>
      </div>
      <div class="wand vorderseite">
        <div class="tuere"></div>
      </div>
      <div class="dach links"></div>
      <div class="dach rechts"></div>
    </div>
    <div class="flocke" style="--i: -9"></div>
    <div class="flocke" style="--i: -8"></div>
    <div class="flocke" style="--i: -7"></div>
    <div class="flocke" style="--i: -6"></div>
    <div class="flocke" style="--i: -5"></div>
    <div class="flocke" style="--i: -4"></div>
    <div class="flocke" style="--i: -3"></div>
    <div class="flocke" style="--i: -2"></div>
    <div class="flocke" style="--i: -1"></div>
    <div class="flocke" style="--i: 1"></div>
    <div class="flocke" style="--i: 2"></div>
    <div class="flocke" style="--i: 3"></div>
    <div class="flocke" style="--i: 4"></div>
    <div class="flocke" style="--i: 5"></div>
    <div class="flocke" style="--i: 6"></div>
    <div class="flocke" style="--i: 7"></div>
    <div class="flocke" style="--i: 8"></div>
    <div class="flocke" style="--i: 9"></div>
    <div class="glanz"></div>
  </div>
  <div class="sockel vorderseite">
    <div class="glanz"></div>
  </div>
  <div class="sockel unten">
    <div class="glanz"></div>    
  </div>
</div>
</center>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann und nochmal besten Dank!
Wolfgang

Daishi, Gabriella, Dankeschön und Gerhard finden das Top!

Antworten

Moderations-Kommentar:

Tannenbaum, Glanz der Kugel, Größe der Schneeflocken und die Ecken vom Haus passen sich jetzt auch an die Größe der Schneekugel an!
Fehlerbehebung: Classes ".schatten" erweitert. Hat sich nicht mit den Textfeldern vertragen.

#3 | RE: Schneekugel datum

22.12.2023 10:43 (zuletzt bearbeitet: 22.12.2023 19:08)

Super Arbeit Dankeschön für die Umsetzung, dass es im Forum funktioniert.

Habe es installiert und es funktioniert 1 A.

Ich spreche hier mal ein sehr großes Lob aus, für deine unermüdliche Arbeit, Ideenreichfalt, und dass du immer da bist egal zu welcher Zeit. Stehst, wenn du kannst, immer zur Seite.

Ich bedanke mich recht herzlich für alle Umsetzungen, die du für die Foren gemacht hast, und dass sie wundervoll funktionieren.

Hoffe, ich habe es gut und verständlich formuliert.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#4 | Update: Schneekugel datum

26.12.2023 10:26 (zuletzt bearbeitet: 30.12.2023 00:49)

Update: Schneekugel

Mir ist gar nicht aufgefallen, dass der Tannenbaum beim Verkleinern verschwunden war!
Schaute man genauer hin, ist auch der Glanz der Kugel nach links oben aus der Kugel geschoben worden, die Schneeflocken wurden zu Schneebällen und die Ecken vom Haus, einschließlich Türen und Fenster wurden immer runder!

Aber mit dem folgenden Update sind die Größenverhältnisse wieder geradegerückt und es kann wieder normal in der Kugel Schnee fallen!!

Bis dann und noch schöne weiße Weihnachtstage

Wolfgang

Gabriella und Daishi finden das Top!

Antworten

#5 | RE: Update: Schneekugel datum

26.12.2023 15:01

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

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

Funktioniert Top Wolfgang, was man auch machen kann, wenn man keinem Hintergrund haben möchte, kann man ihn auch weglassen, also auskommentieren, das geht auch.

Also in Zeile 3 auskommentieren:

1
 
/*  --color-background: radial-gradient(at 50% 80%, #ffff00, #ff0000, #ffffff);  */

War nur ein Vorschlag, wenn jemand kein Hintergrund haben möchte.

Ich hoffe, der Vorschlag war ok so.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#6 | Update: Schneekugel datum

30.11.2025 22:40

Update: Schneekugel

Die Schneekugel hat ein kleines Update bekommen, hat die Textfelder dahin beeinflusst, dass sie die breite Seite zusammengeschoben hat!
Die Class ".schatten" musste erweitert werden auf ".schneekugel_body .schatten"!
Alles in Beitrag Beitrag #2 nachgetragen!

Bis dann
Wolfgang

Antworten

#7 | RE: Update: Schneekugel datum

02.12.2025 00:13

Anne

Informationen anzeigen

Beiträge:	332
Registriert seit:	21.08.2021

Homepage:	Nicht angegeben
Letzte Spende	Betrag 5 € Forum Spende
Sternzeichen	novalue
Likes	156

Ich habe auch mal an einer Schneekugel gebaut

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
 
<style>
:root {
  --size: 200px;
  --flocke: 8px;
  --kugelbild: url(https://files.homepagemodules.de/b104774/a_675_3ff5f34a.gif); /* dein Bild */
}
 
/* Container */
.schneekugel_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
}
 
/* Runde Kugel mit Bild */
.schneekugel {
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--kugelbild) center/cover no-repeat;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.6);
}
 
/* Glanzreflex oben links */
.schneekugel::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,0.7), rgba(255,255,255,0));
  transform: rotate(-20deg);
}
 
/* Sockel mit goldenem Rand */
.sockel {
  position: relative;
  width: calc(var(--size) * 1.4);
  height: 30px;
  background: linear-gradient(to bottom, #b30000, #660000);
  border-radius: 15px;
  margin-top: -8px;
  box-shadow: inset 0 3px 6px #0005, 0 2px 6px #0007;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid gold; /* goldener Rand */
}
 
/* Gravur-Text */
.sockel_text {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #fdd;
  text-shadow: 1px 1px 0 #400, -1px -1px 0 #900;
  letter-spacing: 1px;
}
 
/* Schneeflocken */
.flocke {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: fallen linear infinite;
}
 
@keyframes fallen {
  0% { transform: translateY(-20px); opacity: 1; }
  100% { transform: translateY(var(--size)); opacity: 0; }
}
</style>
 
<div class="schneekugel_footer">
  <div class="schneekugel">
    <!-- Schneeflocken mit variabler Größe und Geschwindigkeit -->
    <div class="flocke" style="width:4px; height:4px; left:30px; animation-duration:6s; animation-delay:0s;"></div>
    <div class="flocke" style="width:6px; height:6px; left:80px; animation-duration:8s; animation-delay:1s;"></div>
    <div class="flocke" style="width:5px; height:5px; left:120px; animation-duration:7s; animation-delay:2s;"></div>
    <div class="flocke" style="width:7px; height:7px; left:160px; animation-duration:9s; animation-delay:3s;"></div>
    <div class="flocke" style="width:4px; height:4px; left:60px; animation-duration:6s; animation-delay:4s;"></div>
    <div class="flocke" style="width:6px; height:6px; left:100px; animation-duration:8s; animation-delay:5s;"></div>
    <div class="flocke" style="width:5px; height:5px; left:140px; animation-duration:7s; animation-delay:6s;"></div>
  </div>
  <div class="sockel">
    <div class="sockel_text">Ein schönes Weihnachtsfest</div>
  </div>
</div>
 

 

Vielleicht gefällt es ja

Wolfgang und Dankeschön finden das Top!

Antworten

#8 | RE: Update: Schneekugel datum

02.12.2025 21:22

Dankeschön dafür. Habe ich doch gleich umgesetzt in meine beiden Foren.

Antworten

#9 | RE: Update: Schneekugel datum

03.12.2025 12:30

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

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

Wolfgang findet das Top!

Antworten

#10 | RE: Update: Schneekugel datum

05.12.2025 17:25 (zuletzt bearbeitet: 05.12.2025 17:31)

Zitat von Anne im Beitrag #7
Ich habe auch mal an einer Schneekugel gebaut

Vielen Dank, Anne, die nehm ich!

Die hab ich in die Fußzeile gepackt (nachdem CSS nicht geklappt hat...

). In der Kopfzeile nimmt sie zu viel Platz ein.
Und den Text erstmal in Adventszeit umgeändert.
(Mobil hab ich gerade ein Formatproblem durch die bisherige Deko, was ich nicht noch beeinflussen möchte.)

Die neuesten Beiträge auf meinem Naturforum...

Anne findet das Top!

Antworten

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

Seite 1 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%