Weihnachts-Lichterkette / Weihnachsdeko

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Weihnachts-Lichterkette / Weihnachsdeko

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 | Weihnachts-Lichterkette / Weihnachsdeko datum

21.11.2022 21:15 (zuletzt bearbeitet: 30.11.2023 07:12)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

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

Hallo ihr Lieben, ich habe mal eine kleine Idee und Inspiration gehabt und soweit in die Tat umgesetzt, ich habe es versucht.

Ich habe mich an Wolfgangs Tipps und Ratschläge gehalten und habe es für das Xobor - Forum hinbekommen, ich freue mich wie ein Klein-Kind.

Ich denke, mit der Weihnachts-Lichterkette sind die Geschmäcker verschieden. Für mich war das viel Arbeit. Mir gefällt es und meiner Freundin, es läuft bei uns im Forum.

Hier wie es im Forum aussieht:
Weihnachts-Lichterkette!

Hier der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<main>
  <ul class="lightrope">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
 
</main>
 

Schlie�en

Und hier die angepasste CSS - Code für das Xobor - Forum:

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
 
.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 90%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
  background: aqua;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}
 
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
 
@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}  
 

Schlie�en

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang, Kipper-Spedition, Gabriella und Hans58 finden das Top!

Antworten

#2 | RE: Weihnachts-Lichterkette datum

22.11.2022 10:44 (zuletzt bearbeitet: 22.11.2022 10:45)

Tolle Idee und klasse Umsetzung!
Du hast es ja schon selbst geschrieben, die Geschmäcker sind unterschiedlich. Ich persönlich finde so etwas ansprechender.

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

Daishi findet das Top!

Antworten

#3 | RE: Weihnachts-Lichterkette datum

22.11.2022 18:08 (zuletzt bearbeitet: 23.11.2022 15:33)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

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

Hallo @Kipper-Spedition

Ich habe versucht es umzusetzen, in weiß als "Glitter light_Lichterkette". Besser bekomme ich es nicht hin.

Ich hoffe, dass ich es so weit umsetzen konnte. Ehrlich gesagt, besser bekomme ich es nicht hin, musste mir dafür die Farbcodes Hex-Color umschreiben auf CSS - rgba(255,255,220,0); Farb-Code umschreiben.

Musste dafür noch einen dunklen Hintergrund anlegen, damit ich es sauber bearbeiten konnte.

Ich entschuldige mich, dass ich mich nicht gleich gemeldet habe, ich ging die Sache an und versuchte es irgendwie umzubauen.

Bin gerade damit fertiggeworden.

Hier meine Arbeit:
Glitter light_Lichterkette!

Hier der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
  <main>
  <ul class="Glitterlight_Lichterkette">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
 
</main>
&nbsp;  
 

Schlie�en

Hier der CSS - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
 
.Glitterlight_Lichterkette {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.Glitterlight_Lichterkette li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 90%;
  margin: 20px;
  display: inline-block;
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px #fff;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.Glitterlight_Lichterkette li:nth-child(2n+1) {
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.Glitterlight_Lichterkette li:nth-child(4n+2) {
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px #fff;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.Glitterlight_Lichterkette li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.Glitterlight_Lichterkette li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.Glitterlight_Lichterkette li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.Glitterlight_Lichterkette li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.Glitterlight_Lichterkette li:last-child:after {
  content: none;
}
.Glitterlight_Lichterkette li:first-child {
  margin-left: -40px;
}
&nbsp;
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
&nbsp;
@keyframes flash-1 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,190,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,190,0);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: white;
    box-shadow: 0px 4.6666666667px 24px 3px white;
  }
  50% {
    background: rgba(255,255,220,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,190,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,190,0);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,220,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  }
}  
&nbsp;  
 

Schlie�en

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Kipper-Spedition und ichwersonst finden das Top!

Antworten

#4 | RE: Weihnachts-Lichterkette datum

23.11.2022 09:05

