Tiež sa tu prejavila značná rozdielnosť v rýchlosti renderovania tejto fotogalérie.

V posledných verziách Chromu, Firefoxu a Opera prehliadača nebol s podporou CSS3 rotation žiadny problém i keď je potrebné ich zapísať pomocou prefixu pre konkrétny prehliadač. Ako sa ukázalo Internet Explorer (vôbec som nečakal, že mi to uľahčí) nepodporuje nič poriadne z CSS3 a tak som musel siahnuť po jeho vlastných (hnusných) riešeniach aby som docielil "požadovaný" efekt.

Rotácia elementov

Pomocou CSS3 môžete naklopiť ľubovoľný HTML element (DIV, text, obrázky, formuláre. celé stránky) do rôzneho uhlu. Vzhľadom na to, že reálna podpora CSS3 ešte hodnú dobu nebude už dnes môžeme želaný efekt docieliť CSS zápismi pre jednotlivé rendrovacie enginy konkrétneho prehliadača. Pre moje použie som si vystačil s otočením alementov len pod uhlom a nie aj do priestoru.

Pre bežné moderné prehliadače je to možné zapísať takto:

-webkit-transform: rotate(-25deg); /* zápis pre Chrome a Safari */
-moz-transform: rotate(-25deg);    /* zápis pre Firefox */
-o-transform:rotate(-25deg);       /* zápis pre Operu od verzie 9 */
rotation: -25deg;                  /* štandardný zápis, zatiaľ nepodporovaný */

Internet Explorer a rotácia objektov

Na otočenie elementov v IE môžete použiť 2 spôsoby. Ak potrebujete pootočiť element vždy o 90 stupňov tak použite nasledujúci zápis:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

• 0 - bez otočenia
• 1 - otočené o 90 stupňov
• 2 - otočené o 180 stupňov
• 3 - otočené o 270 stupňov

V prípadoch kedy potrebujete niečo otočiť o 90 stupňov v IE je táto možnosť určite jednoduchšia ako nasledujúca.

Otočenie elementov v IE o ľubovoľný uhol? Ufff... ale dá sa to!

Na moju galériu som potreboval aby fotografie boli pootáčané v ľubovoľnom uhle. Dalo by sa to spraviť tak, že si vytvorím už pootáčané obrázky v PNG ale veľkosť takýchto obrázkov bez kompresie by bola veľmi veľká a nikto by nečakal tak dlho aby sa mu stránka natiahla. Všetky ostatné prehlaidače sa dali ľahko vyriešiť a jediný oriešok (alebo radšej orech) na rozlúsknutie bol už len IE.

Pre otočenie elementov v IE existuje filter s názvom: progid:DXImageTransform.Microsoft.Matrix. Ten okrem otáčania umožňuje aj naklápanie v priestore a scaling. Ako je zvykom tak syntax Microsoft filtrov pre IE je tak ťažkopádny, že si ho proste nezapamätáte ani za nič. Na prvý pohľad tam ani nie je nič logické a napríklad také otočenie elementu o 45° vy sa zapísalo nejak takto:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');

Ako vypočítať hodnoty pre otočenie?

Najjednoduchšie je použiť CSS Matrix Rotation generátor ktorý Vám vygeneruje CSS pre otočenie elementu pre všetky prehliadače. Viac informácií o parametroch filtra nájdete na Microsoftackej stránke.

Výkon prehliadača a antialiasing

Ak si pozriete moju galériu na peteroravec.com v rôznych prehliadačoch tak rýchlo zistíte, že rýchlosť stránky je rôzna (i keď aplikovaných efektov je veľa). V Google Chrome (verzia 5.0.375.125 beta) je galéria rýchla ale má strašne zubaté hrany obrázkov. V ostatných prehliadačoch sú hrany ostré a pekné ale aj rýchlosť sa tu mení. U mňa na PC (quad core 2,4GB) vo Firefoxe presun fotiek myšou mierne seká. V Opere a IE to ide lepšie.

Tieto nedostatky dúfam vyrieši podpora GPU ktorá má byť vo Firefoxe 3.7 a najnovšom IE9. Uvidíme do budúcnosti.

