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

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

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

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 | RE: Schneekugel datum

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

Wolfgang

Administrator

Informationen anzeigen

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

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

Schneekugel fürs Forum
Aktualisiert 26.12.23

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 !

Nur mit CSS
yellow, green

Nur mit CSS
#ffff00, #ff0000, #ffffff

Nur mit CSS
#dddddd, #dddddd

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;
}
 
.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 und Gabriella 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!

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

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

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

Fehlersuche: Riesen Problem bei Eingabe in Betreff � � Fehlersuche: Account-Switcher - Bewertungssystem

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 €

36%