Nihai CSS Gradient Generator

Ön Ayarlar

İsim:

ton/doygunluk tersine çevir css içe aktar resim içe aktar

Noktalar

Opaklık:		Konum:	%
Renk:		Konum:	%

Sponsor

Önizleme

Yönelim: Boyut: x IE

CSS

sass'a geçiş yap

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

kopyala

Renk formatı: Yorumlar

Mevcut gradyanı permalink kullanarak kaydetmek, bağlantı vermek veya paylaşmak için.

Tarayıcı uyumluluğu

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Tarayıcı	Android için Chrome
6 - 8 filter sözdizimini kullanarak kısmi destek Tarayıcı kullanımı: 0.03%			4 - 9 Eski -webkit- sözdizimini kullanarak destek Tarayıcı kullanımı: 0% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	4 - 5 Eski -webkit- sözdizimini kullanarak destek Tarayıcı kullanımı: 0.01% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin		3.2 - 4.3 Eski -webkit- sözdizimini kullanarak destek Tarayıcı kullanımı: 0% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	2.1 - 3 Eski -webkit- sözdizimini kullanarak destek Tarayıcı kullanımı: 0.01% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin
9 filter sözdizimini kullanarak kısmi destek SVG kullanarak tam destek ("IE9 desteği" seçin) Tarayıcı kullanımı: 0.05% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin		3.6 - 15 -moz- öneki kullanarak destek Tarayıcı kullanımı: 0.01% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	10 - 25 -webkit- öneki kullanarak destek Tarayıcı kullanımı: 0% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	5.1 - 6 -webkit- öneki kullanarak destek Tarayıcı kullanımı: 0.01% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	11.1 - 11.5 -o- öneki kullanarak destek Tarayıcı kullanımı: 0% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	5.1 - 6.1 -webkit- öneki kullanarak destek Tarayıcı kullanımı: 0% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin	4 - 4.3 -webkit- öneki kullanarak destek Tarayıcı kullanımı: 0.09% Desteklemek için "Uyumluluğu Maksimize Et"'i seçin
10+ Tam destek (öneksiz)	12+ Tam destek (öneksiz)	16+ Tam destek (öneksiz)	26+ Tam destek (öneksiz)	6.1+ Tam destek (öneksiz)	12+ Tam destek (öneksiz)	7.1+ Tam destek (öneksiz)	4.4+ Tam destek (öneksiz)	46+ Tam destek (öneksiz)

IE9 desteği (?) Uyumluluğu Maksimize Et

CSS gradyanları belgelerine bağlantılar: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Neler yeni

» Varsayılan olarak herhangi bir önekli sözdizimi oluşturma (uyumluluğu maksimize etme modunu kullanarak geri açın)

daha fazla göster... daha az göster...

Önceki sürümler (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

Hakkında

Ultimate CSS Gradient Editor, Alex Sirota tarafından oluşturuldu. Bu aracı beğendiyseniz, daha gelişmiş araçlar için ColorZilla'yı kontrol edin, örneğin; eyedroppers, renk seçiciler, palet düzenleyiciler ve web sitesi analizörleri.

Bildiğiniz gibi, HTML5 Web geliştiricileri için birçok heyecan verici özellik sundu. Bu özelliklerden biri, herhangi bir resim oluşturmadan ve gradient efektleri için tekrarlayan arka planlar olarak kullanmadan, saf CSS3 kullanarak gradientleri belirtme yeteneğidir.

Önemli: Bu Gradient Generator'ü kullanmak için Firefox, Chrome, Safari, Opera veya IE'nin güncel bir sürümüne ihtiyacınız olacak. Sonuçta elde edilen CSS gradientleri tarayıcılar arası çalışır - bu tarayıcılarda çalışır ve ayrıca Internet Explorer'ın eski sürümlerinde daha basit bir gradiente geri döner.

Özellikler

Güçlü Photoshop-benzeri arayüz
Çapraz tarayıcı CSS çıktısı
Yatay, dikey, çapraz ve radyal gradientler
Kompleks çok duraklı gradientler
Çoklu opaklık durakları ile opaklık desteği
Hex, rgb, rgba, hsl, hsla renk formatları
IE9 ile tam çok duraklı gradientler için destek
Resimden içe aktar (resim gradientini CSS'ye dönüştür)
Mevcut CSS'den içe aktar
Gradienti ton, doygunluk, açıklık ile ayarla
135'ten fazla gradient ön ayarı
Özel gradient ön ayarlarını kaydetme
Sass çıktısı
Esnek önizleme paneli
Gönderme ve paylaşma için gradient kalıcı bağlantıları
Daha fazlası yakında!

Yardım

Ana gradient kontrolü size şunları yapma imkanı sağlar:

» Durak işaretçisini sürükleyerek gradient durak pozisyonunu ayarlayın
» Durak işaretçisine çift tıklayarak durak rengini ayarlayın
» Durak işaretçisini yukarı veya aşağı sürükleyerek bir durak silin
» Mevcut durak işaretçileri arasında herhangi bir yere tıklayarak yeni bir durak ekleyin

'Duraklar' panelini, şu an seçili olan durağın rengini ve pozisyonunu daha hassas bir şekilde kontrol etmek için kullanabilirsiniz.

'Önizleme' paneli, mevcut gradienti dikey veya yatay bir şekilde önizlemeyi ve ayrıca Internet Explorer fallback gradientinin IE'de nasıl görüneceğini hızlıca önizlemeyi sağlar.

Son olarak, 'CSS' paneli, stil sayfanıza kolayca kopyalayıp yapıştırmak için her zaman mevcut gradient için CSS'ye sahiptir. Bu paneli, mevcut bir gradient CSS'yi araca içe aktarmak için de kullanabilirsiniz.