Lab. vježba 6 PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić) CSS3
P R O G R A M I R A N J E Z A I N T E R N E T Općenito Posljednja verzija Cascading Style Sheetsa, verzija 3, uvodi neke nove mogućnosti kako bi se smanjila potreba za korištenjem skriptnih jezika ili grafičkih alata poput Photoshopa. Neki bitni noviteti mogu se svesti na: N O V I T E T I 1. Kutije i okviri moguće je dodati sjene i zaobljene kuteve, korisnik može mijenjati veličinu ovih elemenata dinamički u vertikalnom i horizontalnom smjeru. Okviri mogu biti u više boja. 2. Pozadine Moguće je imati više pozadina sa preciznijim pozicioniranjem, mijenjanje veličine elemenata u pozadini, dodavanje prozirnosti za pozadinu. 3. Fontovi na webu moguće je koristiti fontove direktno sa servera, korisnik ne treba imati dotični font instaliran na svom računalu 4. Boje i prozirnost Moguće je dodati prozirnost elementima i gradijente pozadini. 5. Transformacije Moguće je mijenjati veličinu, pomicati, izvrtati i rotirati slike i elemente u 3D prostoru. K O M P A T I B I L N O S T P R O B L E M S P R E G L E D N I C I M A CSS3 je u potpunosti kompatibilan sa CSS2, stoga nije potrebno mijenjati postojeći dizajn. Slično kao i HTML5, i CSS3 je relativno novi standard i postoje određeni problemi što se tiče podrške od strane internetskih preglednika. Kao primjer ovih problema možemo uzeti jednostavan CSS3 kod za dodavanje sjene za element: #example1{ box-shadow: 10px 10px 5px #888; Ipak, za sada to još ne funkcionira, te je za ovaj isti kod potrebno posebno naznačiti podršku za Mozillu i Webkit (Safari i Chrome). Stoga kod za sada izgleda ovako: #example1 { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; 1
S J E N E Sintaksa za kreiranje sjena kod elemenata je sljedeća: box-shadow: none <shadow> [, <shadow> ]* gdje je: <shadow> = inset? && [ <length>{2,4 && <color>? ] drugim riječima, box-shadow svojstvo prima vrijednosti koje definiraju sjene i koje su odvojene zarezima. Svaka sjena se definira sa {2-4-strukim vrijednostima ( horizontalni pomak, vertikalni pomak, opcionalna udaljenost zamagljivanja (blur) i opcionalna udaljenost raspršivanja). Uz to postoji i opcionalna vrijednost kojom se definira boja. Ukoliko želimo da se sjena kreira prema unutrašnjosti elementa, koristimo ključnu riječ inset. Nekoliko primjera: #Example_A { -moz-box-shadow: -5px -5px #888; -webkit-box-shadow: -5px -5px #888; box-shadow: -5px -5px #888; #Example_B { -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; #Example_C { -moz-box-shadow: -5px -5px 0 5px #888; -webkit-box-shadow: -5px -5px 0 5px#888; box-shadow: -5px -5px 0 5px #888; 2
Z A O B L J E N I R U B O V I O K V I R A Sintaksa koja se koristi za definiranje zaobljenih rubova okvira je sljedeća: border-*-*-radius: [ <length> <%> ] [ <length> <%> ]? Zvjezdice označavaju nekoliko verzija koje se mogu koristiti border-bottom-leftradius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius. Dakle border-*-*-radius svojstvo može primiti jednu ili dvije vrijednosti, izražene kao duljina ili postotak. Uz, border-*-*-radius postoji i univerzalno svojstvo border-radius. Nekoliko primjera: V I Š E S T R U K E P O Z A D I N E Još jedan primjer noviteta u CSS3 su i višestruke pozadine. Sintaksa za postavljanje višestrukih pozadina je sljedeća: background: [ <bg-layer>,]* <final-bg-layer> <bg-layer> = <bg-image> <bg-position> [ / <bg-size> ]? <repeatstyle> <attachment> <box>{1,2 <final-bg-layer> = <bg-image> <bg-position> [ / <bg-size> ]? <repeat-style> <attachment> <box>{1,2 <background-color> A kao primjer možemo uzeti: background: url(slika1.png) center bottom no-repeat, url(slika2.png) left top no-repeat; 3
F O N T O V I N A W E B U Kako bismo uspješno koristili web fontove, svaka forma font-family-a se mora deklarirati korištenjem @font-face pravila, a kao primjer možemo uzeti: @font-face { font-family: Delicious; src: url('delicious- Roman.otf'); @font-face { font-family: Delicious; fontweight: bold; src: url('delicious-bold.otf'); Nakon čega možemo koristiti: h3 { font-family: Delicious, sans-serif; P R O Z I R N O S T Ukoliko želimo određenom elementu dodati prozirnost, to možemo vrlo jednostavno napraviti korištenjem svojstva opacity. Na ovom su primjeru kreirani <div> elementi, s tim da je pozadina svakog elementa čisto crvene boje. Ipak razlikuju se po vrijednostima svojstva opacity koji kreće od 0.2 do 1.0, s lijeva na desno. P R I J E L A Z I Prvi korak prilikom kreiranja prijelaza je specificiranje na koje se CSS svojstvo taj prijelaz odnosi. Sintaksa je sljedeća: transition-property: none all [ <IDENT> ] [, <IDENT> ]* ako se primjeni riječ all, ili ako se cijela definicija transition-property izbaci, onda se tranzicija izvršava na svim svojstvima na kojima je to moguće. Primjer: transition-property: all; transition-property: none; transition-property: background-color; transition-property: background-color, height, width; Drugi korak je definiranje vremena izvođenja, za što je sintaksa: transition-duration: <time> [, <time>]* 4
a primjer: transition-duration: 2s; transition-duration: 4000ms; transition-duration: 4000ms, 8000ms; Treći korak je specificiranje brzine kojom će se prijelaz odvijatu tijekom svog izvođenja. transition-timing-function: <timing-function> [, <timing-function>]* <timing-function> = ease linear ease-in ease-out ease-in-out ili <timing-function> = cubic-bezier(<number>, <number>, <number>, <number>) a kao primjer možemo uzeti: transition-timing-function: ease; transition-timing-function: ease, linear; transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8); Četvrti korak je definiranje odmaka, s sintaksa je: transition-delay: <time> [, <time>]* a primjer: transition-delay: 5s; transition-delay: 4000ms, 8000ms; transition-delay: -5s; 5
T R A N S F O R M Svojstvo transform omogućuje 2D i 3D transformacije nekog elementa. Moguće je rotirati, mijenjati veličinu, pokretati, nakositi, izvrtati,.. elemente. Sintaksa je: transform: none transform-functions gdje su transform-functions: none matrix matrix3d translate translate3d translatex translatey translatez scale scale3d scalex scaley scalez rotate rotate3d rotatex rotatey rotatez skew skew3d skewx skewy perspective Svojstvo transform-style definira kako će se elementi ponašati u 3D prostoru. Ovo svojstvo može poprimiti vrijednost: flat child elementi ne zadržavaju 3D poziciju preserve-3d child elementi zadržavaju 3D poziciju 6
Zadatak Korištenjem CSS3, kreirati efekt okretanja karte koja na prednjoj strani ima sliku, a na stražnjoj strani tekst sa slikom. 7