Lineární přechody pomocí CSS3 ve všech prohlížečích

Pátek, Září 16, 2011
Lineární přechod

Lineární přechod

Další článek o možnostech CSS3 a knihovně PIE, které ulehčí běžnému kodérovi práci, je zde. Dnes se budeme věnovat lineárním přechodům a to konkrétně lineárním přechodům směrem shora dolů. Bez CSS3 bylo nutné vytvářet lineární přechody na pozadí pomocí obrázků. Zkrátka a dobře se přechod nakreslil, zúžil na jeden pixel, vložil do CSS jako obrázek na pozadí a nastavilo se opakování v potřebné ose. V CSS3 nyní existuje příkaz linear-gradient, který vás od této činnosti oprostí.

Stejně jako tomu bylo i u kulatých rohů, tak ani zde není tento příkaz přímo podporován a je nutno využít vendor prefixů. Zápis v moderních prohlížečích pak vypadá takto:

background-color:#E9E9E9;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#f1f1f1), to(#e1e1e1));
background-image: -moz-linear-gradient(#f1f1f1, #e1e1e1);
background-image: linear-gradient(#f1f1f1, #e1e1e1);

První barva vždy určuje barvu na začátku přechodu (nahoře) a druhá na konci (dole). Pro případ, že by nějaký prohlížeč příkaz neznal, pak je na začátku definována jednoduchá barva, která bude v takovém případě zobrazena. Přechod se vždy roztáhne od začátku elementu po jeho konec. Tímto zápisem se zbavíme všech kliček pomocí obrázků a vytvoříme přechod jediným řádkem v CSS souboru.

Jak by to bylo jednoduché, kdyby opět nenastal problém jménem Internet explorer, který ani jednu konstrukci nepodporuje. A v IE9 není ani možné využít knihovnu PIE, protože tam vykreslování přechodu nefunguje. V zásadě existují 2 řešení. Jedno snazší a druhé složitější. A proč se učit i to složitější? Protože to snazší má určité omezení.

  1. Použijeme příkaz filter.
  2. Využijeme podpory svg obrázků u IE9.

Příkaz filter

Definice přechodu pomocí příkazu filter vypadá následovně:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d2d8',endColorstr='#ebecfc');

Stejně jako v předchozím případě bude první barva nahoře a druhá dole. Celá definice přechodu fungující ve všech běžně používaných prohlížečích pak vypadá takto:

background-color:#E9E9E9;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#a1d2d8), to(#ebecfc)); /* Chrome a Safari*/
background-image: -webkit-linear-gradient(#a1d2d8, #ebecfc); /* Chrome a Safari*/
background-image: -moz-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -o-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -ms-linear-gradient(#a1d2d8, #ebecfc); /* pro IE10 */
background-image: linear-gradient(#a1d2d8, #ebecfc); /* CSS3 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d2d8',endColorstr='#ebecfc'); /* IE9 a starší*/
zoom:1; /* Bez zoomu se přechod v IE nezobrazí */

Zdá se vám, že je tam toho hodně? A to je ta snazší varianta řešení, a jak jsem psal výše, tak má bohužel své omezení. Pokud chcete na elementu současně s přechodem definovat i zoblené rohy, pak se pozadí stejně vždy vykreslí jako obdélník. Toto řešení je tak určené jen pro případy, kdy chcete definovat přechod na pozadí elementu, který má ostré rohy. Typicky jde např. o pozadí celého webu.

Jaký je problém při použití kulatých rohů?

Do verze 8 internet exploreru není potřeba nic řešit a stačí vykreslit jak přechod, tak kulaté rohy pomocí knihovny PIE jednoduchým příkazem:

/* Příkazy pouze pro IE */
border-radius:5px;
-pie-background: linear-gradient(#a1d2d8, #ebecfc);
behavior: url(/PIE.htc);

Jak na knihovnu PIE se můžete dočíst v předchozím článku o kulatých rozích nebo v dalších článcích o PIE zde.

Bohužel tento zápis nevykreslí pozadí v IE9 a při použití předchozího filtru se přes kulaté rohy vykreslí obdélník s přechodem, který už má ale rohy ostré. Pokud je přechod jen nepatrný, pak se můžete smířit s tím že v IE9 prostě nebude a nemusíte to dále řešit. Pokud je však přechod výrazný a je třeba ho mít na stránce, pak na to musíte jít jinak.

Řešením je SVG obrázek na pozadí

Internet explorer 9 již naštěstí podporuje SVG obrázky, které dále využijeme. Hned na začátku si vytvoříme jednoduchý obrázek, který nám pak poslouží jako pozadí. Obrázek si vytvoříme tak, že si otevřeme jakýkoli textový editor a vložíme do něj následující definici:











Soubor pak uložíme např. jako pozadi.svg. Jednotlivými příkazy se nebudu dále zabývat. Pro nás jsou důležité pouze atributy stop-color v elementech stop, které definují barvy přechodu.

Všimněte si, že barvy jsou zde definovány obráceně. Nahoře bude barva, která je definována jako druhá a dole bude ta, která je definovaná jako první. Vzhledem k tomu, že IE8 a starší pracují s PIE normálně, vytvoříme si nový css soubor jen pro IE9, který vložíme do HTML pomocí komentářové podmínky.



V souboru ie9.css se budou nacházet pouze definice pro internet explorer 9. Pro všechny ostatní prohlížeče bude sloužit soubor style.css. Celá definice pak bude vypadat takto:




Dejme tomu, že budeme formátovat element

, kterému definujeme kulaté rohy a přechod na pozadí. Stylopist v jednotlivých souborech, pak bude vypadat následovně:

/* soubor style.css */
div.ukazka{
/* definice kulatých rohů */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* definice pozadí */
background-color:#E9E9E9; /* barva pro jistotu */
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#a1d2d8), to(#ebecfc)); /* chrome a safari */
background-image: -webkit-linear-gradient(#a1d2d8, #ebecfc); /* chrome a safari */
background-image: -moz-linear-gradient(#a1d2d8, #ebecfc); /* Firefox a vše na Gecku */
background-image: -o-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -ms-linear-gradient(#a1d2d8, #ebecfc); /* IE10 */
background-image: linear-gradient(#a1d2d8, #ebecfc); /* CSS3 */
-pie-background: linear-gradient(#a1d2d8, #ebecfc); /* IE8 a starší */
behavior: url('/PIE.htc'); /* IE8 a starší */
}
/* soubor ie9.css */
div.ukazka{
background-image: url('pozadi.svg');
}

Tento kód je sice na první pohled komplikovanější, ale funguje napříč všemi běžně používanými prohlížeči a je možné běžně používat kulaté rohy u všech elementů. Pokud máte tento kód a kód svg souboru někde uložený pak stačí jen použít copy and paste, změnit barvy a nemusíte používat obrázky jako přechod na pozadí. Výsledný přechod se také na rozdíl od obrázku vždy natáhne na celou výšku elementu.

Na co si dát pozor?

Vždy dávejte definici pozadí do background-image a jistěte jej klasickou barvou background-color pro případ, že by se přechod nevykreslil. Pokud dáte přechod pouze do definice background, může se stát, že prohlížeč, který tento zápis nechápe, přepíše také dříve definované background-color na transparent. Tím pak celé jištění nemá smysl.

Samozřejmě je také třeba dodržovat určitá pravidla aby knihovna PIE vždy fungovala správně.

 

One Comment

  1. Alladin napsal:

    Díky moc, výborně pomohlo!

Napsat komentář