Tutorials

Linktipp! - Farbverläufe mit CSS3 Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Linktipp! - Farbverläufe mit CSS3
Seit CSS3 ist es möglich mit CSS-Code Farbverläufe zu erstellen. Dabei muss man jedoch beachten, dass jeder Browser diesen anderes darstellt. Ich gebe euch heute einen Link wo ihr problemlos Verläufe erstellen könnt die gleichzeitig für alle Browser gelten.

3218 - real-napster - 26.04.2012 06:46 Uhr - Version: 1 - - verlinken als BB-Code


Farbverläufe früher:
Wenn man bis vor kurzen einen Farbverlauf in die eigene Homepage einbinden wollte gab es dafür genau 1 Lösung: 1px Breites Bild erstellen mit einer Höhe von z.B. 1500px, den Verlauf dort draufziehen, Bild als Hintergrund in Website einbinden und fertig. Auch das ist heute noch eine beliebte Methode und auch völlig legitim. Es ist kein Programmierfehler oder ein No-Go.


Farbverläufe heute:
Mit CSS3 jedoch ist es möglich einen Farbverlauf direkt in CSS zu erzeugen und somit direkt live in die Website einzubinden. Vorteile? Klar. Der Browser muss nicht das Bild laden somit kürzere Ladezeiten und auch der Aufwand ist deutlich geriner. Nachteile? Kenn man schon. Browserkompabilität. Jeder Browser liest den Code anders und somit kommt es zu Darstellungsproblemen.

Beheben kann man das ganz einfach. Und hier kommen wir nun zu meinem Linktipp. Ein Online-Farbverlauf-Generator für CSS3. Wunderbar realisiert. Einfach zu haben. Kostenlos. Superleichte Bedienung. Eigentlich alles was man so braucht.

280css3-farbverlau
Linksoben entweder bestehendes Web 2.0 Farbverlauf auswählen oder in der Schiebeleiste darunter sich den eigenen zusammenkleistern.

Rechts findet ihr die Vorschau und darunter den direkten Quellcode für euer CSS Dokument! Erinnert an Photoshop, wer es kennt!

Hier geht es zum Generator:
http://www.colorzilla.com/gradient-editor/







Das beste zum Schluss: Im Code enthalten sind die Zeilen für alle Browser: Alt, Neu, Mozilla, Opera, IE... somit wird der Farbverlauf in jedem Browser gleich aussehen. Wetten?

Viel Spaß nun damit und frohes schaffen!

gruß
real-napster

Mitglieder-Kommentare


Es sind leider noch keine Einträge vorhanden!

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)