Willkommen, Gast!   de
    w2d · Siquando – Forum  
Die Kompetenz-Community
für web to date, shop to date, NG und
Siquando Web / Shop / Pro
Freitag, 23. Juni 2017, 19:11

Facebook

Spende ans Forum

Wer ist online?

Klappen
Benutzer: 3
Gäste: 35

Seite bookmarken

Facebook
Twitter
Google
LinkedIn

Powered by All-Inkl.com

Forum - [Tipp] Brennender Text für News & Co.

Offline naeg-computer Männlich
Grünschnabel
01
16 Punkte
Homepage Persönliche Nachricht senden
[Tipp] Brennender Text für News & Co.
# 1 Zum Seitenanfang
Korrekte Anzeige nur in Browser Chrome, Firefox, Opera & Safari

Hallo Zusammen

 

Ich habe die versucht ein Effekt von der folgenden Webseite in Pro Web einzubauen:
https://developers.google.com/fonts/docs/getting_started#Effects

Das Ergebnis sieht man hier (Browser Chrome, Firefox, Opera & Safari):
http://www.etvoila.ch/content/news/

Unter Seite/Eigenschaften/HTML/Im <head>-Bereich habe ich dazu Folgendes eingefügt:

<style>
@import "http://fonts.googleapis.com/css?family=Rancho&effect=fire-animation";
h10 {
font-family: Rancho;
font-size: 60px;
margin: 40px 0;
text-align: center;}
</style>

Und anschliessend via HTML-Absatz dann noch Folgendes:

<h10 class="font-effect-fire-animation">Wir feiern 10 Jahre Zirkusschule et voilà!</h10>

Bin mir bewusst, dass CSS-Code so nicht ganz korrekt eingebunden ist, aber es ist der schnellste Weg ohne direkt auf dem Server in den Dateien Änderungen vornehmen zu müssen.

 

Grüsse aus der Schweiz

Oliver

 

Bild 06.03.2016, 22:57
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5736 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 2 Zum Seitenanfang

Sieht gut aus!! IE 11 und Edge "versagen" - wie Du schon sagst - hierbei jedoch kläglich.


Off-Topic:

Ich wußte bisher gar nicht, daß es außer H1 bis H6 auch H10-Überschriften gibt. ;-)

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 06.03.2016, 23:26
Online webchaot Männlich
Co-Admin
012345
1062 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 3 Zum Seitenanfang

Vor ca. 2 Jahren hatte ich mal einen (nicht zu Ende bearbeiteten, sondern nur beispielhaften) Entwurf für Paulemann gemacht, der auch im IE funktioniert und selbstverständlich noch weiter und differenzierter bearbeitet werden kann:

> HIER <

 

Schriftarten (sofern gewünscht) für die navigation.ccml:

1
2
<link href='http://fonts.googleapis.com/css?family=Amethysta' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

 

HTML:

1
2
3
<div id="header">
<h1>Hinterm<span class="fire">H</span><span class="burn">e</span><span class="burn">x</span><span class="fire">e</span><span class="fire">n</span><span class="fire">f</span><span class="fire">o</span><span class="fire">r</span><span class="fire">u</span><span class="fire">m</span>Schwarzdorn</h1>
</div>

 

 

style_design.css:

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
#header h1 {
  font-size: 1.3em;
  font-family: 'Amethysta', serif;
  text-align: center;
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: .3em;
  white-space:nowrap;
}
 
#header span {
  color: #000000;
  font-family: 'Caesar Dressing', cursive;
  font-size: 5em;
  text-transform: lowercase;
  vertical-align: middle;
  letter-spacing: .2em;
}
 
@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}
 
@-moz-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}
 
@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}
 
@-o-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}
 
#header .fire, ul#menu li a .fire, ul#menu li.home a .fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}
 
#header .burn, ul#menu li a .fire, ul#menu li.home a .fire {
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

 

 

---

Gruss

Walti

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »webchaot« (08.03.2016, 00:05)

Bild 08.03.2016, 00:03
Offline Paulemann Männlich
Hero
012
751 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 4 Zum Seitenanfang
---

Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Paulemann« (08.03.2016, 00:18)

Bild 08.03.2016, 00:17
Online webchaot Männlich
Co-Admin
012345
1062 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 5 Zum Seitenanfang

Du sagst es...  :D

---

Gruss

Walti

Bild 08.03.2016, 00:20
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5736 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 6 Zum Seitenanfang
Zitat von: webchaot

