CSS címkéhez tartozó bejegyzések

CSS Animations

Egy korábbi cikkben írtam a CSS Transitionsről, amellyel JavaScript nélkül, pusztán CSS segítségével határozhatjuk meg, hogy egy CSS tulajdonság hogyan változzon X értékről Y értékre. A CSS Transitions használata viszonylag egyszerű, szinte magától működik, cserébe viszont korlátozottak a lehetőségei. Ezen segít a CSS Animations szabvány, ami az alábbi többlet lehetőségeket adja:

  • animáció ismétlése (animation-iteration-count tulajdonság)
  • animáció irányának meghatározása (előre, visszafelé, oda-vissza váltakozva) (animation-direction)
  • animáció részállapotainak meghatározása (keyframes) (@keyframes)
  • animáció megállítása és elindítása (animation-play-state)
  • CSS tulajdonság értékének meghatározása az animáció előtti és utáni időszakra (animation-fill-mode)

Szintén eltérés, hogy mikor indul az animáció. CSS Transitions esetén az animációt az váltja ki, hogy egy CSS tulajdonság értéke megváltozik (pl. :hover miatt). Ezzel szemben CSS Animations esetén az animáció akkor indul, amikor az animációt leíró stílust hozzárendeljük az adott DOM elemhez (tehát vagy az oldal betöltésekor, vagy az animation-name CSS tulajdonság beállításakor). Itt tehát explicit animációról van szó, ezért is hívják defined animation-nek.

A legszembetűnőbb eltérés, hogy egy (kissé szokatlan) @keyframes kulcsszó után kell megadnunk az animáció egyes fázisait:

@keyframes myAnimationName {
  from {
    left: 0px;
    top: 0px;
  }

  to {
    left: 100px;
    top: 100px;
  }
}

Itt a from és a to helyett írhatunk 0%-ot és 100%-ot, sőt megadhatunk köztes fázisokat is:

@keyframes myAnimationName {
  0% {
    left: 0px;
    top: 0px;
  }

  20% {
    left: 40px;
    top: 40px;
  }

  80% {
    left: 60px;
    top: 60px;
  }

  100% {
    left: 100px;
    top: 100px;
  }
}

Az alábbi animáció például egy 200×200 pixeles négyzet mentén mozgatja a DOM elemet Chrome-ban és Safariban, miközben a háttérszínét is változtatja:

@-webkit-keyframes myAnim
{
  0%   { background:red;    left:0px;   top:0px; }
  25%  { background:yellow; left:200px; top:0px; }
  50%  { background:blue;   left:200px; top:200px; }
  75%  { background:green;  left:0px;   top:200px; }
  100% { background:red;    left:0px;   top:0px; }
}

Az egyes fázisoknál megadhatjuk az átmenet módját is az animation-timing-function CSS tulajdonság használatával.

A @keyframes kulcsszó után az animáció általunk választott neve áll, amire akkor kell hivatkoznunk, amikor hozzárendeljük egy vagy több (újrafelhasználás!) DOM elemhez. Itt kell beállítanunk az animáció többi tulajdonságát is:

