10 CSS3 technik, se kterými se musíte seznámit

Už jistě známe všechny klasické CSS a známe je všichni nazpaměť, ale co všechny ty nové CSS3 vlastnosti? Ačkoli většina z nich stále vyžadují vendor-prefixy, můžete je použít ve svých projektech již dnes.

Klíčem k úspěchu je nejprve určit, zda jste vám nevadí mírně odlišná interpretace kódu mezi různými prohlížeči. Pokud vám nevadí, řekněme, IE zobrazuji pravoúhlé rohy, než úhledný zaoblené jak jste chtěli. Rozhodnutí záleží na vás. Nicméně, vždy pamatujte, že webové stránky nemusí vypadat stejně v každém prohlížeči.

1. Border-radius

Asi nejvíce oblíbená CSS3 vlastnost vůbec je border-radius, je to něco jako vlajková loď CSS3. Stále se setkáváme s webdesignery, kteří jsou úplně bez sebe, když mají připustit myšlenku, že webové stránky budou v interpretovány v různých prohlížečích internetu jinak.

Ironií je, že jsme všichni naprosto spokojení s myšlenkou poskytovat alternativní vzhled webu pro mobilní prohlížeče. Je s podivem, ale někteří nemají pocit, že stejným způsobem, pokud jde o prohlížení webu v desktopovém prohlížeči.

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

Za povšimnutí stojí, že Safari 5 a IE9 již implementovali oficiální border-radius syntaxi

Circles

Mnoho ze čtenářů ani neví, že něco takového s CSS3 vůbec lze.

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

Pokud se chceme trošku pobavit, potom využijme možností popsaných v bodě 8 tohoto článku, a zarovnejme horizontálně i vertikálně text v kruhu. Vyžaduje to trochu kódu, ale to jen kvůli kompenzaci různých vendors.

display: -moz-box;  
display: -webkit-box;  
display: box;  
  
-moz-box-orient: horizontal; /* default, není třeba zapisovat */  
-webkit-box-orient: horizontal;  
box-orient: horizontal;  
  
-moz-box-pack: center;  
-moz-box-align: center;  
  
-webkit-box-pack: center;  
-webkit-box-align: center;  
  
box-pack: center;  
box-align: center;  

2. Box-shadow

Dále máme všudypřítomné box-shadow, který umožňuje okamžitě vytvořit "hloubku" u Vašeho prvku. Jen to nepřežeňte s nastavením jednotlivých parametrů!

-webkit-box-shadow: 1px 1px 3px #292929;  
-moz-box-shadow: 1px 1px 3px #292929;  
box-shadow: 1px 1px 3px #292929;  

box-shadow nastavíte pomocí čtyř parametrů:

• x-offset
• y-offset
• blur
• color of shadow

A teď, co mnozí neuvědomují, je, že můžete použít více-box shadows najednou. To může vést k opravdu zajímavým efektům.

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;  
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;  
box-shadow: 1px 1px 3px green, -1px -1px blue;  

Chytré Shadows

Při použití stínů na ::before a ::after pseudo-classes, můžeme vytvořit opravdu zajímavé perspektivy. Zde je návod, jak začít:

HTML

CSS

box:after {  
   content: '';  
   position: absolute;  
  
   z-index: -1; /* skryjeme stín za obrázkem */  
  
   /* The Shadow */  
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                  
  
   width: 70%;  
   left: 15%; /* polovina ze zbývajících 30% (viz. width výše) */  
  
   height: 100px;  
   bottombottom:  0;  
}  

Cool, že? Také si myslíme..

3. Text-shadow

text-shadow, je jednou z mála CSS vlastností, kterou můžeme vynechat používání vendor-prefixu. Je to docela podobné box-shadow, tato vlastnost ale musí být použita pro text, a nastavuje se rovněž čtyřmi parametry:

• x-offset
• y-offest
• blur
• color of shadow

h1 {  
   text-shadow: 0 1px 0 white;  
   color: #292929;  
} 

Text-Outline

Opět, stejně jako jeho sourozenci, box-shadow, můžeme použít více stínů, pomocí čárky jako oddělovače. Například, řekněme, že chceme vytvořit efekt pro text. Zatímco WebKit nabízí "stroke" efekt, můžeme dosáhnout tohoto efektu ve více prohlížečích pomocí následující metody (i když ne tak pěkně):

