Posts Tagged ‘CSS3’

Stín pod elementem

Stín pod elementem

Dnes se opět budeme věnovat možnostem CSS3 a knihovně PIE. V minlých článcích jsme si pověděli jak vytvořit kulaté rohy, na co si dát u knihovny PIE pozor a jak vytvářet lineární přechody. Dnes si povíme jak na stíny pod blokovými elementy.

Dříve se pro vytvoření stínů využívaly obrázky na pozadí, které vypadaly jako stín. Poměrně obtížně se tak řešily případy, kdy na pozadí byl přechod nebo nějaký vzorek. Zjednodušení přinesly PNG obrázky a jejich poloprůhlednost, se kterou však byly vždy problémy v internet exploreru. V CSS3 je možné vytvořit stín pod blokovým elementem jednoduchým příkazem:

box-shadow: #666 0px 2px 3px;

Jednotlivé části příkazu znamenají následující:

box-shadow: barva-stínu posunutí-ve-směru-x posunutí-ve-směru-y šířka-rozmazání;

Stejně jako tomu bylo u definice kulatých rohů i u lineárního přechodu na pozadí, tak ani zde není tato vlastnost standardně podporována a je nutno využít vendor prefixy jednotlivých prohlížečů. V případě internet exploreru opět využijeme knihovnu PIE. Celý zápis fungující ve všech webových prohlížečích bude vypadat takto:

-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu. Jak na knihovnu PIE se můžete dočíst v článku o kulatých rozích nebo v dalších článcích o PIE zde.

Vykreslení stínu, kulatých rohů a přechodu na pozadí je samozřejmě možné libovolně kombinovat. V případě problémů si zkuste přečíst článek na co si dát u PIE pozor.

 

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ě.

 

Kulaté rohy

Kulaté rohy na webových stránkách nešly nikdy přímo vytvořit a vždy bylo nutné nějakým způsobem tento nedostatek obejít. Nejčastější řešení spočívalo ve využití obrázku na pozadí, ve kterém byly kulaté rohy nakreslené. Vhodným nastylováním vznikl efekt, že je sám prvek kulatý. Druhou možností, se kterou jsem se setkal bylo vytvoření kulatých rohů pomocí javascriptu. Ten fungoval na principu, že kolem elementu, který měl mít kulaté rohy, vytvořil tolik dalších div-ů, kolik bylo potřeba a napozicoval je tak, že vytvořily kulatý roh.

V CSS3 nyní existuje vlastnost border-radius, která libovolnému blokovému elementu vytvoří kulaté rohy bez nejrůznějších obezliček. Jehho syntaxe je border-radius:horní-levý horní-pravý dolní-pravý dolní-levý; Případně pokud chcete mít pro všechny rohy stejný poloměr stačí zadat např. border-radius:5px; Problém je v tom, že specifikace CSS3 ještě není dokončena a tak tento příkaz není přímo podporován. Moderní webové prohlížeče jej však umožňují použít díky vendor prefixům.

Tento zápis umožní zaoblit rohy ve všech moderních prohlížečích:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

Problém však nastává u internet exploreru, který tyto příkazy nepodporuje. Řešením je však PIE. Pomocí knihovny PIE je možné používat určité vlastnosti CSS3 i v IE. Jedná se o htc soubor, který se vloží do CSS stylopisu pomocí příkazu behavior. Kompletní zápis pro všechny prohlížeče pak vypadá následovně.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu.

Tento zápis pak zaoblí rohy v Internet exploreru, Mozille Firefox, Webkitu, Google Chrome a nejnovější Opeře. To znamená, že web používající tento zápis se zobrazí korektně nejméně v 95% prohlížečů. Zbývající prohlížeče zobrazí rohy klasicky hranaté, což kromě estetického dojmu nemá žádný další vliv na funkčnost nebo přístupnost. Proto nemá moc smysl se zbývajícími 5ti procenty příliš zabývat.

Ve specifikaci jsou pak popsány mnohem širší možnosti zápisu, ty však nemusí být ještě podporovány všemi prohlížeči a nejsou podporovány ani knihovnou PIE. Běžně se však používají pouze obyčejné kulaté rohy, kde mají všechny stejný poloměr. Specifikaci si můžete prohlédnout zde.

Dále si také přečtěte článek na co si dát u knihovny PIE pozor nebo další články o knihovně PIE.