div {
  animation-name: myAnimationName;
  animation-duration: 5s;
  animation-timing-function: ease;  
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

Szerencsére itt is van rövidítési lehetőségünk: az animation tulajdonsággal egyetlen sorba sűríthetjük mindezt:

animation: myAnimationName 5s ease 2s infinite alternate both;

Érdekes, hogy a szabvány szerint az animation tulajdonságban nem tudjuk megadni az animation-play-state értékét, ami lehet running vagy paused, azaz ezzel tudjuk CSS szinten elindítani vagy leállítani az animációt:

div {
  animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

A Transitionshöz hasonlóan itt is fontos megadnunk az időtartamot (duration), mert az alapérték itt is nulla, azaz nincs animáció.

A CSS Animations szabvány a W3C oldala szerint jelenleg (2012. június 28. óta) Editor’s Draft állapotban van, de mivel a modern böngészők már támogatják, megpróbálkozhatunk a használatával:

Böngésző Támogató verzió Gyártó előtag
Chrome 4.0+ -webkit-
Firefox 5.0+ -moz-
Internet Explorer 10+ Előtag nélkül
Safari 4.0+ -webkit-
Opera 12.0+ -o-

Összetettebb példák:

Eszközök:

 

Technorati-címkék: ,

CSS Transitions

Klasszikus esetben, amikor egy CSS tulajdonság megváltozik, a böngésző azonnal érvényesíti a változtatást és frissíti a megjelenített oldalt. A CSS3 részeként megjelenő CSS Transitions segítségével ezeket a tulajdonság változásokat tudjuk finoman befolyásolni: meghatározhatjuk, hogy az átmenet mennyi idővel később, mennyi idő alatt és hogyan történjen meg. Mivel ezt JavaScript nélkül, pusztán CSS segítségével tehetjük meg, ezért ezeket az átmeneteket implicit transitions-nek is szokták nevezni.

A W3C oldalán a CSS Transitions szabvány jelenleg (2012. április 3. óta) Working Draft állapotban van, de mivel a böngészők újabb verziói speciális előtagokkal végülis már támogatják, ezért érdemes megismerkedni a lehetőségeivel.

Böngésző Támogató verzió Gyártó előtag
Chrome 4.0+ -webkit-
Firefox 4.0+ -moz-
Internet Explorer 10+ Előtag nélkül
Safari 3.1+ -webkit-
Opera 10.5+ -o-

Az első kérdés, amit tisztáznunk kell, hogy mikor érvényesül a megadott transition? Hát amikor a CSS tulajdonság megváltozik!

De hogyan változhat meg egy tulajdonság pusztán CSS használatával? Például :hover vagy :focus használatával!

Röviden tehát arról van szó, hogy CSS Transitions segítségével például egy div és div:hover szelektorban megadott érték között határozhatjuk meg az átmenet módját.

Az alábbi CSS tulajdonságok állnak rendelkezésünkre:

  • transition-property: melyik tulajdonságot akarjuk animálni
  • transition-duration: mennyi ideig tartson az animáció. Ezt mindenképp meg kell adni, mert alapértelmezés szerint az értéke nulla, azaz nincs animáció!
  • transition-delay: mennyivel később kezdődjön az animáció
  • transition-timing-function: milyen függvény szerint történjen az átmenet

Például rajzoljunk egy 100×100 pixeles piros négyzetet, ami 3 másodperc alatt kétszeres szélességűre nyúlik Chrome-ban 1 másodperccel azután, hogy fölé vittük az egeret:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css"> 
    div
    {
      width: 100px;
      height: 100px;
      background:red;
      -webkit-transition-property: width;
      -webkit-transition-duration: 3s;
      -webkit-transition-delay: 1s;
      -webkit-transition-timing-function: ease;
    }

    div:hover
    {
      width: 200px;
    }
  </style>
</head>
<body>
  <div>Négyzet</div>
</body>
</html>

Szerencsére létezik egy transition tulajdonság is, amivel egyetlen sorba foghatjuk össze az összes beállítást:

-webkit-transition: width 3s ease 1s;

Persze ez cross-browser változatban így néz ki (szerencsére a szintakszis ugyanaz):

-webkit-transition: width 3s ease 1s;
   -moz-transition: width 3s ease 1s;
     -o-transition: width 3s ease 1s;
        transition: width 3s ease 1s;

Ha az összes tulajdonságot szeretnénk animálni, akkor a tulajdonság neve helyett all-t kell megadnunk:

transition: all 3s ease 1s;

Vesszővel elválasztva több tulajdonságra akár többféle átmenetet is megadhatunk:

transition: width 4s, background-color 2s;

Sőt, a késleltetés (ami alapértelmezés szerint nulla másodperc) segítségével akár egymás után is lejátszhatjuk az animációkat! Az alábbi kód például előbb 3 másodperc alatt megváltoztatja a szélességet, azután pedig 2 másodperc alatt a háttérszínt:

transition: width 3s, background-color 2s ease 3s;

Az átmenet “hogyanját” a transition-timing-function tulajdonság határozza meg, ami ease (alapértelmezett), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(…) vagy cubic-bezier(…) értéket vehet fel. Ezzel azt tudjuk befolyásolni, hogy a megadott idő alatt a két érték közötti változás milyen tempóban történjen meg, azaz legyen-e benne gyorsulás, lassulás vagy ugrás. A w3schools egyik példájában ezek közül többet is kipróbálhatunk.

Fontos megjegyezni, hogy nem mindegyik CSS tulajdonság animálható. Az animálható CSS tulajdonságok listája megtalálható a specifikációban.

Összetettebb példák:

 

Technorati-címkék: ,

Megcélzott képernyőfelbontás

A w3schools.com szerint:

“Most computers today have a screen resolution higher than 1024×768 pixels.”

Konkrétan az ő 2012. januári statisztikájuk alapján a böngészők 85.4%-nak 1024×768-nál nagyobb a felbontása.

Néhány általunk üzemeltetett oldalon ez az arány 84-91% között mozog, de ezeknél többnyire műszaki célközönségről van szó.

Ti mostanában mekkora képernyőfelbontásra tervezitek az oldalaitokat?

 

Technorati-címkék: ,

CSS Browser Matrix

Az alábbi oldalon táblázatos formában megtalálható az összes CSS module, property, pseudo class, pseudo element és @-direktíva támogatottsága az egyes böngészőkben: http://realworldvalidator.com

És hogy honnan jönnek az adatok? A Visual Studio csapat szedte össze őket precízen azért, hogy a VS 2012 CSS szerkesztőjét a lehető legpontosabban fel tudják készíteni. Az webhely közvetlenül a VS 2012 (RTM) forráskódja alapján készült.

 

Technorati-címkék: ,

CSSCop

Aki követi az ASP.NET fejlődésével kapcsolatos blogokat, annak Mads Kristensent nem kell bemutatni. Mads a BlogEngine.NET alapítója, a Microsoftnál pedig most már másfél éve a Visual Studio webes editorain dolgozik. A Channel 9-on például megtekinthető egy videó Web Developer Efficiency Tools in Visual Studio 11 címmel, ami abszolút az ő területe.

Ezekből az editor fejlesztésekből a Visual Studio 2010 megjelenése óta több ingyenesen letölthető bővítmény is született, melyek részben Mads neve alatt érhetők el a Visual Studio Gallery-ben. Az egyik kevésbé ismert a CSSCop, ami a CSS Lint ellenőrzőt építi be a Visual Studioba.

Az indítás a StyleCopot, vagy az FxCopot ismerőknek a szokásos. Jobb klikk a projekten, majd Run CSSCop:

CSSCop indítás

Az elemzés eredménye az Error List ablakban jelenik meg:

CSSCop eredmények

Ami viszont kifejezetten szokatlan, az a kivételek kezelése. A CSSCop első indulásakor létrehoz a webhely gyökerében egy csslint.xml fájlt, és abban lehet kikapcsolgatni azokat a szabályokat, amikre nincs szükségünk, sőt van benne egy treatWarningsAsErrors kapcsoló is. Eszembe nem jutott volna itt keresni, de legalább könnyű TFS-be pakolni a beállításokat.

Mint minden automatikus kódelemző esetén, itt is érvényes, hogy ésszel kell kezelni az eredményeket, mert néha nincs igaza. Egyébként “will hurt your feelings”.

 

Technorati-címkék: ,,,

ASP.NET MVC 4: Reszponzív webdizájn

Az ASP.NET MVC 4 projekt sablonokkal készített weboldalak optimálisan jelennek meg asztali és mobil böngészőkön is, pedig nem tartalmaznak külön view-kat a különböző eszközökre. A trükk a viewport és a CSS media query használata, amelyet ebben a rövid videóban mutatok be:

A megtekintéshez teljes képernyős nézet, 720p ajánlott.

 

Image overlay készítése CSS-sel

Az egyik projektünkben egy weboldalon olyan képeket kell megjelenítenünk, amiket a felhasználók töltenek fel. Ez még önmagában nem is nagy durranás, csakhogy a dizájner ráálmodott egy-egy Metros nyíl ikont is ezekre a képekre, overlay formájában:

A végeredmény

A feladat nyilván sokféleképpen megoldható, mi a CSS-t választottuk, dolgozzon csak a böngésző. Ehhez kellett először is az eredeti kép:

Az eredeti kép

Továbbá az overlay, ami ugyanakkora, mint az eredeti kép, majdnem teljesen átlátszó és csak a nyíl van rajta:

Az overlay

A kód pedig nagyon egyszerű, csak fordítva kell gondolkodni: az overlayt jelenítjük meg és a kép lesz a háttér:

<img style="background:url(kep.jpg)" src="overlay.png" />

 

Technorati-címkék: