Ultimátní generátor CSS gradientu

Předvolby

Jméno:

odstín/sytost otočit importovat css importovat obrázek

Body

Průhlednost:		Umístění:	%
Barva:		Umístění:	%

Sponzor

Náhled

Orientace: Velikost: x IE

CSS

přepnout na sass

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

kopírovat

Formát barvy: Komentáře

Odkaz na, uložení nebo sdílení aktuálního gradientu pomocí jeho trvalého odkazu.

Kompatibilita s prohlížečem

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android prohlížeč	Chrome pro Android
6 - 8 Částečná podpora pomocí filter syntaxe Využití prohlížeče: 0.03%			4 - 9 Podpora pomocí staré -webkit- syntaxe Využití prohlížeče: 0% Vyberte "Maximalizovat kompatibilitu" pro podporu	4 - 5 Podpora pomocí staré -webkit- syntaxe Využití prohlížeče: 0.01% Vyberte "Maximalizovat kompatibilitu" pro podporu		3.2 - 4.3 Podpora pomocí staré -webkit- syntaxe Využití prohlížeče: 0% Vyberte "Maximalizovat kompatibilitu" pro podporu	2.1 - 3 Podpora pomocí staré -webkit- syntaxe Využití prohlížeče: 0.01% Vyberte "Maximalizovat kompatibilitu" pro podporu
9 Částečná podpora pomocí filter syntaxe Plná podpora pomocí SVG (vyberte "IE9 podpora") Využití prohlížeče: 0.05% Vyberte "Maximalizovat kompatibilitu" pro podporu		3.6 - 15 Podpora pomocí -moz- předpony Využití prohlížeče: 0.01% Vyberte "Maximalizovat kompatibilitu" pro podporu	10 - 25 Podpora pomocí -webkit- předpony Využití prohlížeče: 0% Vyberte "Maximalizovat kompatibilitu" pro podporu	5.1 - 6 Podpora pomocí -webkit- předpony Využití prohlížeče: 0.01% Vyberte "Maximalizovat kompatibilitu" pro podporu	11.1 - 11.5 Podpora pomocí -o- předpony Využití prohlížeče: 0% Vyberte "Maximalizovat kompatibilitu" pro podporu	5.1 - 6.1 Podpora pomocí -webkit- předpony Využití prohlížeče: 0% Vyberte "Maximalizovat kompatibilitu" pro podporu	4 - 4.3 Podpora pomocí -webkit- předpony Využití prohlížeče: 0.09% Vyberte "Maximalizovat kompatibilitu" pro podporu
10+ Plná podpora (bez předpony)	12+ Plná podpora (bez předpony)	16+ Plná podpora (bez předpony)	26+ Plná podpora (bez předpony)	6.1+ Plná podpora (bez předpony)	12+ Plná podpora (bez předpony)	7.1+ Plná podpora (bez předpony)	4.4+ Plná podpora (bez předpony)	46+ Plná podpora (bez předpony)

IE9 podpora (?) Maximalizovat kompatibilitu

Odkazy na dokumentaci CSS gradientů: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Co je nového

» Ve výchozím nastavení negenerujte žádné syntaxe s předponami (zapněte znovu pomocí režimu 'Maximalizovat kompatibilitu')

zobrazit více... zobrazit méně...

Předchozí verze (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 aplikaci

Nejlepší editor CSS gradientu vytvořil Alex Sirota. Pokud se vám toto nástroj líbí, prohlédněte si ColorZilla pro pokročilejší nástroje jako kapátko, výběr barvy, editory palet a analýzy webu.

Jak možná víte, HTML5 představil mnoho vzrušujících funkcí pro vývojáře webu. Jednou z funkcí je schopnost specifikovat gradienty čistě v CSS3, bez nutnosti vytvářet obrázky a používat je jako opakující se pozadí pro gradientové efekty.

Důležité: Budete potřebovat aktuální verzi Firefoxu, Chrome, Safari, Opery nebo IE, abyste mohli používat tento generátor gradientů. Výsledné CSS gradienty jsou kompatibilní s různými prohlížeči - budou fungovat v těchto prohlížečích a v starších verzích Internet Exploreru se vrátí k jednoduššímu gradientu.

Funkce

Mocné rozhraní podobné Photoshopu
Výstup CSS pro různé prohlížeče
Horizontální, vertikální, diagonální a radiální gradienty
Složité gradienty s více zastávkami
Podpora průhlednosti s více průhlednými zastávkami
Formáty barev Hex, rgb, rgba, hsl, hsla
Podpora pro plné gradienty s více zastávkami pro IE9
Import z obrázku (konvertovat obrázkový gradient na CSS)
Import z existujícího CSS
Upravit gradient podle odstínu, sytosti a světlosti
Více než 135 přednastavených gradientů
Ukládání vlastních přednastavených gradientů
Sass výstup
Flexibilní panel náhledu
Trvalé odkazy na gradienty pro odesílání a sdílení
Brzy více!

Nápověda

Hlavní ovládání gradientu vám umožní:

» Upravit pozici zastávky gradientu táhnutím značky zastávky
» Upravit barvu zastávky dvouklikem na značku zastávky
» Odstranit zastávku táhnutím značky zastávky nahoru nebo dolů
» Přidat novou zastávku kliknutím kdekoli mezi stávajícími značkami zastávky

Můžete použít panel 'Body' k přesnějšímu ovládání barvy a pozice aktuálně vybraného bodu.

Panel 'Náhled' umožňuje náhled aktuálního gradientu jako vertikálního nebo horizontálního a také umožňuje rychlý náhled, jak bude vypadat zálohový gradient v IE.

Nakonec, panel 'CSS' vždy má CSS pro aktuální gradient pro snadné kopírování a vkládání do vašeho stylového listu. Tento panel můžete také použít k importu existujícího gradientového CSS do nástroje.