Ostateczny Generator Gradientów CSS

Ustawienia predefiniowane

Imię:

barwa/nasycenie odwróć importuj css importuj obraz

Punkty zatrzymania

Przezroczystość:		Położenie:	%
Kolor:		Położenie:	%

Sponsor

Podgląd

Orientacja: Rozmiar: x IE

CSS

przełącz na sass

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

kopiuj

Format koloru: Komentarze

Link do zapisu lub udostępnienia aktualnego gradientu przy użyciu jego linku stałego.

Kompatybilność z przeglądarkami

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Przeglądarka Android	Chrome dla Androida
6 - 8 Częściowe wsparcie przy użyciu składni filter Użycie przeglądarki: 0.03%			4 - 9 Wsparcie przy użyciu starej składni -webkit- Użycie przeglądarki: 0% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	4 - 5 Wsparcie przy użyciu starej składni -webkit- Użycie przeglądarki: 0.01% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie		3.2 - 4.3 Wsparcie przy użyciu starej składni -webkit- Użycie przeglądarki: 0% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	2.1 - 3 Wsparcie przy użyciu starej składni -webkit- Użycie przeglądarki: 0.01% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie
9 Częściowe wsparcie przy użyciu składni filter Pełne wsparcie przy użyciu SVG (wybierz wsparcie "IE9") Użycie przeglądarki: 0.05% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie		3.6 - 15 Wsparcie przy użyciu przedrostka -moz- Użycie przeglądarki: 0.01% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	10 - 25 Wsparcie przy użyciu przedrostka -webkit- Użycie przeglądarki: 0% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	5.1 - 6 Wsparcie przy użyciu przedrostka -webkit- Użycie przeglądarki: 0.01% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	11.1 - 11.5 Wsparcie przy użyciu przedrostka -o- Użycie przeglądarki: 0% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	5.1 - 6.1 Wsparcie przy użyciu przedrostka -webkit- Użycie przeglądarki: 0% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie	4 - 4.3 Wsparcie przy użyciu przedrostka -webkit- Użycie przeglądarki: 0.09% Wybierz "Maksymalna kompatybilność" aby uzyskać wsparcie
10+ Pełne wsparcie (bez przedrostka)	12+ Pełne wsparcie (bez przedrostka)	16+ Pełne wsparcie (bez przedrostka)	26+ Pełne wsparcie (bez przedrostka)	6.1+ Pełne wsparcie (bez przedrostka)	12+ Pełne wsparcie (bez przedrostka)	7.1+ Pełne wsparcie (bez przedrostka)	4.4+ Pełne wsparcie (bez przedrostka)	46+ Pełne wsparcie (bez przedrostka)

Wsparcie IE9 (?) Maksymalna kompatybilność

Linki do dokumentacji gradientów CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Co nowego

» Nie generuj domyślnie żadnych składni z przedrostkiem (włącz ponownie w trybie 'Maksymalna kompatybilność')

pokaż więcej... pokaż mniej...

Poprzednie wersje (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

O programie

Ostateczny edytor gradientu CSS został stworzony przez Alex Sirota. Jeśli podoba Ci się to narzędzie, sprawdź ColorZilla w celu uzyskania bardziej zaawansowanych narzędzi, takich jak pipetki, selektory kolorów, edytory palet i analizatory stron internetowych.

Jak możesz wiedzieć, HTML5 wprowadził wiele ekscytujących funkcji dla deweloperów internetowych. Jedną z funkcji jest możliwość określania gradientów za pomocą czystego CSS3, bez tworzenia żadnych obrazów i używania ich jako powtarzających się tła do efektów gradientu.

Ważne: Aby korzystać z tego generatora gradientów, potrzebujesz nowszej wersji Firefoksa, Chrome, Safari, Opery lub IE. Wynikowe gradienty CSS są kompatybilne z wieloma przeglądarkami - będą działać w tych przeglądarkach i zostaną również zamienione na prostszy gradient w starszych wersjach Internet Explorer.

Funkcje

Potężny interfejs przypominający Photoshopa
Wyjście CSS kompatybilne z różnymi przeglądarkami
Gradienty poziome, pionowe, skośne i radialne
Złożone gradienty wielopunktowe
Wsparcie dla przezroczystości z wieloma punktami przezroczystości
Formaty kolorów Hex, rgb, rgba, hsl, hsla
Wsparcie dla pełnych gradientów wielopunktowych w IE9
Import z obrazu (konwertuj gradient obrazu na CSS)
Importuj z istniejącego CSS
Dostosuj gradient według barwy, nasycenia i jasności
Ponad 135 predefiniowanych gradientów
Zapisywanie własnych predefiniowanych gradientów
Wyjście Sass
Elastyczny panel podglądu
Stałe linki do gradientów do wysyłania i udostępniania
Więcej wkrótce!

Pomoc

Główny regulator gradientu pozwala Ci na:

» Dostosuj pozycję punktu zatrzymania, przeciągając znacznik punktu zatrzymania
» Dostosuj kolor punktu poprzez podwójne kliknięcie w znacznik punktu zatrzymania
» Usuń punkt, przeciągając znacznik punktu zatrzymania w górę lub w dół
» Dodaj nowy punkt, klikając gdziekolwiek pomiędzy istniejącymi znacznikami punktów zatrzymania

Możesz użyć panelu 'Punkty zatrzymania' do dokładniejszego kontrolowania koloru i położenia aktualnie wybranego punktu.

Panel 'Podgląd' pozwala na podgląd aktualnego gradientu jako pionowego lub poziomego oraz szybki podgląd, jak będzie wyglądał gradient dla Internet Explorer w IE.

W końcu panel 'CSS' zawsze ma CSS dla aktualnego gradientu, co ułatwia kopiowanie i wklejanie do arkusza stylów. Możesz również użyć tego panelu do zaimportowania istniejącego gradientu CSS do narzędzia.