body { background: white; }  
  
h1 {  
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;  
   color: white;  
}  

Text-Stroke

S touto metodou buďte opatrní. Za posledních několik let, toto podporuje pouze WebKit (Safari, Chrome, iPhone). Ve skutečnosti, i když se můžeme mýlit, "text-stroke" ještě není součástí CSS3 specifikace. V tom případě (když bude text bílý na bílém pozadí), bude Firefox zobrazovat zdánlivě prázdnou stránku. Můžete použít buď JavaScript detekci, a tento postup obejít, nebo se ujistěte, že vaše základní barva textu není stejná jako barva pozadí.

h1 {  
   -webkit-text-stroke: 3px black;  
   color: white;  
}

Detekce JavaScriptem

A jak toto udělat pro Firefox a další? Máme řešení.

S funkcí detekce, můžeme použít JavaScript, aby otestoval, která vlastnost je k dispozici. Pokud tomu tak není, nabídneme nouzové řešení.

var h1 = document.createElement('h1');  
if ( !( 'webkitTextStroke' in h1.style ) ) {  
   var heading = document.getElementsByTagName('h1')[0];  
   heading.style.color = 'black';  
} 

Za prvé, vytvoříme h1 element. Pak vyhledáme, zda-webkit-text-stroke vlastnost je k dispozici, přes atribut style prvku H1. Pokud tomu tak není, nastavíme jeho barvu z bílé na černou.

5. Více Pozadí

Vlastnost pozadí byla přepracována, nyní je možné definovat více pozadí v CSS3.

Pojďme vytvořit hloupý příklad, prostě jen pro příklad. Samozřejmě, že pro reálnou aplikaci můžete použít texturu a možná nějaký ten gradient.

.box 
{  
  background: url(image/path.jpg) 0 0 no-repeat,  
              url(image2/path.jpg) 100% 0 no-repeat;  
} 

Výše vidíte, že jsme použili čárku pro oddělení obou pozadí, a odkazujeme na dva samostatné obrázky na pozadí. Všimněte si, jak v prvním případě, je to umístěno v levém horním rohu v poloze (0 0), a ve druhém, do pravé horní polohy (100% 0).

Ujistěte se, že máte záložní řešení pro prohlížeče, které nemají podporu pro více pozadí, protože vaše pozadí vynechají úplně - tedy bez pozadí.

Kompenzace pro starší prohlížeče

Chcete-li přidat jeden obrázek na pozadí pro starší prohlížeče, jako IE7, deklarujte pozadí dvakrát: nejprve pro staré prohlížeče, a podruhé jako "override".

.box {  
/* starší prohlížeče */
background: url(image/path.jpg) no-repeat;  
  
/* moderní prohlížeče */  
background: url(image/path.jpg) 0 0 no-repeat,  
 url(image2/path.jpg) 100% 0 no-repeat;  
}  

6. background-size

Až donedávna jsme byli nuceni používat záludné techniky umožňující měnit velikost obrázků na pozadí.

background: url(path/to/image.jpg) no-repeat;  
background-size: 100% 100%;  

Výše uvedený kód roztáhne obrázek na celou šírku pozadí, aby vyplnil celý prostor. Jako příklad, co když jsme chtěli konkrétní obrázek, aby vyplnil celé pozadí prvku "body", bez ohledu na šířku okna prohlížeče.

body, html { height: 100%; }  
  
body {  
 background: url(path/to/image.jpg) no-repeat;  
 background-size: 100% 100%;  
}  

To je vše. Background-size má dva parametry: x a y.

Zatímco nejnovější verze Chrome a Safari mají podporu background-size nativně, stále potřebujeme použít vendor-prefixy pro starší prohlížeče.

body {  
 background: url(path/to/image.jpg) no-repeat;  
 -moz-background-size: 100% 100%;  
 -o-background-size: 100% 100%;  
 -webkit-background-size: 100% 100%;  
 background-size: 100% 100%;  
}  

7. text-overflow

Původně vyvinutá vlastnost pro Internet Explorer, text-overflow ovládáme pomocí dvou hodnot:

• clip
• ellipsis

Tato vlastnost může být použit k oříznutí textu, který přesahuje jeho vymezenou oblast, zatímco pro uživatele jsou zobrazeny například tři tečky "...".

