CSS3 Probleme

[Sorrow1994]

Abend,
unzwar habe ich 1-2 Probleme bezüglich CSS3.

Ich habe einen Button mit folgenden CSS3 Eigenschaften erstellt:

border-radius
background:gradient
box-shadow

Alle mit den Prefixen o, webkit, ms und moz versehen.

Demo:

Teile gehen davon (box-shadow als Beispiel) .. nur klappt z. B. der Verlauf nicht!

Kann mir wer sagen, warum es nicht klappen will ?
Vllt. steh ich einfach nur auf dem Schlauch

mfg

 

[hilmar]

AW: CSS3 Probleme

die wenigsten id's oder klassen lassen sich per prefix für alle browser momentan gestalten. radius und shadow funzen, gradient geht meines wissens nach einfach noch nicht.

aber ich bin auch nicht der vollwebdesignprofi.

weiß nicht, ob dir das hilft:
http://kulturbanause.de/2011/10/css3-vendor-prefixes-per-javascript-erzeugen-prefix-free/

halt uns mal auf dem laufenden, falls du eine lösung findest.

der hilmar.
.

 

[Myhar]

AW: CSS3 Probleme

Und ob gradients funktionieren. Sogar der IE6 kann gradients darstellen.
Man muss nur die korrekte CSS Syntax verwenden, dann hat man das Problem des Threaderstellers auch schon gelöst.
Eine valide Syntax für einen einfachen Verlauf von Schwarz nach Weiß schaut so aus:

-moz-linear-gradient(#FFF,#000);

 

[world]

AW: CSS3 Probleme

Schau mal auf dieser Seite nach hier kannst du den Schatten erstellen und anschauen. Am Ende bekommst du den passenden Code dazu

http://html5css3box.com/box-shadow/

 

[hilmar]

AW: CSS3 Probleme

@myhar: danke für den hinweis!
.

 

[Myhar]

AW: CSS3 Probleme

Gern geschehen!

Weil ich gerade sehe, dass Sorrow1994s border-radius nicht funktioniert (Das habe ich wohl beim ersten Lesen übersehen):
Auch hier musst du die korrekte Syntax verwenden:

border-radius:5px;

Beim border-radius brauchst du die Präfixe nicht (mehr). Bei meinem vorigen Post habe ich nur den Präfix für Firefox gepostet.

Der CSS3 Schmarrn funktioniert also nicht, weil du einen Schmarrn geschrieben hast

 

[Sorrow1994]

AW: CSS3 Probleme

ok, danke

hatte irgendwie die andere Syntax im Kopf

 

[Myhar]

AW: CSS3 Probleme

Generell kannst du dir die Verwendung eines Webseiten Debuggers wie Firebug für Firefox angewöhnen. Opera, Chrome und IE haben bereits einen Debugger integriert, dort brauchst du kein Plugin mehr.
Damit kannst du genau sehen, welche Stile für ein Element angewendet werden und du kannst auch die Syntax austesten.

 

[Mindar]

AW: CSS3 Probleme

In Webkit Browsern gibts keine Probleme. Mit http://www.colorzilla.com/gradient-editor/ müsstest du eigentlich auch einfach Verläufe für FF, O und Intershit Explorer hinbekommen.

 

[Espe]

AW: CSS3 Probleme

My Way:

background: #ffd924;
background: -moz-linear-gradient(#ffd924, #ffbe00);
background: -o-linear-gradient(#ffd924, #ffbe00);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd924), to(#ffbe00)); /* older webkit syntax */
background: -webkit-linear-gradient(#ffd924, #ffbe00);
-webkit-box-shadow: 0 1px 6px #444444;
-moz-box-shadow: 0 1px 6px #444444;
box-shadow: 0 1px 6px #444444;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

Hat jemand noch Erweiterungsvorschläge?

 

[Mindar]

AW: CSS3 Probleme

Hat jemand noch Erweiterungsvorschläge?

Ja, die vorläufige W3C Version von 'linear-gradient' könnte man noch hinzufügen.

 

[Myhar]

AW: CSS3 Probleme

Und -moz-border-radius kann man doch weglassen?