Tag Archives: CSS

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:

Sass, LESS és CoffeeScript támogatás Visual Studiohoz

A Mindscape csapata egy igen ütős bővítményt készített a Visual Studio 2010-hez: a Web Workbench egyetlen bővítménnyel ad IntelliSense és syntax highlighting támogatást Sass, LESS és CoffeeScript fájlokhoz.

Ha ezek a technológiák nem ismerősek, akkor röviden csak annyit, hogy az első kettő a CSS, a harmadik pedig a JavaScript fejlesztéssel kapcsolatos fejfájásokat igyekszik enyhíteni. Elsőre mindhárom elég szokatlan, de hamar nagyon vonzóvá tudnak válni, bár fejlesztőeszköz támogatás hiányában eddig az “élmény” elmaradt. Szerencsére most ez az ingyenes Visual Studio bővítmény egy csapásra megoldja a problémát.

Akit pedig az érdekel, mindezt hogyan sikerült a fejlesztőknek megvalósítani, annak ajánlom figyelmébe ezt a blogbejegyzést.

Ti használjátok vagy használnátok a LESS, a Sass vagy a CoffeeScript közül valamelyiket? Mik a tapasztalatok?

Technorati-címkék: ,,

Internet Explorer 10 Platform Preview 2

Áprilisban a MIX konferencián a Microsoft bemutatta az Internet Explorer következő verziójának első előzetesét, amit ezen a héten – pontosan a korábban meghirdetett ütemtervet követve – követett a Platform Preview 2. Ízelítő az újdonságokból:

  • Positioned Floats
  • CSS3 Gradients (minden image típuson)
  • Korlátlan számú és mélységű CSS stíluslap kezelése
  • CSSOM Floating Point Value támogatás
  • Továbbfejlesztett hit testing API
  • Media Query Listeners
  • HTML5: async attribútum támogatása script elemeken
  • HTML5 Drag and Drop
  • HTML5 File API
  • HTML5 Sandbox
  • HTML5 Web Workers
  • Web Performance APIs

Mindezek nagyon ígéretesek, számomra az aszinkron szkript futtatás a web workerek a legizgalmasabbak. De szép lesz, amikor ezeket már valóban minden böngésző támogatni fogja…

Addig is az IE10 előzetes letölthető a http://ietestdrive.com oldalról.

Ti mit gondoltok?

 

Technorati-címkék: ,,,

Web Standards Update for VS 2010 SP1

HTML5 és Visual Studio 2010Fontos frissítés jelent meg a Visual Studio 2010 SP1-hez és a Visual Web Developer Expresshez, amely felokosítja ezeket az eszközöket a HTML5 és a CSS3 szabványok terén. Mivel VS extensionről van szó, ezért nem tudhat mindent (vannak olyan dolgok, amihez a VS kódját módosítani kell, de az ígéretek szerint ez is meglesz a következő verzióra), de az előrelépés így is jelentős:

HTML5

HTML5 a Visual Studio eszközsávon

IntelliSense és kód validálás a legfontosabb HTML5 elemekhez:

Browser APIs

CSS3

CSS validálás a Visual Studio eszközsávon

IntelliSense és kód validálás CSS3 finomságokhoz:

Akit képernyőképekkel lehet meggyőzni, annak feltétlenül ajánlom Scott Hanselman cikkét, akinek pedig ennyi is elég volt, annak irány a letöltő oldal.