Hallo Daishi.

Vielen Dank für Deine ganzen Ideen und deren Umsetzung.
Leider weiss ich nicht wie ich das im Forum "eingebaut" bekomme.
Verwende das Gaia Template (v3).

Viele Grüße
Michael

Antworten

#5 | RE: Weihnachts-Lichterkette datum

23.11.2022 09:48 (zuletzt bearbeitet: 23.11.2022 15:36)

Hallo, ichwersonst

Also bei dem Gaia Template (v3) gehst du Admin, dann den Reiter Layout, dann auf Farben & Einstellungen, dann auf CSS,

dann bei Eigener CSS Code

HTML bzw. CSS Kenntnisse vorausgesetzt!

Dieser Code wird der CSS Datei unten angefügt. "Sie können so eigene CSS Klassen definieren oder einzelne mehr..."

Rechts bei aktueller Wert

Kannst du den CSS - Code einfügen?

Und bei HTML musst du noch Änderungen machen. Damit es sauber aussieht, musst du beim HTML - Code die 4 <li></li> entfernen, damit es sauber angezeigt wird.

Und den HTML-Code fügst du dann auf der Kopfzeile ein

Also Admin, Layout, Kopf- & Fußzeile, dann den HTML - Code in die Kopfzeile einfügen.

Ich hoffe, ich konnte damit etwas helfen,

Mit freundlichen Grüßen

Daishi

PS: Da ich nicht weiß, welches du nehmen möchtest, passe ich dir beide Scripte an und stelle sie dir hier rein

Daishi

Antworten

#6 | RE: Weihnachts-Lichterkette datum

23.11.2022 10:05 (zuletzt bearbeitet: 23.11.2022 15:39)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

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

Änderungen und angepasst für das dem Gaia Template (v3)

"Glitter light_Lichterkette in Weiß"

Hier bitte nichts mehr ändern, bitte Änderungen wurden angepasst.

Hier für die "Glitter light_Lichterkette Weiß"

Hier der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
    <main>
  <ul class="Glitterlight_Lichterkette">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 
  </ul>
 
</main>
<br>
<br>
<br>  
 

Schlie�en

Und hier der CSS - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
 
.Glitterlight_Lichterkette {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.Glitterlight_Lichterkette li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 90%;
  margin: 20px;
  display: inline-block;
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px #fff;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.Glitterlight_Lichterkette li:nth-child(2n+1) {
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.Glitterlight_Lichterkette li:nth-child(4n+2) {
  background: #fff;
  box-shadow: 0px 4.6666666667px 24px 3px #fff;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.Glitterlight_Lichterkette li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.Glitterlight_Lichterkette li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.Glitterlight_Lichterkette li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.Glitterlight_Lichterkette li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.Glitterlight_Lichterkette li:last-child:after {
  content: none;
}
.Glitterlight_Lichterkette li:first-child {
  margin-left: -40px;
}
&nbsp;
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
&nbsp;
@keyframes flash-1 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,190,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,190,0);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: white;
    box-shadow: 0px 4.6666666667px 24px 3px white;
  }
  50% {
    background: rgba(255,255,220,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,190,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,190,0);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #fff;
    box-shadow: 0px 4.6666666667px 24px 3px #fff;
  }
  50% {
    background: rgba(255,255,220,0);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255,255,220,0);
  }
}  
&nbsp;  
&nbsp;  
 

Schlie�en

Hier für die bunte Lichterkette

HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<main>
  <ul class="lightrope">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 
  </ul>
 
</main>
<br>
<br>
<br>
 

Schlie�en

Und hier der CSS - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
 
.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 90%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
  background: aqua;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}
&nbsp;
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
&nbsp;
@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}  
&nbsp;  
 

Schlie�en

Ich habe es auf die Größe angepasst Breite des Forums 1800

Wer aber ein kleineres Format oder Größe hat, bitte die Birnen zählen, und in dem HTML die Anzahl der Birnen also <li></li> Löschen und dann Speichern nicht vergessen