I keď sme si teraz ukázali ako dosiahnuť určitý efekt vo všetkých prehlidačoch nie je to ideálne riešenie a chce to pevné nervy. Obávam sa ale, že na časy kedy už nebudeme riešiť podporu CSS3 si počkáme aspoň 5 rokov kým sa svet nezbaví IE6, IE7 a IE8. V prípade, že sa Vám podobné riešeni nepáči pozrite si otáčanie elementov založené na Javascripte a Jquery. http://code.google.com/p/jqueryrotate/

Podobné články

• 22. November 2008 -- Najvhodnejšia šírka webu? 960 Grid system
• 5. September 2008 -- Ako vytvoriť ikonku v adresnom riadku prehliadača – FavIcon
• 28. August 2008 -- Internet Explorer 6 je brzda internetu
• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!
• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v CSS?

Aká je najvhodnejšia šírka pre dnešné internetové stránky? Niekto to nerieši, pre iného je to možno problém. Ja som nikdy nejak extra neskúmal aká šírka stránky je najvhodnejšia ale dávnejšie som narazil na stránku 960.gs ktorá ma presvedčila o tom, že najvhodnejšou šírkou pre dnešné weby je 960 pixelov.

Prečo je 960 pixelov najvhodnejšie?

Hlavne preto, že číslo 960 je deliteľné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. Na stránke 960.gs je toho samozrejme viac ale 960 Grid System Vám umožní flexibilne si rozvrhnúť a rozkúskovať jednotlivé časti webu.

Základ systému

Základ systému tvoria stĺpce v celkovej šírke 960 pixelov rozdelené na 12 a 16 stĺpčekov. 12 stĺpcový systém obsahuje stĺpce šírky 60px a 16 stĺpcový šírku 40px. Každý stĺpec obsahuje 10 pixelový margin v ľavo a pravo.

K čomu je to dobré?

Vzhľadom na tento stĺpcový systém si pri tvorbe webu môžete presne rozvrhnúť jednotlivé časti webu tak, aby vždy vyplnili vhodnú šírku a zároveň pôsobili vyvážene a pekne. Stačí že jednotlivé bloky budú mať šírku vždy podľa mriežky.

Jeden z príkladov zo stránky 960.gs ktorý to pekne znázorňuje...

960 Grid systém je podľa mňa vhodné používať i keď ja to momentálne veľmi nerobievam ale snažím sa svoje zvyky odnaučiť a držať sa niečoho takéhoto. Minimálne si tým uľahčíte robotu pretože nemusíte rozmýšľať nad šírkou jednotlivých častí Vašeho webu. Viac informácií a súborov na stiahnutie na http://www.960.gs

Podobné články

• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 5. September 2008 -- Ako vytvoriť ikonku v adresnom riadku prehliadača – FavIcon

Uvedieme si dva spôsoby ako centrovať obsah ktoré sa od seba dosť líšia. V praxi ale nieje úplne ideálne riešenie ktoré by všade fungovalo bez problémov. Hlavne kvôli IE6 (najlepšiemu prehliadaču na svete) je potreba byť opatrnejší pretože ohľadom centrovania je IE6 častokrát ťažko zlúčiteľné.

Spôsob horizontálneho centrovania pomocou position: absolute

Jeden zo spôsobov horizontálneho vycentrovania obsahu je , že celý obsah je obalený DIVom ktorý má určenú pevnú šírku v pixeloch. Obalovací DIV je pritom najvrchnejší obalovací element. Pre jeho vycentrovanie zadefinujeme takéto CSS:

#container {
<strong>  width: 500px;</strong>
  background: red;<strong>
  position: absolute;
  left: 50%;
  margin-left: -250px;</strong>
}

Spôsob horizontálneho centrovania pomocou margin: auto

Centrovanie obsahu pomocou margin: auto je ten vhodnejší spôsob centrovania ktorého by som sa držal i keď si to vyžaduje možno viac písania a optimalizovania. Tu budeme ale okrem jedného obaľovacieho DIVu používať dva obaľovacie DIVy. Prečo? Preto, že niektoré prehliadače pri centrovaní obsahu pomocou margin: auto sa nerozoztiahnu po celej výške - neobtečú a neroztiahnu DIV a teda ak má tento DIV farebné pozadie prípadne ako pozadie obrázok tak ho nemáme po celej výške.

