nicht angemeldet
Fragen zu CSS3 - transition
Gunnar Bittersmann
Matthias ApselHallo zusammen
Ich hab' ein Problem. Ich gestalte z.Zt. eine Webseite mit CSS3. Es folgt eine grobe Aufstellung meiner bisherigen Programmierung:
Ebene1 = Linie durchgehend 10px breit
<a href mit text-decoration=none / opacity: .3 u.s.w.>
<div>(=Ebene2) als Block mit scew(-45deg) diagonal verzerrt / color = transparent
/ box-shadow
Ebene3 = Text decoration=none / font-color=black / font-family u.s.w.
</div>
</a>
Sollte einigermaßen verständlich sein... hoffe ich.
Nu mein Problem:
Sowohl Firefox, als auch Safari zeigen einen Hover-Effekt korrekt an, wo die Opacity von ganz blass ( .3) nach fast undurchsichtig ( .9) einfadet und bei Mouseout wieder ausfadet.
... nur Opera macht da gar nix... und das verstehe ich nicht so richtig. Dass IE das CSS3 nicht bzw. nicht richtig interpretiert, ist ja nu Jedem bekannt, aber dass sich Opera weigert, ist mir neu.
Liegt meiner Meinung nach an der Zuordnung einzelner Kommandos:
Erst ordnet Opera dem <a>-Tag seine Kommandos zu (z.B. Opacity)
Danach ordnet er dem DIV dessen Kommandos zu, wobei die Kommandos (z.B. Opacity) von <a> nicht berücksichtig werden.
------------------
so weit, so schlecht...
Ich sitze gerade an einer anderen Variante, wo ich über Listenpunkte, die ich waagerech ausrichte jeweils einem Text (entspr. Ebene3) einen rechteckigen Rand zuordne (padding).
DIESEM - und nur diesem - Rand möchte ich nun ein scew(-45deg) zuweisen, NICHT ABER dem Text selbst.
Nu meine große Frage:
Gibt es - genau wie es box-shadow gibt - auch schon box-transform ? Oder transformiere ich immer Box UND Text?
Und wenn ja, gibt es so etwas wie ein text-transform, das ein allgemeines Transform wieder rückgängig machen kann?
Ihr seht: 2 ziemliche Brocken an Fragen.
Wenn mir Jemand helfen kann - egal ob nu mit Variante 1 oder Variante 2 - bitte melde dich bei mir. Ich hab' die Seite einfach mal so ins Netz gestellt (s.Link meiner Webseite) und die interessante externe CSS-Datei als Text in die Webseite eingefügt. Wäre wirklich super, wenn mir da Jemand helfen könnte. Bitte tragt nicht nur Lösungen hier ins Forum ein, sondern schickt mir bitte auch eine Mail, damit ich dann nachlesen kann. Da ich mich auf vielen Foren herumtreibe, verpasse ich sonst eine Antwort.
MfG Rawir
-
@@Rawir:
nuqneH
z-index="5";
Das war wohl nichts. Jedenfalls kein CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quirksmodus. Den solltest du vermeiden.
<meta name="generator" content="Dirk Dombrowski">
Nö, "generator" ist für die Angabe einer Software (bspw. Editor), die den Quelltext generiert hat. Zur Angabe des Autors dient "author":
<meta name="author" content="Dirk Dombrowski"><body bgcolor="#ffffff">
Was hat die Hintergrundfarbe im Mark-up zu suchen? Gib sie im Stylesheet an!
<a href mit text-decoration=none / opacity: .3 u.s.w.>
<div>(=Ebene2) als Block mit scew(-45deg) diagonal verzerrt / color = transparent
/ box-shadow
Ebene3 = Text decoration=none / font-color=black / font-family u.s.w.
</div>
</a>In HTML 4.01 darf 'a' keine 'div' enthalten, sondern nur Inline-Elemente.
Warum schreibst du kein HTML5?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
z-index="5";
Das war wohl nichts. Jedenfalls kein CSS.
Muss wahrscheinlich lauten
z-index:5; right? thx für den Tip. Schön, dass du den korrekten Quellcode aufgeschrieben hast.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quirksmodus. Den solltest du vermeiden.
1. Frage: Wieso?
2. Den Doctype gibt z.B. ein alter, noch in Benutzung befindlicher WYSYWYG-Editor so vor. Dass ich das nicht geändert habe, ist natürlich blöd... echt nur schusselig... und keinesfalls zu verzeihen! Auch dafür ein thx an dich.<meta name="generator" content="Dirk Dombrowski">
Nö, "generator" ist für die Angabe einer Software (bspw. Editor), die den Quelltext generiert hat. Zur Angabe des Autors dient "author":
»»<meta name="author" content="Dirk Dombrowski">
Weiß ich... gehe ich auch nicht weiter drauf ein. Auch nicht darauf, dass diese Meta-Angabe bei der Endversion sowieso rausfliegt und hier an dieser Stelle wirklich niemanden - zumindest mich nicht - interessiert.
<body bgcolor="#ffffff">
Was hat die Hintergrundfarbe im Mark-up zu suchen? Gib sie im Stylesheet an!
Ob und wo ich ein bgcolor=weiß, was ja sowieso immer und überall standardmäßig gesetzt wird und damit ausgesprochen überflüssig ist, angebe, selbst wenn man diesen bgcolor " im korrekten Quellcode nicht mehr schreibt", genauso wie <b>, <i>, <u>, Tabellen und wie sie alle heißen bei HTML5 nur noch ins CSS gehören, sollte doch nu wirklich nicht deine erlauchte Aufmerksamkeit erregen.
----------------------------
Und nu wohl endlich zu meiner eigentlichen Frage:
In HTML 4.01 darf 'a' keine 'div' enthalten, sondern nur Inline-Elemente.
Das war jetzt eine Antwort, auf die ich niemals selbst gekommen wäre. Wenn du dich erinnerst, habe ich genau das auch vermutet. Jedenfalls wäre das die einzige Erklärung, wieso Opera das sich zu interpretieren weigert... und: Das hatte ich schon geschrieben.
Warum schreibst du kein HTML5?
Qapla'
Und spätestens jetzt könnte ich kotzen!
Statt irgendwelche Plattheiten rauszuhauen könntest du doch wirklich mal langsam anfangen, kreativ zu antworten! Was glaubst du denn, was ich hier versuche, Mann!? Es wäre schön, wenn du da mal konkret - vorzugsweise mit einem Quellcode-Beispiel - drauf antworten könntest. Aber diese Plattheit "Warum schreibst du das nicht in HTML5?" ist echt nur bescheuert!
Was ist zum Beispiel mit meinem anderen Ansatz und der dortigen Frage? Um es für dich nochmal zu widerholen:
Gibt es eine Möglichkeit, einzig und allein die Form des Padding mit transform:skew(-45deg) zu ändern oder ändert sich der Text immer mit?
Und gibt es inzwischen einen CSS-Befehl, um nur box oder nur text zu "skew"en?
Ich frage das deswegen so direkt, weil ich weiß, dass HTML5 noch in der Entwicklungs-Phase ist und selbst nur einige Wochen alte Dokumentationen schon längst überholt sein könnten. Vielleicht - aber nur vielleicht - wäre diese Idee ja auch ein Denkansatz für die CSS3-Entwickler, einen neuen Aspekt zu kreieren(!?)Es wäre wirklich sehr hilfreich, wenn du AUF MEINE FRAGEN eine Antwort - oder noch besser einen Lösungsansatz in Form eines Quelltextes - geben könntest. Oder kannst du da auch nur wieder Plattheiten raushauen? Bist du so ein kleines bisschen Querulant, dass du dich nur an "Fehlern" hochziehst, die gar nicht zur Diskussion standen? Denn, wenn ich es mir überlege, hast du ja so ziemlich gar keine Frage wirklich beantwortet.
Rawir
-
@@Rawir:
nuqneH
Schön, dass du den korrekten Quellcode aufgeschrieben hast.
Hab ich das? Nein. Bewusst nicht.
Quirksmodus. Den solltest du vermeiden.
- Frage: Wieso?
Was wieso? Warum die DOCTYPE-Angabe Browser in den Quirksmodus schickt oder warum du den vermeiden solltest?
Weiß ich...
Warum machst du’s dann nicht richtig?
Auch nicht darauf, dass diese Meta-Angabe bei der Endversion sowieso rausfliegt und hier an dieser Stelle wirklich niemanden - zumindest mich nicht - interessiert.
Wenn diese Meta-Angabe nichtmal dich interessiert, warum schreibst du sie in deinen Code?
Ob und wo ich ein bgcolor=weiß, was ja sowieso immer und überall standardmäßig gesetzt wird und damit ausgesprochen überflüssig ist, angebe, selbst wenn man diesen bgcolor " im korrekten Quellcode nicht mehr schreibt", genauso wie <b>, <i>, <u>, Tabellen und wie sie alle heißen bei HTML5 nur noch ins CSS gehören, […]
Falsch. Natürlich verwendet man <b>, <i>, <u>, Tabellen – ihrem Sinn entsprechend.
[…] sollte doch nu wirklich nicht deine erlauchte Aufmerksamkeit erregen.
Und nu wohl endlich zu meiner eigentlichen Frage:
Du hast meine erlauchte Aufmerksamkeit verloren.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
@@Rawir:
nuqneH
Gibt es eine Möglichkeit, einzig und allein die Form des Padding mit transform:skew(-45deg) zu ändern oder ändert sich der Text immer mit?
Die Idee, im Forumsarchiv nach "skew" zu suchen ist dir nicht gekommen? Aber hier auf die Kacke hauen …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Om nah hoo pez nyeetz, Rawir!
Bitte tragt nicht nur Lösungen hier ins Forum ein, sondern schickt mir bitte auch eine Mail, damit ich dann nachlesen kann.
das wird wohl nicht passieren, du musst dich schon selbst um dein Problem kümmern.
Da ich mich auf vielen Foren herumtreibe, verpasse ich sonst eine Antwort.
Da kann dir dein Problem so wichtig nicht sein.
Crosspostings[1] sind übrigens uncool, vor allem für potentielle Helfer aber auch für den Fragesteller, der leicht die Übersicht verlieren kann.
[1] Ich unterstelle dir ausdrücklicht nicht, dieselbe Frage in verschiedenen Foren gestellt zu haben.
Matthias
--
1/z ist kein Blatt Papier.
-
»» [1] Ich unterstelle dir ausdrücklicht nicht, dieselbe Frage in verschiedenen Foren gestellt zu haben.
Matthias
Hi Matthias
Keine Sorge, hab ich nicht. Das ist das einzige Forum, wo ich Fragen zu CSS3 stelle.Crossposting mache ich nicht. Das heißt aber nicht, - nur weil ich nur hier das Forum befrage - dass das hier mein einziges Forum sein muss, dass ich besuche.
Es gibt erstaunlicherweise mehr als nur HTML-Programmierung. ;-)Aber nochmal zurück zu meinen Fragen...
Ich habe inzwischen einiges an meinem Quelltext verändert und die Seite so gebaut, (ohne dass ich vorher hier ins Forum geschaut habe, um mir noch die weiteren Antworten von Gunnar anzutun)
dass sie - ich hoffe, alle Götter des "reinen HTML 5" werden mich jetzt nicht mit Blitzen erschlagen - "ordentliches" HTML5 und CSS3 enthalten.Die Frage, die ich bezüglich des transform: skew(-45deg) gestellt habe, ist aber noch immer akut.
Daher direkt an dich:
Hast du eine Antwort auf meine Frage?Gruß Rawir
-
Om nah hoo pez nyeetz, Rawir!
Hast du eine Antwort auf meine Frage?
Nein.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Rawir:
nuqneH
Die Frage, die ich bezüglich des transform: skew(-45deg) gestellt habe, ist aber noch immer akut.
Die Antwort auch.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar
Habe mir deine Antwort zu Gemüte geführt und wirklich was gelernt:
1. Ich habe gelernt, dass die Variante über :before funktioniert... nicht ganz so, wie ich es wollte, aber immerhin. (s.u.)
2. Ich habe gelernt, erst mal ins Forumsarchiv zu schaun. Das kannte ich bis dato nicht.
3.Ich habe gelernt, dass ich mich manchmal zu schnell aufrege.zu 3.: Hättest du gleich bei deiner ersten Antwort geschrieben:
"Hey, schau doch mal ins Forumsarchiv.", wäre es gar nicht zu diesem Ausbruch gekommen.
Und du erschienst mir echt ausgesprochen überheblich mit deinem "Warum schreibst du das nicht in HTML5?", Gunnar.
So a bissle hat da auch der Ton eine Rolle gespielt.------------------------
Noch eine letzte Frage zu transition:
Ich hab' an anderer Stelle gelesen, dass die Kombination von transition und :before weder von -webkit, noch von -opera bislang interpretiert wird.
Auch bei dem Beispiel von Gunnar gibt es kein weiches Fading In/Out, sondern nur harte Übergänge. Einzig Firefox macht das.Könnt ihr das bestätigen, dass diese Kombination so (noch) nicht von den o.g. Browsern interpretiert wird?
Wenn ja, dann werd' ich nämlich 'ne Möglichkeit suchen müssen, ohne :before auskommen zu müssen.p.S. Im Forumsarchiv und auch bei SelfHTML direkt hab' ich bislang nix Passendes finden können.
Rawir
-
-
-