Vor ca. 2 Jahren hatte ich mal einen (nicht zu Ende bearbeiteten, sondern nur beispielhaften) Entwurf für Paulemann gemacht, der auch im IE funktioniert und selbstverständlich noch weiter und differenzierter bearbeitet werden kann:

> HIER <

Du alter Hexer, Du! :D;-) (Hier spricht Edgar Wallace...)


Zu dieser Site fehlt eigentlich nur noch die dreckige Lache à la Ende von Michael Jacksons "Thriller" als akustisches i-Tüpfelchen. :-)

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 08.03.2016, 20:12
Online webchaot Männlich
Co-Admin
012345
1062 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 7 Zum Seitenanfang

Wie ich schon schrieb...

Zitat von: webchaot

...noch weiter und differenzierter bearbeitet werden kann...

...der Ton könnte also noch nachgeliefert werden, die Flammen unterschiedlicher und höher geschraubt werden, etc. etc.

 

Paulemann hatte sich wirklich bemüht diese Idee wie von seiner Hexe gewünscht als "Design" weiter zu verarbeiten, aber irgendwann ist seine Hexe auf ihren Besen gestiegen und auf und davon geflogen... :-|

 

Das wäre vielleicht so ein Teil, das er Deiner "Mottenkiste" spenden könnte....?   ;-)

---

Gruss

Walti

Bild 08.03.2016, 23:42
Offline Paulemann Männlich
Hero
012
751 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 8 Zum Seitenanfang

Jo, das ist sie....damals....

Das oben verlinkte war eine Mod auf RC Mod Spezial und der Screenshot folgend ist Epsilon Mod Spezial..

 

---

Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...

Bild 09.03.2016, 00:03
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5736 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.
# 9 Zum Seitenanfang

Wenn die Urheber, also Ihr es erlaubt, sprich dieses "Hexen"-Design freigebt und es unserer Community zur Verfügung stellt, würde ich es natürlich gerne im Files-Bereich zur Verfügung stellen.

Voraussetzung nach wie vor: Das Design ist komplett selbst erstellt und keine Modifikation eines urheberrechtlich geschützten Designs von DB, Siquando oder eines Drittanbieters, auch nicht im Ansatz. Alle Dateien stammen vollständig von Euch oder sind rechtefrei (wie bspw. Bilder von pixabay.de).


Das eine oder andere (registrierte) Forum-Mitglied würde sich sicherlich sehr darüber freuen!! Es gäbe dann bestimmt auch neue interessante Beiträge darüber und das "Hexen"-Design würde hier bei uns zu neuem Leben erwachen. ;-)


Ihr entscheidet...

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 10.03.2016, 18:30
Offline Paulemann Männlich
Hero
012
751 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.

Wie ich bereits oben sagte, sind es mod. Originaldesigns und keine reinen Eigenentwicklungen.

Streitfrage>deswegen meinte ich auch oben "interessantes Thema" (bei dem Thema, das Du extra dazu erstellt hast)>verwendet man, egal was man anbietet, nicht immer Code von SIQ bzw. früher Data Becker?! Ich beantworte die Frage mit "ja". Es gibt feste Interpretierungen im Design, die ich nicht ändern kann und aus diesem Grunde ist es in meinen Augen nie eine reine Eigenentwicklung.

Einzig CSS wäre eigenständig zu betrachten. Aber CCML?!

---

Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Paulemann« (10.03.2016, 18:53)

Bild 10.03.2016, 18:39
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5736 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.

Kein Problem! Dann hat sich das auch (leider) schon erledigt.

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 10.03.2016, 18:42
Offline Paulemann Männlich
Hero
012
751 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.

Aber zu dem, was ich gesagt habe, hast Du keine eigene Meinung? Was ist denn in Deinen Augen eine Eigenentwicklung?

Auf Grund meiner Aussage im Beitrag 10 habe ich mir auch immer auf die Finger geklopft und nichts Eigenständiges für den allgemeinen Markt entwickelt. Habe keine Lust mich mit irgendwelchen Rechtsstreitigkeiten zu befassen, wenn die Herren mal auf den Trichter kommen....

---

Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...

Bild 10.03.2016, 18:51
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5736 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Brennender Text für News & Co.

Ich muß ja nicht immer zu generell allem hier im Forum meine Meinung äußern. Ich denke auch, dies eigentlich mehr oder weniger bereits getan zu haben.

Ich habe Dir trotzdem HIER ausführlich geantwortet, da wir in diesem Thread mittlerweile vollständig vom Ursprungsthema abgekommen sind (woran ich natürlich nicht unschuldig bin...).

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 10.03.2016, 20:43
Bewertung: