Απόλυτος Δημιουργός CSS Gradient

Προεπιλογές

Όνομα:

τόνος/κορεσμός αντιστροφή εισαγωγή css εισαγωγή εικόνας

Στάσεις

Διαφάνεια:		Τοποθεσία:	%
Χρώμα:		Τοποθεσία:	%

Χορηγός

Προεπισκόπηση

Προσανατολισμός: Μέγεθος: x IE

CSS

αλλαγή σε sass

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

αντιγραφή

Μορφή χρώματος: Σχόλια

Σύνδεσμος για αποθήκευση ή κοινοποίηση του τρέχοντος gradient χρησιμοποιώντας το μόνιμο σύνδεσμο.

Συμβατότητα περιηγητή

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Περιηγητής Android	Chrome για Android
6 - 8 Μερική υποστήριξη χρησιμοποιώντας τη σύνταξη filter Χρήση περιηγητή: 0.03%			4 - 9 Υποστήριξη χρησιμοποιώντας την παλιά σύνταξη -webkit- Χρήση περιηγητή: 0% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	4 - 5 Υποστήριξη χρησιμοποιώντας την παλιά σύνταξη -webkit- Χρήση περιηγητή: 0.01% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη		3.2 - 4.3 Υποστήριξη χρησιμοποιώντας την παλιά σύνταξη -webkit- Χρήση περιηγητή: 0% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	2.1 - 3 Υποστήριξη χρησιμοποιώντας την παλιά σύνταξη -webkit- Χρήση περιηγητή: 0.01% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη
9 Μερική υποστήριξη χρησιμοποιώντας τη σύνταξη filter Πλήρης υποστήριξη χρησιμοποιώντας SVG (επιλέξτε "IE9 υποστήριξη") Χρήση περιηγητή: 0.05% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη		3.6 - 15 Υποστήριξη χρησιμοποιώντας το πρόθεμα -moz- Χρήση περιηγητή: 0.01% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	10 - 25 Υποστήριξη χρησιμοποιώντας το πρόθεμα -webkit- Χρήση περιηγητή: 0% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	5.1 - 6 Υποστήριξη χρησιμοποιώντας το πρόθεμα -webkit- Χρήση περιηγητή: 0.01% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	11.1 - 11.5 Υποστήριξη χρησιμοποιώντας το πρόθεμα -o- Χρήση περιηγητή: 0% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	5.1 - 6.1 Υποστήριξη χρησιμοποιώντας το πρόθεμα -webkit- Χρήση περιηγητή: 0% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη	4 - 4.3 Υποστήριξη χρησιμοποιώντας το πρόθεμα -webkit- Χρήση περιηγητή: 0.09% Επιλέξτε "Μεγιστοποίηση συμβατότητας" για υποστήριξη
10+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	12+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	16+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	26+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	6.1+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	12+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	7.1+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	4.4+ Πλήρης υποστήριξη (χωρίς πρόθεμα)	46+ Πλήρης υποστήριξη (χωρίς πρόθεμα)

υποστήριξη IE9 (?) Μεγιστοποίηση συμβατότητας

Σύνδεσμοι για την τεκμηρίωση CSS gradients: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Τι νέο υπάρχει

» Μην δημιουργείτε προθεματικές συντάξεις από προεπιλογή (ενεργοποιήστε ξανά χρησιμοποιώντας τη λειτουργία 'Μεγιστοποίηση συμβατότητας')

δείτε περισσότερα... δείτε λιγότερα...

Προηγούμενες εκδόσεις (English)

» Don't generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using "Maximize compatibility" mode)
» Browser Compatibility panel showing supported browser versions, usage stats etc.
» Support for radial and diagonal linear gradients
» Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG
» Support for Sass SCSS format using Compass mixins (needs latest beta of Compass)
» Copy to clipboard button for quickly grabbing the generated code
» Easy resizing of preview panel by dragging its corner
» Opacity support
- · Create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects
- · Add any number of opacity stops to your gradient
- · Supports opacity stops at any position - completely independent of color stops
- · Automatically switch to rgba/hsla color output mode when transparency is used
- · Outputs older Internet Explorer opacity format (yes, this will even work with IE6!)
- · Opacity support when importing from CSS
- · Supports importing gradients with transparency from an image
» Double click on CSS text output to select all of it for easy copying
» More robust new algorithm for converting gradient images to CSS, including alpha support

» New 'Adjustments' panel - tweak your gradient or create new flavors
- · Adjust hue, saturation and lightness
- · Reverse current gradient
» Added hsl and hsla color format support in CSS output
» Added a unique permalink to each gradient for linking to, saving or sharing specific gradients.
» Added the ability to toggle CSS comments on/off.

» Added support for 4 new gradient formats:
- · IE 10+
- · Newer Webkit
- · Opera 11.10+
- · W3C

» Import from an image - convert an existing gradient image to CSS
- · Supports complex multi-stop gradients
- · Upload an image or import from an image URL

» Import from CSS - enter existing gradient CSS in various formats and import it into the tool
» Save your gradients as new presets
- · Edit your gradient, enter its name and hit 'new'
- · Remove any of your preset gradients using its context menu (right click)
- · Your gradient presets will be persisted in the tool across sessions
» Added rgb and rgba color format support in CSS output
» Persist settings across sessions - gradient orientation, preview panel dimensions, output color format etc.
» Keyboard shortcuts - press up/down in color stop entry box to increase/decrease value

Σχετικά

Το Ultimate CSS Gradient Editor δημιουργήθηκε από τον/την Alex Sirota. Εάν σας αρέσει αυτό το εργαλείο, δείτε το ColorZilla για πιο προηγμένα εργαλεία όπως σταγονόμετρα, επιλογείς χρωμάτων, επεξεργαστές παλέτας και αναλυτές ιστοσελίδων.

Όπως ίσως γνωρίζετε, το HTML5 παρουσίασε πολλά συναρπαστικά χαρακτηριστικά για τους προγραμματιστές ιστοσελίδων. Ένα από τα χαρακτηριστικά είναι η δυνατότητα να καθορίζετε gradients χρησιμοποιώντας καθαρό CSS3, χωρίς την ανάγκη δημιουργίας εικόνων και τη χρήση τους ως επαναλαμβανόμενων φόντων για εφέ gradient.

Σημαντικό: Θα χρειαστείτε μια πρόσφατη έκδοση των Firefox, Chrome, Safari, Opera ή IE για να χρησιμοποιήσετε αυτόν τον Δημιουργό Gradient. Τα αποτελέσματα των CSS gradients είναι συμβατά με διάφορους περιηγητές - θα λειτουργούν σε αυτούς τους περιηγητές και θα επιστρέφουν επίσης σε ένα απλούστερο gradient σε παλαιότερες εκδόσεις του Internet Explorer.

Χαρακτηριστικά

Ισχυρή διεπαφή σαν του Photoshop
Έξοδος CSS συμβατή με όλους τους περιηγητές
Οριζόντια, κάθετα, διαγώνια και ακτινικά gradients
Σύνθετα gradients με πολλά σημεία στάσης
Υποστήριξη διαφάνειας με πολλαπλά σημεία διαφάνειας
Μορφές χρώματος Hex, rgb, rgba, hsl, hsla
Υποστήριξη για πλήρη multi-stop gradients με το IE9
Εισαγωγή από εικόνα (μετατροπή του gradient της εικόνας σε CSS)
Εισαγωγή από υπάρχον CSS
Ρύθμιση του gradient κατά απόχρωση, κορεσμό και φωτεινότητα
Περισσότερα από 135 προκαθορισμένα gradients
Αποθήκευση προσαρμοσμένων προκαθορισμένων gradients
Έξοδος Sass
Ευέλικτο πάνελ προεπισκόπησης
Permalinks των gradients για αποστολή και κοινοποίηση
Περισσότερα σύντομα!

Βοήθεια

Το κύριο πάνελ ελέγχου gradient σας επιτρέπει να:

» Ρυθμίστε τη θέση του σημείου στάσης σύροντας τον δείκτη στάσης
» Ρυθμίστε το χρώμα της στάσης με διπλό κλικ στο σημαδευτήρα στάσης
» Διαγράψτε μια στάση σύροντας τον δείκτη στάσης προς τα πάνω ή προς τα κάτω
» Προσθέστε μια νέα στάση κάνοντας κλικ οπουδήποτε ανάμεσα στα υπάρχοντα σημεία στάσης

Μπορείτε να χρησιμοποιήσετε το πάνελ 'Stops' για να ελέγξετε το χρώμα και τη θέση του τρέχοντος επιλεγμένου σημείου πιο ακριβώς.

Το πάνελ 'Preview' επιτρέπει την προεπισκόπηση του τρέχοντος gradient ως κάθετου ή οριζόντιου, και επίσης επιτρέπει γρήγορη προεπισκόπηση του πώς θα φαίνεται το gradient fallback στο IE.

Τέλος, το πάνελ 'CSS' έχει πάντα το CSS για το τρέχον gradient για εύκολη αντιγραφή και επικόλληση στο stylesheet σας. Μπορείτε επίσης να χρησιμοποιήσετε αυτό το πάνελ για να εισαγάγετε ένα υπάρχον gradient CSS στο εργαλείο.