Mit freundlichen Grüßen

Daishi

Daishi

Anne findet das Top!

Antworten

#7 | RE: Weihnachts-Lichterkette datum

23.11.2022 20:36

Danke Daishi.

Ich probiers es mal aus ob ich es hinbekomme.

Danke für Beschreibung

Viele Grüße
Michael

Antworten

#8 | Weihnachtsdeko datum

30.11.2023 08:29 (zuletzt bearbeitet: 23.12.2024 08:48)

Wolfgang

Administrator

Informationen anzeigen

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

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

Weihnachtsdeko fürs Business-Template
Aktualisiert 23.12.2024

Will man das Forum weihnachtlicher gestalten, muss man erst den richtigen Platz finden...
Eine Möglichkeit wäre im Business (v4) in den Beiträgen ganz links unter dem Profil!
Aber was kann man nehmen und hier einbauen?
Weihnachtskugeln und Zweige bieten sich da gut an!
Oft haben viele Bilder farbige Hintergründe, die dann, je nach Forum sehr stören!
Hier kann man sich auf die Suche nach PNG-Bildern machen, aber auch auf die Lizenzen achten!

So kann der Sucheintrag in der Suchmaschine aussehen:

Weihnachten Free PNG

oder

Weihnachtsdeko Free PNG

oder

Weihnachtslandschaft Free PNG

Installation fürs Business-Template (v4)

Mögliche Bilder:

Gefunden in: https://www.pngegg.com/de/

Bilder auswählen und anklicken
Modalansicht öffnet sich, Bild erneut anklicken!
Link aus der Adressleiste kopieren und in den folgenden Code einfügen!

Schließen

Spoiler mit einem Klick öffnen und schließen!

Das kleine Skript ist nur fürs Business (v4) gedacht und kommt in die Fußzeile.
In Zeile 3 wird das Bild nach Belieben ausgetauscht!

1
2
3
4
 
<script>
  // Weihnachsdeko
  $('td.sidebar').append('<center><img src="//files.homepagemodules.de/b104774/a_656_0017c8e9.jpg" style="max-width:240px;"></center>');
</script>
 

Bis dann, ruhige und entspannte Wintertage

Wolfgang

Daishi und Nara finden das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet

"Achtung Bauarbeiten" für halbfertige Beiträge" - Teil 1-3 � � Iconbar: "Inhalte integrieren" und "addPics" ausblenden!

�hnliche Themen

Antworten

Letzter Beitrag

Herzliche Grüße zu Weihnachten
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 2 01.01.2025 11:55
Kipper-Spedition • Zugriffe: 109
Fehlersuche: Riesen Problem bei Eingabe in Betreff
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 1 25.12.2023 14:59
Wolfgang • Zugriffe: 191
Liebe Grüße zu Weihnachten!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 3 25.12.2022 11:01
Daishi • Zugriffe: 352
Mitteilung an die Ungeimpften - Beitrag aus MMNews
Erstellt im Forum Spiritualit�t, Seele, New Age, Yoga, Gesundheit von Wolfgang 0 31.08.2022 21:38
Wolfgang • Zugriffe: 386
Countdown-Timer: Javascript läuft falsch
Erstellt im Forum Das neue Template Xobor (v6) von Nara 9 12.09.2021 15:28
Nara • Zugriffe: 975
Die neue Videogalerie
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 6 24.01.2024 18:54
Kipper-Spedition • Zugriffe: 970
Liebe Grüße zu Weihnachten!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 1 24.12.2021 11:41
Hans58 • Zugriffe: 709
Schöne Worte zu Weihnachten
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 3 25.12.2018 16:37
Haviforumstreffpunkt • Zugriffe: 836

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 €

58%

Weihnachtsdeko fürs Business-TemplateAktualisiert 23.12.2024

Weihnachtsdeko fürs Business-Template
Aktualisiert 23.12.2024