V CSS3 sú dva spôsoby, ako vytvoriť animáciu: CSS Transitions, ktoré nám umožňujú vytvoriť niektoré jednoduché efekty (ako je napr. :hover) alebo CSS Animations, prostredníctvom ktorých môžeme vytvárať zložitejšie efekty. Zdá sa vám, že vytvorenie peknej animácie len s použitím čistého CSS je nemožné? Od doby, čo CSS podporuje keyframes – sa môžeme priblížiť animáciam, aké sme doteraz poznali len z Adobe Flash alebo After Effect. V tomto článku si ukážeme základy animácie v CSS3. CSS Animations sú pokročilé možnosti CSS a aj napriek tomu môžeme povedať, že je podpora CSS animácii zo strany prehliadačov na celkom dobrej úrovni. CSS Animations sú podporované všetkými hlavnými prehliadačmi v ich aktuálnej verzii – pokiaľ hovoríme o desktope. Jediný prehliadač, ktorý vám bude robiť trošku starosti je Internet Explorer. Pokiaľ ide o mobilné prehliadače CSS Animations sú podporované všetkými z nich, okrem Opery Mini takže všetci, čo používajú Chrome, Firefox Mobile alebo Safari môžu sledovať CSS animácie bez problémov. Syntax CSS @keyframes Ako som už spomínal predtým CSS animácie prácujú pomocou kľúčových snímok: keyframes. Ak chcete mať iba dve fázy animácie – použíjeme kľúčové slová FROM a TO: @keyframes moving{ from { left: 100px } to { left: 300px; } } Všetko čo animácia urobí je, že presunie prvok o 200 px doprava pri načítaní stránky. Kľúčové slovo moving umiestnené za @keyframes je názov našej animácie – pomenovali sme si túto sekvenciu, takže si ju neskôr môžeme „zavolať“, aby sme ju použili v inom prvku. Ak potrebujeme vytvoriť viac kľúčových snímok, môžeme tak urobiť pomocou percenta: @keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } Pomocou tejto myšlienky môžeme vytvoriť toľko kľúčových snímok, koľko len chceme – v jednotlivých častiach sekvencie môžeme zmeniť aj iné aspekty prvku: šírku, farbu, atď. Aby sa nám kód CSS3 zobrazoval korektne vo všetkých prehliadačoch budeme musieť pridať ich prefixy: v tomto prípade budeme potrebovať -webkit- a -moz- prefix a s nimi náš kód bude vyzerať takto: @keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-webkit-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-moz-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } Použitie CSS animácie Naša animácie je teraz definovaná, ale v prípade načítania stránky sa nič nestane pretože sme ju ešte nepripojili na prvok / element. V prípade, že budem chcieť vytvoriť jednoduchý DIV, ktorému priradím animáciu „ moving“ a čas trvania animácie – bude to vyzerať asi takto: .animate { animation-name: moving; animation-duration: 500ms; } S týmito dvoma vlastnosťami bude naša animácia funkčná, ale bude mať dva hlavné „problémy“: animácia začne ihneď po načítaní stránky a prebehne iba raz. To môžeme vyriešiť nastavením oneskorenia animácie (animation-delay) a počtom opakovaní (animation-iteration-count). V prvom prípade sme nastavili oneskorenie animácie1500ms a v druhom sme nastavili nekonečnú slučku opakovaní: .animate { animation-name: moving; animation-duration: 500ms; animation-delay: 1500ms; animation-iteration-count: infinite; } Možnosti CSS3 sú široké a uvedené príklady sú len začiatkom toho, čo všetko sa dá s animáciou v CSS3 urobiť. A i keď sa jedná o veľmi mocný nástroj, treba myslieť na to, že Internet Explorer podporuje animácie až od verzie 10 – takže by ste mali dávať pozor, kde ich použijete vo vašom projekte. Je totiž ešte stále dosť ľudí, ktorí používajú IE9 a starší.
Modal boxy sú často používaným nástrojom v internetovom arzenále webového vývojára. Používajú sa na veľa rôznych vecí: napr. na formuláre prihlásenia / registrácie, zobrazenie reklamy alebo obrázkov / videa, prípadne na oznámenia / upozornenia pre užívate
Bola nedeľa, mobil ukazoval niečo málo po 10:30. Vystúpila som z auta na Duklianskom priesmyku. Plná nadšenia, očakávaní a sebadôvery som sa rozlúčila s rodičmi, spravila symbolickú fotku s rázcestníkom a odhodlane vykročila na cestu dlhú 770 kilometrov.
prejsť na článokS rastúcou rozmanitosťou veľkostí monitorov nie je praktické navrhovať jednotlivé bloky textu, ktoré zaberajú celú šírku bloku. Tradičné riešenie je rozdeliť text do stĺpcov ručne čo je veľmi časovo náročné, prípadne rozdeliť text dynamicky pomocou JavaS
Ako teda postupovať a ako optimalizovať obrázky pre web? Dodrž tieto kroky: Ako prvé si obrázok uprav rozmerovo zmenši jeho veľkosť v pixeloch. Pre obrázkov vykonaj kompresiu dát a zníž jeho dátovú veľkosť v KB. Vygeneruj pre obrázk nový formát WebP ale
prejsť na článokPrvé sväté prijímanie alebo birmovka je skutočne významným okamžikom v živote každého veriaceho človeka. Je nezabudnuteľnou a dôležitou udalosťou, ktorá zostáva v srdci na celý život. Darček na prvé sväté prijímanie by mal byť rovnako výnimočný ako je aj
prejsť na článok