Věděli jste to? Internet Explorer podporuje tuto vlastnost, už od verze IE6!!

    
.box {  
   -o-text-overflow: ellipsis;  
   text-overflow:ellipsis;  
  
   overflow:hidden;  
   whitewhite-space:nowrap;  
  
   border: 1px solid black;  
   width: 400px;  
   padding: 20px;  
  
   cursor: pointer;  
}  

Zajímavé je, že můžete ukazat celý text, když uživatel najede myší přes objekt.

 
#box:hover {  
  whitewhite-space: normal;  
  color: rgba(0,0,0,1);  
  background: #e3e3e3;  
  border: 1px solid #666;  
} 

Věděli jste to? Můžete také zadat vlastní řetězec, který by měl být používán na místě se třemi tečkami. Pokud tak učiníte, bude řetězec reprezentovat přetečený text.

8. Flexibilní Box Model

Flexibilní Box Model, nakonec nám umožní vypořádat se s nepříjemnou "float" vlastností. I když to dá trochu práce, jakmile to uděláte, budete jásat radostí.

Pojďme postavit rychlé demo, a vytvořit jednoduchý dvou-sloupcový layout.

 
  
  
 
 Main content here 
  
   
  
 

Nyní k CSS: budeme muset nejprve udělat hlavní kontejner. Nadefinujeme si nějakou šířku a výšku, protože zatím nemáme žádný skutečný obsah.

 
#container 
{  
   width: 960px;  
   height: 500px; /* jen pro demo */  
  
   background: #e3e3e3;  
   margin: auto;  
  
   display: -moz-box;  
   display: -webkit-box;  
   display: box;  
}

Dále, pojďme pro demo dát jedinečné barvy pozadí pro hlavní div a aside.

 
#main {  
 background: yellow;  
}     

aside {  
 background: red;  
}  

Nyní na tom ještě není nic moc k podívání.

Nyní se podívejme na to, co se stane, když výslovně stanovíme šířku na #main oblast.

 
#main {  
  background: yellow;  
  width: 800px;  
}  

No to je trochu lepší, ale stále máme tento problém - kde #aside ještě nevyplňuje zbytek prostoru. Můžeme opravit pomocí box-flex vlastnosti.

box-flex říká prvku, aby se natáhl přes celý prostor.

 
aside {  
   display: block; /* cause is HTML5 element */  
   background: red;  
  
  /* take up all available space */  
   -moz-box-flex: 1;  
   -webkit-box-flex: 1;  
   box-flex: 1;  
}  

S touto vlastností, bez ohledu na šířku #main oblasti, bude #aside zabírat veškeré volné místo. Tímto CSS3 dává odpovědi na všechny ty šílené otázky kolem float vlastnosti a vytváření layoutu.

9. Resize

K dispozici pouze pro Firefox 4 a Safari 3, resize - část CSS3 UI - umožňuje nastavit velikost textarea.

Všimněte si, že ve výchozím nastavení prohlížeče WebKit a Firefox 4 umožňují textarea upravovat, a to jak vertikálně i horizontálně.

 
textarea {  
   -moz-resize: vertical;  
   -webkit-resize: vertical;  
   resize: vertical;  
}  

Možné hodnoty

• both: Resize vertically and horizontally
• horizontal: Limit resizing to horizontally
• vertical: Limit resizing to vertically
• none: Disable resizing

10. Transition

Snad nejvíce vzrušující Kromě CSS3 je schopnost aplikovat animace prvků, bez použití JavaScriptu.

Ačkoli to vypadá, že IE9 ještě nebude podporovat CSS transitions, tak to rozhodně neznamená, že byste je neměli používat.

Pojďme udělat efekt, kde po najetí na položku seznamu efektně text popojede směrem doprava.

HTML

 
  
   
  
       Hover Over Me   
   
  
   
  
       Hover Over Me   
   
  
   
  
       Hover Over Me   
   
  
   
  
       Hover Over Me   
   
  
  

CSS

ul a {  
   -webkit-transition: padding .4s;  
   -moz-transition: padding .4s;  
   -o-transition: padding .4s;  
   transition: padding .4s;  
}  
  
a:hover {  
   padding-left: 6px;  
}   

Děkujeme moc za přečtení článku, doufáme, že jste se naučili alespoň něco nového!