
Webtanárwebmesterek online iskolája
|
|
Köszöntelek a CSS 3 kurzuson, én Kovács Bence vagyok. Magyarországon elsőként, 2002-ben kezdtem el oktatóvideókat készíteni, főként a webes programozás témakörében. Azóta kb. 70 kurzust készítettem el, melyekkel többezer hallgatót tudtam a tanulásban és a munkaszerzésben segíteni.
A CSS3 a modern webfejlesztés egyik leghatékonyab eszköze, így aki manapság weblapkészítéssel foglalkozik, annak számára szinte kötelező az ismerete és használata.
A CSS3-mal való ismerkedést teljesen az alapoktól kezdjük, de azért feltételezem, hogy már rendelkezel alapfokú HTML ismeretekkel - ha netán mégsem, akkor iratkozz fel a HTML alapok című kurzusomra!
A CSS alapjainak átismétlése után áttekintjük a CSS3 népszerű új funkcióit (úgymint lekerekítések, árnyékolás, színátmenetek használata stb.), majd megismerkedünk az animációk és transzformációk használatával. A kurzus végén néhány gyakorló feladattal foglaljuk össze és próbáljuk ki a tanultakat.
A videókon lépésről lépésre láthatod majd a forráskód szerkesztését, az elkészült kódokat a segédfájlok között találod majd meg. Érdemes minden lecke után a gyakorlatban is kipróbálni a látottakat!
Nézd meg az ingyenes leckéket, és ha hasznosnak tartod, vásárold meg az oktatóanyagot!
Remélem, hogy hamarosan találkozunk! :-)
Hova és hogyan írhatjuk be a CSS kódot
Háttérszín és háttérkép beállítása
Szövegformázás
Keretek és margók
Listák formázása
Méretezés, megjelenes, pozícionálás
Pszeudo osztályok és elemek használata
Új lehetőségek a formázandó elemek kiválasztására
Doboz elemek sarkának lekerekítése
Szövegek és doboz elemek árnyékolása
Keretek - színek helyett képeket használunk
Saját betűtípusok használata (TTF, OTF, WOFF)
Egyenes vonalú színátmenetek
Körkörös színátmenetek
Színkeverés (RGB és HSL) és áttetszőség
Animáció létrehozása - kulcskockák időtartama
Több tulajdonság animálása: késleltetés, ismétlés
További beállítási lehetőségek
Az animáció megállítása és elindítása (JavaScript)
Egy kis gyakorlás: 3 gomb rezegtetése kattintásra
Mozgatás
Elforgatás
Átméretezés
Megdöntés
Egy kis gyakorlás: 2D-a animáció
Elforgatás a térben
A perspektíva beállítása
Mozgatás térben
Átméretezés, a Z-tengely módosítása
Kétoldalú terület megforgatása
Minden böngészőben ugyanúgy futnak az animációk