|  Tantárgy:|[[egyetem:webc2:menu|Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316] ]]|
|  Tananyag:|[[egyetem:webc2:css3_1:menu|css3]]|
====== Kártyalapok ======
===== Feladat =====
A megadott forrás felhasználásával készítsük el a CSS formázást. Használjunk fel CSS3-as elemeket a megjelenítéshez.
===== Specifikáció =====
  - Forrás: [[egyetem:webc2:css3_1:f3:nyersforras|css3_1_f3_nyers.htm]]
  - Elkészítendő megjelenés:\\ {{:egyetem:webc2:css3_1:f3:css3_1_f3_kep.jpg?400|Alapértelmezett megjelenés}}{{:egyetem:webc2:css3_1:f3:css3_1_f3_kep2.jpg?400|Kurzor hatására kinagyított kártyalap}}
  - Ne változtassuk meg a BODY részt, csak a HEAD részt módosítsuk!
  - Fejléc font: kulminoituva
  - Adat blokk font: Note_this
  - oldal háttérszíne: #202020
  - Kártyák háttérképe: kartya.jpg
  - Kártya sarkainak lekerekítése: 10px
  - Kártya keret árnyéka: 10px #000
  - Kártya kerete: 1px #666
  - Kártyák 10 fokos elforgatással egymástól megjelenítve (figyeljünk a megfelelő megjelenési sorrendre)
  - Animálás: 0.5s ease-in-out; az aktuális kártya előtérbe hozása, 1.2 szeres nagyítása és helyzetétől számított 2 fok jobbra forgatás
  - Kis képek keretének kerekítése: 5px
  - Kis képek keretének árnyéka: 5px #aaa

===== Megoldás =====
Az itt megjelenített megoldást lehetőleg csak arra használja, hogy segítséget nyerjen a feladat megfogalmazásának megértésére, de ne használja a program kódját az Ön által elkészítendő program kódjának megírásához! A másolással csak magát csapja be és megfosztja magát a szoftver fejlesztési képességének fejlődésétől! \\ \\
[[http://tptg.hu/egyetem/webc2/css3_1_f3.htm|Megoldás megtekintése]] \\ \\
A forráslistát csak akkor tekintse meg, ha már végrehajtotta önálló munkával az adott feladat kidolgozását. Az itt megtekinthető megoldás csak segítség arra vonatkozólag, hogy milyen egy elkészített megoldás amely lefedi a feladat kiírásban foglaltakat maradéktalanul. Tudjuk, hogy egy kiírt feladat megoldáshoz számtalan formában juthatunk el, így ha az Ön megoldása megfelel a feladat kiírásban megfogalmazottaknak, akkor tökéletesen végrehajtotta a célt! Az, hogy egy kód mennyire optimális az már a fejlesztő tudásától, gyakorlatától és tapasztalatától függ, minél többet gyakorolja a fejlesztést annál inkább optimálisabb kódot fog készíteni. \\ \\
[[egyetem:webc2:css3_1:f3:forrasanyag|Elkészített program forráskódja]]