Znie to divne? Možno ale my s tým nič nespravíme a ak budeme chcieť aby to bolo rovnaké vo všetkých browsroch tak sa s tým budeme musieť zmieriť. Urobíme tzv. matriošku čo sú naše dva obaľovacie DIVy.

Jeden bude centrovať pomocou margin: auto a text-align: center na stred a druhý ktorý je vnorený dovnútra bude obsahovať float a prípadné pozadie. CSSsko by mohlo vyzerat nejak takto:

body {
  text-align: center;
}

#obsah-vonku {
  display: block;
  <strong>width: 500px;
  margin: 0 auto;</strong>
}

#obsah-dnu {
  <strong>float: left;</strong>
  width: 100%;
  margin: 0;
  background: red;
  text-align: left;
}

Prečo používame na centrovanie dva DIVy?

Ako som písal vyššie robíme to kvôli riešeniu problému zobrazovania farebného pozadia. Problém je v tom, že ak centrujeme div pomocou margin: auto tak nemusí obsah obtekať. To sa dá ľahko vyriešiť pomocou float: left ale použiť naraz float a margin: auto nejde pretože float by náš obsah zarovnal k nejakému rohu a to predsa nechceme lebo centrujeme na stred.

Proste a jednoducho... dva DIVy. Jeden má definované margin: 0 auto; (ide hlavne o margin left a right aby bol auto) s danou šírkou. Toto nám to dá na stred. Druhý div má float: left aby prípadné pozadie sa roztiahlo podľa obsahu na celú výšku. Celá veda

Podobné články

• 13. Júl 2008 -- Relatívne a absolútne poziciovanie v Cascading Style Sheets (CSS)
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 28. August 2008 -- Internet Explorer 6 je brzda internetu

• ak nastavíme nejakému obaľovaciemu elementu napríklad DIVu position: relative; zmeníme tým východzí bod pre ďalšie elementy umiestňované absolútne vo vnútri toho elementu
• ak nastavíme nejakému elementu (ktorý je vnorený napríklad do DIVu ktorý ale nemá nastavené position relative) tak vtedy môžete pohybovať relatívne s ľubovoľným elementom pomocou top, bottom, left, right

Zdá sa to zložité?

Asi sa to zdá zložité ale vôbec nieje, len sa to trochu blbo vysvetľuje ale skúsim to na obrázkoch.

Proste a jednoducho, keď dám niečomu position: absolute a napríklad top: 0; left: 0; tak sa to zobrazí v ľavom hornom rohu prehliadača. Ak ale element v ktorom mi používame toto position absolute má nastavený position: relative tak sa deje presne to isté ako o pár svoj vyššie ale element je umiestnený v ľavom hormon rohu toho elementu ktorý má definované práve to position relative. Tým position relative len zmeníme východzí bod pre umiestňovanie.

Čo sa stane keď dáte nejakému elementu position: absolute?

Odkazu nastavíte:

#mojdiv {
  background: red;
  /* tento kus kódu len vycentruje DIV a
  nastaví mu pevné rozmery */
  width: 300px;
  height: 100px;
  margin: 150px auto 0 auto;
}  

#mojodkaz {
<strong>  position: absolute;</strong>
  top: 0;
  left: 0;
  background: green;
}

Kde bude umiestnený odkaz?

Odkaz sa zobrazí v ľavom hornom rohu prehliadača a je jedno v akom DIVe je alebo ako hlboko je vnorený v kóde. Implicitne sa všetky elementy zobrazujú v ľavom hornom rohu prehliadača.

Čo robí position: relative?

Position: relative zmení východzí bod pre absolútne poziciovanie z ľavého horného rohu prehliadača na ľavý horný roh elementu ktorému definujete práve to position: relative. Elementy z predchádzajúceho príkladu by sa zobrazovali nejak takto ak by sme červenému DIVu definovali position: relative.

Okrem zmeny východzieho bodu môžete použiť position: relative aj na zmenu pozície elementu z jeho aktuálnej polohy. Pomocou top, left, right a bottom môžeme s elementom hýbať ľubovoľne z jeho aktuálnej pozície.

Podobné články

• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v CSS?
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 28. August 2008 -- Internet Explorer 6 je brzda internetu