Sponsored Links |
|
|||
Gradients sind background-images und die sind nicht animierbar.
In deinem Codeschnipsel fehlt die prefix-lose Syntax für Gradients. Woher hast du diese Notation? Zitat:
Poste einen Link, der dein Problem zeigt. Du bist doch nicht neu hier, du musst doch wissen, wie das hier funktioniert.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (09.06.2013 um 15:49 Uhr) |
Sponsored Links |
|
||||
Den Button habe ich mit hilfe des CSS3 Button Generators gemacht: CSS3 Button Generator
Normal benutze ich nie Generatoren aber ich bin noch nicht so fit in CSS3... Ja bin schon ne weile hier, daher bin ich einfach davon ausgegangen das die css schnipsel reichen weil es sich hierbei nur um einen Button handelt der ohne Grafiken usw Funktioniert Hier kannst du dir bisher anschauen was ich hab: http://www.mywebexile.de/demo/ps/ Zitat:
Code:
background: -moz-linear-gradient( top, #07b4ee 0%, #069ae9); background: -webkit-gradient( linear, left top, left bottom, from(#07b4ee), to(#069ae9)); |
|
|||||
Zitat:
Zitat:
Zitat:
Selbst wenn man sich die Mühe macht, deine Schnipsel lokal zu einem lauffähigen Code zusammenzusetzen, sieht man gar nichts, weil du den Button geschickt außerhalb des sichtbaren Bereiches platziert hast. Zitat:
Ich habe dir ja bereits gesagt, das Gradients nicht animierbar sind. Wenn ich einen solchen animierten Gradient brauchen würde, würde ich versuchen, generierten Content mit einem Verlauf unter den Text zu positionieren und für diesen die opacity zu animieren. Zitat:
background ist die zusammenfassende Eigenschaft. background-color ist Hintergrundfarbe. background-image ist Hintergrundbild. Gradient ist ein background-image. Ich weiß noch immer nicht, worauf du oben hinaus willst.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (09.06.2013 um 16:16 Uhr) |
|
||||
Ist gut danke ^^ hab den BG kram einfach als Grafik eingefügt nun passt es.
Also transition: background 250ms ease; /* Standard */ reicht jetzt? dachte mir: Code:
-webkit-transition: background 250ms ease; /* WebKit */ -moz-transition: background 250ms ease; /* Firefox */ -o-transition: background 250ms ease; /* Opera */ |
|
|||
Nein.
Ich habe nichts von transition geschrieben, sondern von gradients!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Ja Sorry stimmt...
Hmmm Und wie macht man das heute? so einen farbverlauf? Änderungen in der neuen CSS3-Farbverlauf-Syntax (ohne Vendor-Prefix) Seiten die ich auf Anhieb finde machen das auch mit gradients... |
|
|||
Jetzt lies doch mal bitte genau, was ich schreibe!
Wenn du den Link liest, den du gerade selbst gepostet hast, wirst du sehen, was an deinem Code fehlt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Code:
.btn_blue_small { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #f5f5f5; padding: 10px 20px; background: linear-gradient(180deg, #07b4ee, #069ae9); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #0079ba; -moz-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1); -webkit-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1); box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1); text-shadow: 1px 1px 1px rgba(255,255,255,0.2), 0px 1px 0px rgba(255,255,255,0); } .btn_blue_small:hover { cursor: pointer; background: linear-gradient(180deg, #00ccff, #00a6ff); } |
Sponsored Links |
|
|||
Wenn du einen Effekt mit Transitions auf eine Hintergrundverlauf haben willst, kannst du bei Gradients auch mit der Position herumspielen.
Ein Beispiel (jedoch mit der alten Gradient Notation) dazu findet sich hier: CSS3 gradient transition with background-position | Sapphion
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
disabled Button stylen | Camelrider | CSS | 3 | 30.06.2009 16:13 |
FF Problem: button mit image | darolla | CSS | 6 | 02.04.2007 09:49 |
Button - Rahmen | dieter99 | CSS | 1 | 06.12.2006 11:13 |
button vom dropdown stylen | dreiaugen | CSS | 2 | 21.02.2006 12:28 |