Előúszó képkeret CSS3 és HTML5 segítségével

Szerző: admin | CSS ,html5 | 2010 augusztus 16. 16:45

A HTML5 nem ma fog elterjedni és szabvánnyá vállni, azonban akit érdekelnek az újdonságok, azoknak tetszeni fog ez a cikk. Az új “figure” elemet és annak a tabindex tulajdonságát fogjuk használni, hogy a tab billentyű lenyomására egymás után előugorjanak a képek.

HTML5

A figure elem arra való, hogy lehetővé tegye a benne található tartalmat kiemelni a dokumentumból. Általában képet, diagrammokat, videót tesznek bele.

Szerves részét képezi a figcaption, mely aláírásként szolgál, leginkább egy form legendjéhez lehet hasonlítani. A mai cikkben őket használjuk.

1.
2.
3.
4.
5.
6.

<section class="image-gallery">
   <figure tabindex="1">
      <img src="images/img-1.jpg" alt="jump, matey" >
      <figcaption&quot;&amp;gt;Ugorj!&amp;lt;/figcaption>
   </figure>
</section>

Minden egyes kép figure elemjének adjunk meg egy tabindex értéket, így a tab leütésekor szépen végigugrálhatunk rajtuk.

A képek

A képek nagy méretűek lesznek, amiket először css segítségével kicsinyítünk le, majd ha rájuk kerül a sor CSS3 animációval felnagyítjuk.

A CSS3

Alap megjelenés:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

figure {
  width: 120px;
  float: left;
  margin: 0 20px 0 0;
  background: white;
  border: 10px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  -o-transition:all 1s ease-in;
  position: relative;
}
 
figcaption {
  text-align: center;
  display: block;
  font-size: 12px;
  font-style: italic;
}
 
figure img {
  width: 100%; /* kicsinyítés */
}

Csalóka az a width:100%, de mivel az őt tartalmazó figure szélessége 120px, ezért a kép mérete is ekkora lesz.

Ha az egeret egy kép fölé visszük, kissé elfordul majd a :hovernél definiált tulajdonságoknak köszönhetően. Az előugrást a :focus-ban megadott értékek teszik lehetővé.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

figure:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg);
  -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666; box-shadow: 0 3px 10px #666;
}
 
figure:focus {
  outline: none;
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5); -o-transform: rotate(-3deg) scale(2.5);
   -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666; box-shadow: 0 3px 10px #666;
  z-index: 9999;
}

Böngésző támogatás

Chrome-ban nagyon szépen működik, mindenkinek javaslom, hogy a HTML5 és CSS3 tutorialokat abban is nézze meg. Firefox 3.6 elforgatja a képet, és előtérbe is hozza, viszont maga a folyamat nem látszik, csak a végeredmény. Firefox 4-es verziójától már ez is támogatott lesz.

Frissítés

Felhívták a figyelmem rá, hogy több böngészőn is működőképes állapotba hozható, ezért pár sor css hozzáadásával már operában is működik. Safariban eddig is jó volt, FireFox 3.6 alatt pedig ezután sem fog menni az állapotok közötti átmenet, csak a hirtelen váltás, mivel nincs implementálva a transition. IE-vel nincs időm foglalkozni, aki talál megoldást rá, azt szívesen kiteszem.

Még annyi megjegyzés, hogy mindig frissítem a böngészőket, így nem tudom, hogy régebbi verzióknál mi működik és mi nem. Amíg ingyen van, mindenki frissítsen, mert ha nem halad a korral, ne is várja el a legújabb dolgokat.

• Példa
• Letöltés

Forrás: http://css-tricks.com/expanding-images-html5/ Thanks!