Embed Size (px)
Citation preview
Tallinna Ülikool
Informaatika instituut
Veebilooja uued võimalused CSS3 abil
Seminaritöö
Autor: Jaak Ritso
Juhendaja: Andrus Rinde
Autor: ...................................................................................................................... „ ............ „ 2011
Juhendaja: ............................................................................................................... „ ............ „ 2011
Tallinn 2011
2
Sisukord
Sisukord ................................................................................................................................................... 2
Sissejuhatus ............................................................................................................................................. 4
1 CSS ................................................................................................................................................... 6
1.1 CSS ajalugu .............................................................................................................................. 6
1.2 Veebiloojate arvamus CSS uute võimaluste kohta .................................................................. 7
2 CSS3 ............................................................................................................................................... 10
2.1 Selektorid (Selectors) ............................................................................................................. 10
2.1.1 Omaduse selektorid (attribute selectors) ...................................................................... 11
2.2 Kasutajaliides (User‐interface) .............................................................................................. 11
2.2.1 Ploki suurus (Box‐sizing) ................................................................................................ 11
2.2.2 Suuruse muutmine (Resize) ........................................................................................... 12
2.2.3 Kontuurjoon (Outline) ................................................................................................... 12
2.3 Taustad (Backgrounds) .......................................................................................................... 13
2.3.1 Tausta lähtepunkt (Background‐origin) ........................................................................ 13
2.3.2 Tausta kinnitus (Background‐clip) ................................................................................. 14
2.3.3 Tausta suurus (Background‐size) ................................................................................... 15
2.3.4 Mitme taustapildi kasutamine (Multiple backgrounds) ................................................ 15
2.4 Piirjooned (Borders) .............................................................................................................. 16
2.4.1 Piirjoone värvid (Border‐colors) .................................................................................... 16
2.4.2 Pilt piirjoonena (border‐image) ..................................................................................... 17
2.4.3 Raamjoone ümarad nurgad (border‐radius) ................................................................. 18
2.4.4 Ploki vari (Box‐shadow) ................................................................................................. 19
2.5 Värv ja läbipaistvus(Color) ..................................................................................................... 19
2.5.1 Läbipaistvus (Opacity) ................................................................................................... 19
2.5.2 RGBA värvid ................................................................................................................... 20
2.5.3 HSL värvid ...................................................................................................................... 20
2.5.4 HSLA värvid .................................................................................................................... 21
2.5.5 Järktoonimine ................................................................................................................ 21
2.6 Teksti efektid ......................................................................................................................... 22
2.6.1 Teksti vari (Text‐shadow) .............................................................................................. 22
2.6.2 Veebi fondid (Web fonts) .............................................................................................. 23
3
2.6.3 Mitmeveeruline asetus (multi‐column layout) .............................................................. 24
2.6.4 Tekst „üle serva“ (Text‐overflow) .................................................................................. 24
2.6.5 Reamurdmine (Word‐wrap) .......................................................................................... 25
2.7 Teised moodulid (Other modules) ......................................................................................... 25
2.7.1 Meedia päringud (media queries) ................................................................................. 25
2.7.2 Siirded ja transformeeringud ........................................................................................ 27
2.8 CSS3 kokkuvõte ..................................................................................................................... 28
Kokkuvõte .............................................................................................................................................. 29
Kasutatud kirjandus ............................................................................................................................... 30
Lisa 1 ...................................................................................................................................................... 33
4
Sissejuhatus
Viimaste aastatega on veebimaailm väga kiiresti arenenud. Lisandunud on palju huvitavaid
tehnoloogiaid, meetodeid ja lahendusi. Veebilehe kujundus teostatakse aga endiselt tuntud CSS‐iga,
millest siiani käibel versioon 2.1. Selle põhiosa on valminud juba aastal 1998 ning seetõttu hakkab
ajale ja vajadustele jalgu jääma.
Nüüd on valmimas moodulipõhine CSS3, mille uute võimalustega saaks veebidisainer kõike vana ja
kandilist muuta palju ilusamaks ja sujuvamaks. Peale välimust puudutavate tegurite on CSS3‐s ka
uued selekteerimise võimalused, milleta varem pidi palju rohkem kombineerima. Nüüd saab
spetsiaalsete käskudega keerukad konstruktsioonid lihtsalt tehtud. CSS3 võimaldab lahendusi, mida
seni tuli realiseerida kasvatades allalaetavate andmete mahtu. Näiteks, et oma nägemust teoks teha,
pidid enamus disainereid kasutama kunstiliste lahendustena (raamjoone pildid, järktoonitud taustad,
ümarad elementide nurgad jne) pilte. Valmivas versioonis saab lisaks ümaratele nurkadele tekitada
objektile ja tekstile varju ning lisada elemendile läbipaistvust. Varem oli võimalik elemendile lisada
ainult ühte tausta, CSS3‐ga aga mitut. Kindlasti on iga veebilooja unistanud kasutada enda
lemmikfonte, mida veebifontide seas pole. CSS3‐ga on võimalik lisada oma fonte. Seni pidi
elementide pööramiseks, kallutamiseks, liigutamiseks kasutama erinevaid tehnoloogiaid (nt Flash,
Javascript), CSS3‐ga saab ka seda lihtsalt saavutada, andmemahtu suureks ajamata.
Kuna järjest enam kasutavad inimesed väga erinevaid veebis liikumise vahendeid, mobiiltelefonidest
kuni televiisoriteni, siis CSS3 aitab veebi kujutada igale seadmele kõige sobilikumas versioonis.
Töö autor on väga huvitatud veebidisainist ja sellega seonduvates uuendustest, seega on see teema
väga huvipakkuv ja südamelähedane. Näiteks olen oma tuttavatele ettevõtjatele loonud veebilehti ja
tulevikus soovin sellel alal tegutseda. Samuti puudub uue tehnoloogia – CSS3‐e kohta terviklik
eestikeelne materjal, mis aitaks mõista uusi lahendusi, nende käitumist ja võimalusi. Seega seda tööd
saaksid veebikujunduse huvilised kasutada juhtmaterjalina.
Töö eesmärgiks on anda ülevaade CSS3 uuendustest ning leida millised uuendused on veebiloojale
olulisimad. Eesmärgiks on ka uurida, millised brauserid toetavad CSS3‐ga pakutud lahendusi ja
millised on erinevused uuel CSS3‐l võrreldes varasemate versioonidega.
Töö eesmärkide täitmiseks uurin välja, mis on põhilised uuendused CSS3‐s ning millised neist on
olulisemad veebiloojatele. Teen näidis lehe CSS3‐e uuendustest ning katsetan neid erinevate
veebilehitsejatega, et jõuda selgusele, millised brauserid toetavad vastavaid uuendusi.
5
Töö on aktuaalne, kuna veebiarendajad vajavad uusi lahendusi ja sooviksid saada uut informatsiooni
eesti keeles.
Esimeses peatükis käsitleb autor CSS‐i arengut läbi ajaloo, alates aegadest, kus veebi alles hakati
looma kuni käesoleva ajani . Teises peatükis tutvustab töö autor CSS3 uusi omadusi, toob näiteid ja
selgitab brauserite toetust vastavatele uuendustele.
6
1 CSS
CSS (Cascading Style Sheet – Astmelised stiililehed) on kujunduskeel, mille ülesandeks on kirjeldada
veebilehtedel olevate objektide väljanägemist. Võimalik on muuta elementide tausta, suurust,
värvust, asukohta, käitumist ja muud sarnast.
(Munner, 2009)
Ühe stiililehega saab töödelda mitut erinevat lehte, ühe kirjeldusega mitut erinevat elementi, kuid
samas saab ka unikaalseid elemente määratleda. Tänu CSS‐le on dokumendi sisu ja tema kujunduslik
pool eraldatud. Tihtipeale asuvad need erinevatest failides. Seega on mõlemast poolest palju lihtsam
aru saada.
(CSS:Sissejuhatus)
1.1 CSSajalugu
HTML pole kunagi kavatsenud olla esitluskeel. HTML dokumendist eraldi oleva stiililehe kasutamise
idee on kavas olnud juba 1990. aastast. Siis oli aga veeb ainult ideevälgatus Tim Berners‐Lee mõtetes.
Alates 1993. aastast, enne brauseri Mosaic väljalaskmist, oli juba mitu HTML‐i stiililehe ettepanekut
ringluses. (Lie & Bos, 1999)
1993. aastal ilmub brauser „NCSA Mosaic“, sellel on stiili muutmis lisa, aga see on samm tagasi, kuna
lubab veebiloojal muuta ainult kindlaid värve ja fonte. (Lie & Bos, 1999)
1994. aastal algab CSS edulugu. Veebi hakatakse kasutama kui elektroonilise kirjastuse platvormi.
Kuid üks oluline osa kirjastuse platvormist on puudu: dokumente pole võimalik kujundada. Näiteks,
pole võimalik kujutada veebilehte ajalehe küljenduse moodi. Töötades MIT Meedia Laboratooriumi
isikliku ajalehe väljaandega, Håkon Wium Lie näeb stiililehe keele vajalikust veebis. Ta avaldab oma
esimese mustandi „HTML‐i kaskaad stiililehed“ (Cascading HTML Style Sheets). Temaga liitub kiirelt
Bert Bos, kes töötas sarnase stiililehe süsteemi väljaarendamisega Argo brauserile. See, mis lahutas
nende kahe stiililehe kava oli arusaam, et süsteem peab looma tasakaalu autori ja lugeja stiili
eelistustest ja et sellel peab olema mehhanism, mis tegeleb mitmete stiililehtede ning vastuoluliste
stiilidega (kui ühe elemendi atribuut on määratletud erinevates kohtades erinevalt). (Lie & Bos, 1999)
Pärast WWW (World Wide Web) konverentsi ettekannet ja suurt elavat arutelu www‐style
postiloend, kaskaad stiililehtede arendus jätkus. Aastal 1995 alustast tööd WWW liit (W3C), kus loodi
ametlik CSS‐le pühendunud meeskond. Eesmärgiks võetakse CSSi spetsifikatsioon välja töötada
7
ametliku väljaandeni. Meeskonna liikmete seas oli ka Lou Montulli Netscapest. Pärast seda, kui
Microsoft andis märku, et nad lisavad CSS toetuse oma brauserile, oli oluline ka Netscape osalus.
Muidu oleks nähtud veebi lahknemas kahes erinevas suunas. Arutelud olid pikad ja rasked, aga CSS
esimene versioon ilmus lõpuks W3C soovitusena 1996. aasta detsembris. See sisaldas kõiki
algteadmisi fontide, värvi ja vahekauguse määramise instruktsioone elementidele. Esimeseks
brauseriks, mis rakendas CSS1 võimalusi oli Internet Explorer 3. Et olla konkurentsis järgnes talle
koheselt kesise pingutusega Netscape 4. (Lie & Bos, 1999)
1997. aasta veebruaris hakkas W3C‐s tööle järjekordne CSSi töögrupp. Uus grupp alustas tööd
omaduste kallal, mida CSS1‐s ei adresseeritud. Grupi esimeheks oli šotlane Chris Lilley, W3C‐sse
värvatud Manchesteri ülikoolist. Kõige märkimisväärne areng toimus elementide positsioneerimisega
lehel, aga see tutvustas ka meedia liike(media types), tabeli küljendusomadusi, kõne‐stiililehed (aural
style sheets) ja palju muid keerulisi elementide valimise meetodeid. CSS versioon 2 saab W3C
ametliku soovituse 1998. aasta mais. (Robbins, 2006)
CSS 2 parandus 1 on töötav mustand, mis teeb väikseid muudatusi CSS2‐s. See parandab veateateid
ja viib mõned toetuseta omadused tulevasse CSS3. (Robbins, 2006)
CSS versioon 3 on väljatöötamisel alates 15. Detsembrist, 2005. CSS3 on moodulipõhine ja sisaldab
endas palju erinevaid uusi lahendusi. W3C töötab ka spetsiaalsete CSS meedia komplektidega.
Näiteks CSS Mobiil, CSS Print ja CSS TV. On selgelt näha, et CSS on integreeritud W3C tuleviku
visiooni. (Robbins, 2006)
Raske on prognoosida, millal CSS3 hakkab standardina kehtima. Üks juhtivaid CSS‐i arendajaid Bert
Bos ütles 2007. aastal intervjuus, et nelja või viie aasta pärast (2011 – 2012) on enamus moodulid
lõpuni arendatud.
(xhtml.com, 2007)
Autor arvab, et tänu eraldi moodulite arendamisele saab CSS3‐e huvitavamaid uuendusi kasutada
üldjoontes juba 2011. aasta jooksul, kuid täieliku veebilehitsejate toetuseni nii pea ei jõuata. Samuti
jääb CSS3 standardina kaugemasse tulevikku.
1.2 VeebiloojatearvamusCSSuutevõimalustekohtaCss‐tricks.com lehel Chris Coyier korraldatud hääletus uuris, mille üle oleks veebiloojad kõige rohkem
õnnelikud, kui CSS2 ja CSS3 oleksid kõikides brauserites täielikult toetatud. Selle tööga on see hästi
seotud, kuna tulemused näitavad ära, milliseid uuendusi kindlasti tutvustama pean. Hääletus viidi
8
läbi 2009. aasta märtsi kuus. Hääletajad oli ligi 7000, kes külastasid veebilehte css‐tricks.com. Ning
hääled jagunesid järgmiselt (Joonis 1):
Joonis 1 ‐ Css‐tricks.com hääletus: Mis uuenduste üle oleks veebilooja kõige õnnelikum?
1. Piirjoone raadius (22.0,% 1,541 Häält)
2. Mitmekordsed taustapildid (22.0%, 1,523 Häält)
3. @font‐face (21.0%, 1,424 Häält)
4. Animatsioonid/Üleminekud (12.0%, 818 Häält)
5. Gradiendid (8.0%, 535 Häält)
6. Ploki vari (4.0%, 271 Häält)
7. RGBa (3.0% 234 Häält)
8. Teksti vari (2.0%, 140 Häält)
9. Muu (2.0%, 168 Häält)
(Coyier, Poll Results: CSS3 Features, 2009)
Kuigi küsimus hõlmas nii kasutusoleva CSS2 (millel pole samuti täieliku veebibrauserite toetust) kui ka
CSS3 lahendusi, siis kaheksast reaalsest valikust (kui kõrvale jätta „Muu“) olid seitse omadust CSS3‐e
spetsifikatsioonist.
Küsitlusest selgub, et kõige mugavam uuendus on piirjoone raadiuse määratlemine. Ümarate
nurkade saavutamine CSS3‐ga on imelihtne, kuna varem pidi selleks kasutama mõnes graafika
Mitmekordsed taustapildid
@font‐face
Ploki vari Teksti vari
Piirjoone raadius
Animatsioonid/Üleminekud
Gradiendid RGBa Teised
CSS3 omadused
9
programmis loodud pilti. Samuti teeb see veebi kiiremaks, kuna pildifailide andmemaht on tunduvalt
suurem kui koodis kirjeldatud.
Teisele kohale napilt jäänud mitmekordsete taustapiltide valik lihtsustab igasuguste kaunistuste
lisamist veebilehele. Varem pidi selleks tegema mitu erinevat plokki (<div>), ning nendele kõigile
eraldi taustapildi lisama. Kindlasti hoiab see kujunduskoodi arusaadavamana ning lihtsamana.
Kolmandale kohale tuli oma fontide lisamise võimalus, mis autori arvates on üks olulisim uuendus.
Olen mitmeid kordi loonud veebilehtedele huvitavate fontidega linke pildina. See on alati olnud tüütu
ning see teeb ka veebilehe aeglaseks. @font‐face lisaga tuleb laadida vastav font oma serverisse, see
CSS3‐ga ära defineerida ning kasutada justkui tavalist veebifonti.
Ploki vari on väga ilus lisand, mis tekitab ruumilisust veebilehele. Seda on väga lihtne ja mugav
kasutada. Varasematel aegadel lahendati sellist disainilisa pildiga. Ploki äärele, kuhu pidi tekkima vari,
lisati sama kõrge või lai varju suurune plokk, mille taustaks lisati varju kujutav pilt.
RGBa ja läbipaistvus veebis on samuti väga huvitav ja kena uuendus. Varem oli lahenduseks ainult
graafikaprogrammides läbipaistvuse lisamine ning selle veebilehele lisamine pildina, et tekitada
tunne läbipaistvusest. Suurte piltide kasutamine teeb aga veebi aeglaseks. CSS3‐ga määrab
läbipaistvuse protsentuaalselt ja tulemus on väga kena.
Tekstile varju lisamise uuendus on väga sarnane plokile varju lisamisega. Samamoodi annab see väga
palju silmailu veebilehele, eriti just pealkirjadele.
10
2 CSS3
CSS3 otsustati teha moodulipõhine, kuna see oleks ühes tükis olles läinud liiga suuremahuliseks.
Jagades CSS3‐e tükkideks, annab see W3C‐le võimaluse avaldada erinevaid mooduleid erinevatel
aegadel. Tänu sellele on hetkel juba mõned CSS3‐e uuendused täielikult saanud brauserite toetuse.
Erinevaid mooduleid on CSS3‐s palju. Ära märkimist väärivad järgmised:
Kasutaja liidese moodul Selektorite moodul Kirjatüübi moodul Värvide moodul Taustade ja piirjoonte moodul Teksti moodul Plokimudeli moodul Mitme veerulisuse moodul Kõne moodul Meedia päringute moodul
Kuna CSS3 erinevad moodulid ja omadused on arendamisjärgus ning on brauserites alles
katsetamisel, siis on välja töötatud erinevatele brauseritele omad eesliited, mis käivad omaduste
ette.
Gecko (Mozilla Firefoxi, Camino) mootori eesliide on –moz‐.
Webkiti (Google Chrome, Safari, Shiira) eesliide on –webkit‐.
Presto (Opera) eesliide on –o‐.
Tridendi (Internet Exploreri, Avant) eesliide on –ms‐.
iCab (iCab) eesliide on‐icab‐
Khtml (Konqueror) eesliide on ‐khtml‐.
(Neerden, 2010)
border‐radius:30px; ‐moz‐border‐radius: 30px; ‐ms‐border‐radius: 30px; ‐webkit‐border‐radius:30px; ‐khtml‐border‐radius:30px; ‐o‐border‐radius:30px; ‐icab‐border‐radius:30px;
2.1 Selektorid(Selectors)
Selektor kujutab struktuuri. Struktuuri saab kasutada tingimusena, mis määrab missuguste
elementidega selektori väärtus on sama dokumendi puus. Võimalik on viidata konkreetse elemendi
tütarelemendile. Üldiselt kasutatakse samu selektoreid, mis eelmistes CSS‐ides. Paindlikumaks
muutmiseks on lisatud omaduse selektorid.
11
2.1.1 Omaduseselektorid(attributeselectors)
Varem kui veebilooja tahtis CSS‐s muuta HTML elementi oli tal valida id ja class vahel. CSS3 omaduse
selektoriga saab igale elemendi atribuudile viidata. Näiteks, kui veebilooja tahab, et igal välisel lingil
oleks oma stiil, siis ta saab kasutada href lingi aadressi.
<a href=“http://www.tlu.ee“>Tallinna Ülikool</a> a[href=http://www.tlu.ee] {color: red;};
Lisatud on viis atribuuti, millega saab elemente grupeerida:
[att^=val] – Esindab elementi, mille atribuudi „att“ väärtus algab prefiksiga „val“.
[att$=val] – Esindab elementi, mille atribuudi „att“ väärtus lõpeb sufiksiga „val“.
[att*=val] – Esindab elementi, mille atribuudi „att“ väärtus sisaldab vähemalt ühel ilmumisel alasõna
„val“.
[att~=val] – Esindab elementi, mille atribuudi „att“ väärtus sisaldab tühikutega eraldatud sõna „val“.
[att|=val] – Esindab elementi, mille atribuudi „att“ väärtus sisaldab sidekriipsudega eraldatud sõna
„val“.
(Coyier, The Skinny on CSS Attribute Selectors, 2010)
Näiteks p[title$=“pilt“] selekteerib veebilehel kõik paragrahvid, mille pealkiri (atribuut title) lõppeb sufiksiga
„pilt“. <img src=“pilt1.jpg“ id=“suur pilt all“ /> img[id~=pilt]{border=2px;}
2.2 Kasutajaliides(User‐interface)
Varem oli veebiloojatel väga ebamugav arvutada plokile juurde polsterduse ja raamjoone suurust,
nüüd saab kasutajaliidese moodulis määrata, mismoodi ploki (HTML elemendid <div>, <p>, <img>
jne) suurust arvutatakse. Suuruse muutmis omadusega on kasutajal võimalik muuta brauseris ploki
suurust, see teeb teksti sisestamise mugavamaks kui tekst on suurem kui ette antud plokk ning
kontuurile on lisatud kauguse määratlus.
2.2.1 Plokisuurus(Box‐sizing)
Seni pidi veebiautor alati arvestama, et ploki mõõtmetele lisandub polsterduse ja raamjoone mõõt,
seega pidi koguaeg arvutama. Nüüd saab ploki suuruse (box‐sizing), muuta elemendi laiuse
arvutamise meetodit. Vaikimisi on väärtus content‐box, see arvutab ploki suuruse liites sinna juurde
polsterdamise ja raamjoone mõõdud. Kui väärtuseks on border‐box, siis brauser esitab ploki
defineeritud laiuse ja kõrguse suurusena ehk polsterdus ja raamjoon on sisse arvestatud.
(CSS3
2.2.2
Suuru
on se
mõõt
võim
inform
Väärt
vertik
Kahju
omad
(CSS3
2.2.3
Kontu
määr
elem
braus
(CSS3
3.info, Box‐si
box‐sizing
2 Suuruse
use muutmis
ee omadus t
tmed vastav
alus ei jää
matsiooni jä
tusteks on v
kaalselt ning
uks on see u
duse.
3.info, The re
overflow:aresize: ver
3 Kontuur
uurile on la
ratud elemen
endi piirjoo
serites, välja
3.info, Outlin
izing, box‐mo
: border‐box;
emuutmine
se omadus l
eksti sisesta
valt oma mu
disaineri a
äda märkam
vertical, hori
mõlemas su
uendus väga
esize propert
auto; rtical;
Joonis 2
rjoon(Outli
aiendatud CS
ndi äärest e
one ja kont
arvatud Inte
ne)
odel fixes for
e(Resize)
ubab määra
misel teksti
ugavusele. Sa
algsest veeb
mata.
izontal ja bo
uunas.
a vähese toe
ty in CSS3)
– Resize omad
ine)
SS3‐s kontu
emal (Joonis
tuuri vahel.
ernet Explore
12
r the simple
tleda, kas pl
alale (text a
amas, kui v
bilehe välim
oth ehk plok
tusega. Hilju
dus. Kasutajal o
uuri kauguse
s 3 – punan
See omad
er.
people)
loki suurus o
area). Kasuta
eebilehel an
musest mida
ki suurust o
uti lisas Goog
on võimalik plo
e omadus (o
e kontuurjo
dus on leid
on muudetav
ajal on võima
nda igale plo
agi järgi. Sa
n võimalik s
gle Chrome o
kisuurust muut
outline‐offse
on). Kasutat
nud toetus
v (Joonis 2).
alik venitada
okile suurus
amuti võib
sikutada hor
oma uute ve
ta.
et). See esit
takse, et mä
e kõikides
Eriti kasulik
a sisendploki
e muutmise
oluline osa
risontaalselt,
ersiooni selle
ab kontuuri
äärata ruumi
tuntumates
k
i
e
a
,
e
i
i
s
2.3
Seni
taust
võim
taust
suuru
2.3.1
Seni
taust
lähte
teatu
järgi(
(Joon
vasak
(Joon
(CSS3
outline:sooutline‐cooutline‐off
Taustad
oli võimalik
apildi näita
aldavad vee
ade kasutam
ust.
1 Taustal
oli tausta lä
apilt piirjoo
punkti (Back
ud elemend
padding‐box
nis 3). Kui
kusse ülemis
nis 5).
3.info, CSS3:
backgrounbackgroun
lid 1px; olor:#F00; fset: 10px;
d(Backgro
kasutada üh
amine erine
bikujundajal
mine. Lisaks
ähtepunkt
ähtepunktiks
ne alla peita
kground‐orig
il. Sellel on
x) ja sisu järg
valida polst
sse nurka (J
background
nd‐image:url('nd‐origin: bord
ounds)
ht taustapilti
eva suuruse
oma ideid p
s sellele, saa
(Backgroun
s vaikimisi p
a või kui tau
gin) omadust
n kolm erin
gi(content‐bo
terdamise jä
oonis 4). Sis
‐origin and b
Joonis 4 – T
css3images/bder;
13
Joonis
i ja see andi
ega. Nüüd
paremini ellu
ab määrata
nd‐origin)
polsterduse j
ustapilt pidi
t kasutada,
nevat väärtu
ox). Piirjoone
ärgi, siis ta
su järgi mää
background‐
Tausta lähtepu
border‐image.
3
s kujundajal
on CSS3‐le
u viia. Kõige t
tausta läht
järgi. See te
jääma ainul
et määrata
ust – piirjo
e järgi on se
usta positsi
äramisel asu
clip)
unkt piirjoone j
png');
e vähe võim
e lisatud m
tähtsam uue
tepunkti, tau
ekitas proble
t sisule taus
kuidas taust
one järgi(bo
e piirjoone v
ioon on pa
ub taust sisu
ärgi.
malusi. Mure
mitmeid uue
endus on mit
usta kinnitu
eeme kui te
staks. Nüüd
ta asukoht o
order‐box),
vasakus ülem
aigutatud po
u vasakus ül
oli ka sama
endusi, mis
tmekordsete
st ja tausta
kkis vajadus
saab tausta
on arvutatud
polsterduse
mises nurgas
olsterdamise
evas nurgas
a
s
e
a
s
a
d
e
s
e
s
2.3.2
Varem
plokil
saab
kasut
jääb p
(CSS3
backgrounbackgroun
backgrounbackgroun
2 Taustak
m sai tausta
le piirjoonen
tausta kinn
tada, kui tau
piirjoonest s
3.info, CSS3:
nd‐image:url('nd‐origin: pad
nd‐image:url('nd‐origin: cont
kinnitus(Ba
a kinnitust k
na punktiir‐
itusega mää
staks pole p
issepoole (Jo
background
Joonis 7 – T
Jooni
Joonis 5 – Ta
css3images/bding;
Joonis 6 –
css3images/btent;
ackground‐
asutada ainu
või kriipsjoo
ärata, kas ta
ilt vaid on vä
oonis 7). Vaik
‐origin and b
Tausta kinnitus
is 8 – Tausta ki
14
austa lähtepun
border‐image.
Tausta lähtepu
border‐image.
‐clip)
ult piirjoone
ont ilma, et
aust ulatub
ärv. Kui mää
kimisi on vää
background‐
s polsterduse jä
nnitus piirjoon
nkt polsterduse
png');
unkt sisuploki j
png');
el. Seega sen
ploki tausta
piirjoonele v
rata see pols
ärtuseks piirj
clip)
ärgi. Taust on p
nel. Taust jääb p
e järgi.
ärgi.
ni polnud võ
värv ei ulatu
või mitte. Se
sterduse järg
joonel (borde
iirjoonest sees
piirjoone alla.
õimalik veeb
uks piirjoone
eda omadus
gi (padding‐b
er‐box) (Joon
spool.
bilooja lisada
e alla. Nüüd
st on parem
box), siis see
nis 8).
a
d
m
e
2.3.3
Taust
väiks
(laius
kõrgu
on võ
(CSS3
2.3.4
CSS3
taust
taust
vaada
(CSS3
3 Taustas
ta suurust
emaks tegem
s ja kõrgus)
usega plokis,
õimalik näida
3.info, Backg
4 Mitmeta
lubab kasut
ad komadeg
apilti ühte ü
atakse erinev
3.info, Multip
backgrounbackgrounbackgroun
suurus(Bac
plokis polnu
ma. CSS3‐ga
või protsen
, mis on taus
ata tausta va
round‐size)
austapildik
ada ühel ele
ga. Tänu selle
lemisse nurk
va suurusega
ple backgrou
nd‐image: url(nd‐repeat: no‐nd‐position: ce
ckground‐si
ud varem v
saab määrat
tides. Kui su
sta lähtepun
stavalt sead
Joonis 9 – T
kasutamine
mendil mitu
ele on võima
ka ja vastaso
a ekraanidel
unds with CSS
'css3images/o‐repeat; enter center,
15
size)
võimalik mä
ta taustapild
uurus määra
nktiga (backg
mele.
Tausta suuruse
e(Multiple
t taustapilti
alik veebilehe
olevasse nurk
.
S3)
opacity.jpg'),
top center;
ärata. Sellek
di suurust (Jo
ata protsend
ground‐origin
erinevad varia
backgroun
(Joonis 10).
ele lisada mit
ka teise, see
url('css3image
ks pidi pilti
oonis 9). Suu
dina, siis see
n) valitud. Ko
andid.
ds)
Selleks tuleb
tmeid kaunis
on mugav ku
es/porfolio.jpg
graafika p
rust saab va
e on suhteli
oos meedia
b lihtsalt eral
stusi. Samut
ui veebilehte
g');
rogrammiga
lida pikslites
ine laiuse ja
päringutega
ldada
i saab lisada
e
a
s
a
a
2.4
Disain
sellek
Nüüd
pilti p
2.4.1
Esime
määr
Erald
piirjo
mille
kasut
(CSS3
bordebordebordeborde
Piirjoon
nerid kellel o
ks kasutama
d on lisatud
piirjoonena.
1 Piirjoon
eseks piirjoo
rata, aga nüü
i on võimali
oone pikslite
le on värv m
tada kõikidel
3.info, How t
border: 16er‐top‐colors: er‐right‐colorser‐bottom‐coler‐left‐colors:
ned(Borde
olid seni suu
erinevaid gr
uued omad
Piirjooni saa
nevärvid(B
onte uuendu
üd saab neid
k ära määra
arvule (pak
määramata jä
l tuntumatel
to create colo
6px solid; #F00 #F30 #s: #F00 #F30 #ors: #F00 #F3 #F00 #F30 #
Joonis 10
ers)
remad soovi
raafilisi elem
used, milleg
b kujutada ü
Border‐colo
useks on piir
mitmevärvi
ata elemend
ksusele). Kui
äävad samato
veebibrause
ored borders
#F60 #F90 #FC#F60 #F90 #FC0 #F60 #F90 ##F60 #F90 #FC
Joo
16
– Mitme taust
id (näiteks ü
mente, mida
ga saab piirjo
ümmarguste
ors)
rjoone värvid
ilisena kujuta
i ülemise, pa
joon on pa
ooni, mis vii
eritel.
s with CSS3)
C0 #FF0 #FF3 C0 #FF0 #FF3 #FC0 #FF0 #FFC0 #FF0 #FF3 #
onis 11 – Piirjo
apildi kasutam
marate nurk
loodi graafik
oone tekitad
na ja elemen
d (border‐co
ada, selleks o
arema, alum
aksem kui är
masena ära
#FF6 #F00 #F3#FF6 #F00 #FF3 #FF6 #F00 ##FF6 #F00 #F3
one värvid.
ine.
kadega plokid
ka või fototö
da mitmevär
ntidele saab
lors). Piirjoo
omadus piirj
mise ja vasak
ra märgitud
märgitud pik
30 #F60 #F90 30 #F60 #F90 #F30 #F60 #F930 #F60 #F90 #
d või plokiva
öötlus progra
rvilistena, ka
lisada varju.
onele sai ka
joone värvid
ku serva värv
värvide arv,
ksel. Seda om
#FC0 #FF0 #F #FC0 #FF0 #F90 #FC0 #FF0 #FC0 #FF0 #FF
arjud) , pidid
ammide abil.
sutada saab
varem värvi
d (Joonis 11).
vid vastavalt
, siis pikslid,
madust saab
FF3 #FF6; FF3 #FF6; #FF3 #FF6; F3 #FF6;
d
.
b
i
.
t
,
b
2.4.2
Seni
Probl
(bord
tükel
(bord
imag
(bord
sisest
Jooni
(bode
(venit
(Babé
2 Piltpiirj
pidi kunstipä
leem tekkis
der‐image)(Jo
damine (bor
der‐image‐re
e‐outset). A
der‐image‐sli
tades jagab
isel 15, aga
er‐image‐rep
tab (stretch
é)
joonena(bo
äraste raami
nurkadele t
oonis 12, 13
rder‐image‐s
epeat). Hetke
Allikas (borde
ice) Näitab, k
pildi võrdsel
pilt pole ja
peat) valib
– Joonis 13),
Joon
Joon
Joonis 1
order‐imag
de tekitamis
tausta lisam
, 14). See jag
slice), laius (b
el ei toeta ü
er‐image‐sou
kust pilt tüke
t (Joonis 15)
agatud võrds
kuidas brau
, kordab (rep
nis 12 – Pilt piir
nis 13 ‐ Pilt piirj
14 ‐ Pilt piirjoon
17
ge)
seks kasutam
misega. Nüüd
guneb viieks
border‐imag
ükski brause
urce) on pil
eldada 9 osa
). Neli väärtu
selt (esimen
user näitab
peat – Joonis
rjoonena, mille
joonena, mille
nena, mille ven
ma mitmeid
d aga on võ
s alamomadu
ge‐width), alg
r laiust (bor
lt, mida kas
aks. Ühe vää
ust sisestade
ne väärtus o
neid tükeld
s 12), ümard
e venitus väärtu
venitus väärtu
nitus väärtus on
plokke ja ne
õimalus CSS3
useks: allikas
gus (border‐
rder‐image‐w
sutatakse pii
ärtuse (kas p
es jaguneb sa
on vasaku se
datud osi s
ab (round)) .
us on repeat.
us on stretch.
n repeat stretch
eile pilte taus
3‐s lisada p
s (border‐im
‐image‐outse
width) ja alg
irjoonena. T
pikslites või p
ama süsteem
erva lõikami
sinu elemen
.
h.
staks lisama.
piirjoone pilt
age‐source),
et) ja kordus
gust (border‐
Tükeldamine
protsendina)
mi järgi nagu
ine). Kordus
di servades
.
t
,
s
‐
e
)
u
s
s
2.4.3
Veeb
nurka
nurka
ümar
veebi
(CSS3
border‐widborder‐imborder‐imborder‐im
3 Raamjoo
bidisainerid, k
adega kujun
adega pilt lis
ratenurkadeg
ilehitsejatel t
3.info, Borde
border‐rad
border‐rad
dth: 32px 32page: url('css3age: url('css3age: url('css3
oneümarad
kes soovisid
ndust, pidid
sada. Nüüd
ga disainiel
töötas, siis o
er‐radius: cre
dius:30px;
dius: 30px 0 3
Joonis 15 –
px 32px 32px;images/bip.pnimages/bip.pnimages/bip.pn
dnurgad(b
varem kand
kasutama v
CSS3 piirjoo
lemente. K
on see ka üks
eate rounded
Joonis 1
Joonis 17 –
0px 0;
Joonis 18 – Tea
18
– Piirjoone pilt j
ng') 32 repeatng') 32 stretchng') 32 round
border‐radi
ilistest veeb
veebilehel m
one raadiuse
Kuna see o
s enim kasut
d corners wit
16 – Raamjoon
– Raamjoone ra
atud mõõtudes
jaotakse tükkid
t; h; stretch;
ius)
ilehtedest m
mitmeid lisa
ga (border‐r
oli ka üks
atavaid CSS3
th CSS!)
ne raadius 30 px
aadius kahel nu
s saab tekitada
deks.
midagi enama
plokke, et
radius) saab
esimesi u
3 omadustes
x.
urgal.
ka ringi.
at – ümarate
neile tausta
veebilooja k
uuendusi, m
st. (Joonis 16
e elementide
aks ümarate
kergesti luua
mis kõikidel
6, 17, 18).
e
e
a
l
2.4.4
Veeb
ning
väga
samu
üks v
1
2
3
(C
2.5
CSS3
Ühek
2.5.1
Üks
kasut
peal
elem
Vana
height: 60width: 60pborder‐rad
4 Plokiva
bikujundajad,
neile eraldi v
lihtsalt ära
uti uuemates
ärv. Need ko
1. Horisonta
negatiivn
2. Vertikaal
tekib alla
3. Hajususe
tekib.
CSS3.info, Bo
box‐shado
Värvjal
värvi mood
ks huvitavam
1 Läbipais
rohkemat r
tusel juba va
olevad läbip
enti teha tum
sti oli Intern
px; px; dius: 100%;
ri(Box‐sha
, kellel oli va
varjuga taust
määrata, ku
s tuntud bra
olm suurust o
aalne varju
ne tähendab,
ne kõrvaleka
.
raadius. Ku
ox‐shadow, o
ow: 8px 7px 5p
läbipaistv
dul sisaldab
maks uuendus
stvus(Opac
akendust le
arem, aga po
paistvad elem
medamaks v
et Exploreril
adow)
arem huvi te
tapildi lisama
i suur, mis s
userites (Joo
on:
kõrvalekall
et vari tekib
alle. Negatiiv
i see on 0, s
one of CSS3′s
px #030;
Joonis 19
vus(Color)
läbipaistvus
seks on järkt
city)
eidnud CSS3
olnud CSS2.1
mendid ann
või heledama
kasutusel er
19
ha varjuga e
a. CSS3 uuen
suunas, mis
onis 19). Sel
e. Positiivn
b plokist vasa
vne tähenda
siis vari on t
s best new f
– Ploki vari plo
)
funktsioon
toonimine.
3 võimalus o
standardi os
avad väga h
aks vastavalt
rinev süntak
elemente pid
nduseks on p
värvi ja kui
lel omaduse
e tähendab
akule.
ab, et ploki
terav. Mida
eatures)
okist all ja vasa
ning lisatud
on hetkel l
sa, seega an
huvitava tule
sellele, mis
ks:
did selleks ka
ploki vari (bo
hajutatud on
e parameetri
b, et vari t
vari tekib ü
suurem num
kul.
on HSL, HS
äbipaistmatu
dis valideeri
emuse. Läbip
tooni eleme
asutama mit
ox‐shadow),
n vari. See o
iteks on kolm
tekib plokist
ülesse, positi
mber, seda h
SLA, RGBA vä
us (Joonis 2
misel veatea
paistvusega
ent tema all o
meid plokke
millega saab
on kasutusel
m suurust ja
t paremale,
iivne, et see
hajusam vari
ärvimudelid.
20). See oli
ate. Üksteise
on võimalik
on.
e
b
l
a
,
e
i
.
i
e
k
2.5.2
RGBA
RGBA
kuni
on lä
2.5.3
CSS3
saab
Param
See a
filter: alph
2 RGBAvä
A on samade
A‐ga märgita
255) ning läb
bipaistmatu
backgroun
3 HSLvärv
teeb tutvust
seda värviül
meetriteks o
Toon, mis
22).
Küllasus o
Heledus
puhtal ku
annab väga la
ha(opacity = 50
ärvid
e parameetri
akse värvirat
bipaistmatus
(Joonis 21).
Joon
nd‐color: rgba
vid
t HSL (Hue, S
eminekute t
n:
s on kraad v
on protsentu
on ka prots
ujul.
aia värvide ja
0);
Joon
itega, mis ta
ta punase, r
s märgitakse
nis 21 – RGBA v
(255, 0, 0, 0.2
Saturation, L
egemisel, se
värvirattal: 0
uaalne väärtu
entuaalne: 0
a tooni spekt
20
(Scott, 20
nis 20 – Foto on
avapärane RG
rohelise ja s
e arvuga vah
värvimudeliga s
2)
Lightness ‐ to
est kerge on
(või 360) on
us: 100% on
0% on tume
tri. Samuti to
006)
n läbipaistev.
GB. Lisatud o
inise värvi s
emikus 0 ku
saab tekitada l
oon, küllastu
muuta tume
n punane, 12
puhas värv,
e (must), 100
oetavad seda
on „Alpha“ v
egu (iga värv
ni 1, kus 0 o
äbipaistvust.
us, heledus) v
eduse‐heledu
20 on rohelin
0% tuhm, ilm
0% on hele
a omadust u
väärtus ehk
rv valitakse v
on täiesti läb
värvimudelig
use protsent
ne, 240 on si
ma värvita.
(valge), ja 5
ued brauser
läbipaistvus.
vahemikus 0
bipaistev ja 1
ga. Kasutada
i.
inine (Joonis
50% on värv
id.
.
0
1
a
s
v
2.5.4
Sama
Läbip
Kui
läbipa
läbipa
2.5.5Järkto
(näite
4 HSLAvä
a, mis HSL v
paistvus märg
läbipaistvus
aistvusarvuk
aistvusarv 0.
backgroun
5 Järktoonoonimine an
eks tausta vä
ärvid
värvid, lisatu
gitakse arvug
pole olulin
ks sisestama
.6.
Joon
nd‐color: hsla(
niminennab tihtipea
ärv). Seni lah
Joonis 2
Joonis 23 – HS
ud on neljas
ga vahemiku
ne, siis on
1 ja kui neid
nis 24 – HSLA v
(80, 70%, 45%
ale palju huvi
endati sellist
21
22 ‐ HSL värvira
SL värvid: puna
s väärtus „A
us 0 kuni 1, k
mõttekam
d värve on p
värvimudeliga s
%, 0.6);
itavama tule
t probleemi
atas. (Lin, 2009
ane, roheline ja
A“(Alpha) eh
kus 0 on täie
kasutada
alju võib see
saab tekitada lä
emuse veebil
samuti graaf
9)
a sinine.
hk elemendi
sti läbipaiste
HSL värve.
e muutuda tü
äbipaistvust.
ehele kui sa
fikaprogram
i läbipaistvu
ev ja 1 on läb
Vastasel k
üütavaks. Jo
ma värvi ele
midega. Teh
us (Opacity).
bipaistmatu.
korral peab
onisel 24 on
ment
hti 1 piksli
.
.
b
n
laiune
vajali
CSS v
veebi
filter
algus
(Wal
2.6 Tekst
ületä
kasut
huvit
anna
2.6.1
CSS3
Varem
lisam
ebam
(Joon
Tekst
1
e riba, kus o
ikud parame
värviülemine
ilehitsejateg
järktoonimis
spunkt, lõpp‐
ll, Cross‐Brow
background:background:filter: progid
Tekstieti efektide h
itumine ja re
tamine kõige
avate fontid
b võimaluse
1 Tekstiv
saab lisada
m pidi vajad
ma veebilehe
mugav ja ress
nis 26).
ti varjul on 4
1. Horisonta
negatiivn
li värviülemi
etrid ja järkt
kut ehk järkt
a. Praegu tö
se jaoks (nag
‐punkt, algus
wser CSS Gra
Joo
‐webkit‐gradien ‐moz‐linear‐grad:DXImageTransfo
fektidulka CSS3‐s
eamurdmine
e huvitavam
de kasutamis
ajalehe artik
ari(Text‐sh
tekstile var
dusel tekstile
ele. Kui hilje
sursinõudlik.
parameetrit
aalne varju
ne tähendab,
nek peal ja k
toonimine ar
toonimist (Jo
ötab järktoo
gu näidis koo
svärv ja lõppv
adient)
onis 25 – Järkto
t(linear,left bottodient(center bottorm.Microsoft.gra
kuuluvad te
e. Veebilooja
m ja aega ko
seks ning nen
kleid veebis
hadow)
rju, mis elim
e varju lisam
em oli vaja
. Nüüd saab
t:
kõrvalekall
et vari tekib
22
kasutati kord
rvutatakse a
oonis 25) saa
onimine ainu
odis). Üldisel
värv.
oonimine tume
om,left top,color‐tom, rgb(178,237adient(startColor
eksti vari, ve
a jaoks on võ
kkuhoidvam
ndele varju l
kujutada nag
mineerib lõpu
ma mõnes g
teksti muut
väga lihtsa
e. Positiivn
b plokist vasa
duva taustap
utomaatselt
ab nüüd kasu
lt eesliideteg
t määratakse
erohelisest hele
‐stop(0.05, rgb(17,186) 5%, rgb(21rstr='#b2edba', e
eebifondid, m
õrreldes vara
m uuendus. E
lisamiseks. K
gu paberkan
uks graafika
graafikaprog
ta, tuli graa
koodiga ära
e tähendab
akule.
ildina. Nüüd
.
utada kõikide
ga ja Interne
e ära tüüp (li
eroheliseks.
78,237,186)),colo,107,13) 100%); ndColorstr='#156
mitmeveerul
asemaga tek
Ei ole vaja e
Ka teksti mitm
djal.
programmid
rammis, salv
afika uuesti
määrata, m
b, et vari t
saab CSS3‐g
e tuntumate
et Exploreril o
linear, radial
or‐stop(1, rgb(21
6B0D');
line teksti a
ksti varju ja v
enam kasuta
meveerulise
de kasutamis
vestama sel
luua, see o
illist varju te
tekib plokist
ga märkida
on oma
l),
1,107,13)));
setus, teksti
veebifontide
ada pildifaile
ks tegemine
se vajaduse.
le pildina ja
oli aga väga
ekstile lisada
t paremale,
i
e
e
e
.
a
a
a
,
2
3
4
(C
2.6.2
Varem
muud
Nüüd
hiljem
Seda
braus
Safar
.otf (O
(CSS3
2. Vertikaal
tekib alla
3. Hajususe
tekib.
4. Varju vär
CSS3.info, Te
text‐shadotext‐shadotext‐shado
Joonis 26 – T
2 Veebifo
m jäi tihtipe
d kirjatüüpi,
d tuleb font o
m kasutama
uuendust t
serid aga Int
ri 3.1 välja an
OpenType) fo
3.info, Web f
@font‐fac fo sr
ne kõrvaleka
.
raadius. Ku
v.
ext‐shadow,
ow: 3px 3px 1ow: ‐3px ‐3px ow: 0 0 20px #
Teksti vari. 1) P
ondid(Web
ale disaineri
pidi ta selle
oma serveris
nagu tavalist
utvustati es
ternet Explo
ndest saavad
onte. Nüüds
fonts with @
e { ont‐family:Cherc: url('css3im
alle. Negatiiv
i see on 0, s
Photoshop l
px #000; 1px #F00, ‐5p#000;
Paremal ja all. 2
fonts)
itele tava ve
e graafika pr
sse ülesse la
t fonti.
malt juba C
oreri pakutud
d veebiloojad
eks toetavad
@font‐face)
eri; mages/CHERI__
23
vne tähenda
siis vari on t
like effects u
px ‐5px 5px #F
2) Neli varju vas
eebifontidest
rogrammis p
adida, see jä
CSS2‐s ja sed
d .eot(embe
d kasutada ü
d seda uuend
__.TTF');}
ab, et ploki
terav. Mida
using CSS)
FC0, ‐7px ‐7px
sakul ja üleval.
t väheks. Ku
pildina salves
ärel @font‐fa
da on raken
edded open
ükskõik mis li
dust kõik tun
vari tekib ü
suurem num
5px #000, ‐8p
3) Nihketa, ku
i veebilooja
stama ja vee
ace funktsioo
datud Intern
type) fonte
itsentseeritu
ntumad uued
ülesse, positi
mber, seda h
px ‐8px 3px #9
uid suure hajuv
soovis kasu
ebilehele lisa
oniga ära de
net Explorer
ei toetanud
ud .ttf(TrueTy
d brauserid (
iivne, et see
hajusam vari
909;
vusega.
tada, mingit
ama pildina.
efineerima ja
r 5‐s. Teised
ning alates
ype font) või
(Joonis 27).
e
i
t
.
a
d
s
i
2.6.3
Seni
ajakir
väga
kahel
veerg
(CSS3
2.6.4
Kui o
tabel
kasut
Sel ju
oma
jääb o
@font‐fac fo srh4 { font‐fp{font‐fam
3 Mitmeve
oli raske pai
rja väljaanne
kergelt teks
l viisil: defin
gude vahelise
3.info, Multi‐
column‐cocolumn‐ga
4 Tekst„ü
on tarvis ve
itesse või s
tajale jätta s
uhul kasutat
sõne. Clip k
oma sõne. H
e { ont‐family: Serc: url('css3imfamily: Segoe;mily: Cheri;}
Joo
eerulineas
gutada tekst
et pidid päri
ti mitmesse
neerides iga
e ala suurust
‐column layo
ount: 3; ap: 1em;
üleserva“ (T
eebilehele p
sisendteksti
ilmale nähta
takse teksti
orral kärbib
Hetkel pole se
goe; mages/SEGOEP }
nis 27 – CSS3‐g
etus(multi
ti mitmesse
s palju vaev
veergu. (Joo
a veeru laiu
t.
out)
Joonis
Text‐overflo
aigutada ro
aladesse. S
av vihje, et te
ületäitumis(
teksti ja elli
eda omadus
24
PRB.TTF');}
ga on võimalik
i‐columnlay
veergu. Disa
va nägema t
onis 28). See
ust või defi
s 28 – Mitmeve
ow)
ohkem tekst
Sellisel juhu
eksti on kärb
text‐overflow
ipsise korral
st veel kasutu
lisada huvitava
yout)
ainerid, kes
teksti ümber
e lubab veeb
neerides ve
eeruline asetus.
ti kui teatud
l tuleb teks
bitud (tavalis
w) omadusi.
lisab „…“ sü
usele võtnud
amaid fonte.
pidid lehte k
rpaigutamise
iloojal paigu
ergude arvu
.
d elementi
sti kärpida.
elt märgitak
Väärtusteks
ümboli (Joon
d Mozilla Fire
kujutama ku
ega. CSS3‐ga
utada teksti v
u. Lisaks sa
võib mahtu
Kui see ju
kse seda süm
s on clip ja
nis 29). Oma
efox. Kasutaj
i ajalehe või
saab lisada
veergudesse
ab määrata
uda. Näiteks
uhtub, tuleb
mboliga „…“).
ellipsis ning
a sõne puhul
jale saab üle
i
a
e
a
s
b
.
g
l
e
serva
tekst
(Netw
2.6.5
Ream
murd
jooks
sõna
(CSS3
2.7
Siin t
valida
arvut
lihtsa
2.7.1
See t
kuvab
ka su
ja trü
a läinud teks
nähtavale.
work)
5 Reamur
murdmise om
duda järgmis
seb pikk sõn
tagumine po
3.info, word‐
Joo
Teisedm
tutvustataks
a, millisele
tist erinevaid
amaks. Tänu
1 Meediap
tähendab, et
b. See on väg
uurelt televiis
ükilehekülged
all – Sobi
ti nähtavaks
Joonis
rdmine(Wo
madus paku
sele reale. S
na üle eleme
ool viiakse jä
‐wrap)
nis 30 – Veebil
moodulid
e meedia p
seadmele v
d seadmeid
neile ei pea
päringud(m
t võimalik on
ga kasulik se
sori ekraanil
dele (print).
lik kõikidele
s teha CSS kä
s 29 – Üle serva
ord‐wrap)
uti välja Mic
Sellel on kak
endi ääre. B
ärgmisele rea
ooja saab valid
(Otherm
päringud ja s
eebilehte ku
veebis liikle
enam kasuta
mediaquer
n muuta mõ
elleks, et vee
t. Põhiliselt
Erinevad me
seadmetele
25
äsklusega ho
a mineva tekst
crosofti poo
ks väärtust:
reak‐word v
ale.
da, kas teksti m
modules)
siirded ning
ujutatakse. T
miseks. CSS3
ama teisi teh
ries)
õne elemend
ebilehed olek
kasutatakse
eediatüübid h
.
over (ehk ku
tile lisatakse ka
olt ja lisati
normal or
väärtusega m
murtakse pikkad
g transforme
Tänapäeval
3 Siirete ja t
hnoloogiaid n
di laiust ja kõ
ksid ilusti loe
kahte meed
hetkel on:
rsoriga üle e
sutajale vihje.
CSS3. See l
break‐word
murdub elem
de sõnade korr
eeringud. Me
kasutatakse
transformee
nagu Flash v
õrgust vastav
tavad nii mo
dia tüüpi: arv
elemendi liik
lubab pikka
(Joonis 30)
mendi servas
ral või mitte.
eedia päring
e järjest ena
eringutega m
või Javascript
valt seadme
obiiltelefoni
vuti ekraanid
kudes) ilmub
del sõnadel
. Normaliga
st sõna ning
gutega saab
am ja enam
muutub veeb
t.
ele, mis seda
ekraanilt kui
dele (screen)
b
l
a
g
b
m
b
a
i
)
(B
C
o
braille – M
embosse
handheld
print –
eelvaaten
projectio
screen –
speech –
tty – Mõ
või mobii
tv – Mõ
kerimine,
Bert Bos, 20
CSS3‐ga on v
on suurem võ
@media s p#meedia backgro b@media s p#meedia color:#F0
Mõeldud sea
d – Mõeldud
d – Mõeldud
Mõeldud
na.
n – Mõeldud
Mõeldud pe
Mõeldud kõ
õeldud seadm
ilsed seadme
õeldud telev
, heli kasutat
10)
võimalik mää
õi väiksem m
creen and (ma_yks { ound: #00C; order:solid 6pcreen and (ma_kolm{ back00;} }
Joonis 31
admetele, m
d punktkirja t
käeshoitava
trükilehekülg
d projekteeri
amiselt värv
õne süntesaa
metele, mis
ed, millel on
viisoritüüpi
tavus)
ärata, millise
millestki. (Joo
ax‐width: 800
px #F00; } } ax‐width: 480ground:#000;
‐ Teatud tingim
26
is väljastab p
trükimasinat
atele seadme
gedele ja
itud present
vilistele arvut
atoritele.
kasutavad k
piiratud ekra
seadmetele
ena ükskõik
onis 31, 32)
0px) and (min‐
0px) { ;
mustel kuvab m
puutetundlik
tele.
etele (väike e
dokumentid
atsioonidele
ti ekraanidel
kindlat tähes
aani võimalu
e (madal re
mis element
‐width: 500px
meedia päringu
ku punktkirja
ekraan, piirat
dele, mida
, näiteks pro
e.
sammu (Näit
used).
esolutsioon,
ti kuvatakse,
x) {
tega tausta tei
a.
tud ülekande
vaadatakse
ojektoritele.
teks teletaip
värv, piirat
, kui veebib
isiti.
ekiirus).
e printimise
p, terminalid
tud ekraani
rauseri laius
e
d
i
s
(Wall
2.7.2Varem
pööra
CSS3
CSS3‐
2.7.2
l, CSS3 Medi
2 Siirdedjm pidi veebi
ata, liigutada
transformee
‐s. Tänu nen
2.1 CSS3Tr scale, sc
telge.
Rotate –
translate
skew, sk
Matrix –
pööram
väärtuse
(Hyatt, 2
transformtransformtransformtransformtransform
Joonis 32 ‐ Te
a Queries)
jatransformlooja kasuta
a, suurendad
erimisomadu
dele omadus
TransformeecaleX, scaleY
– Pöörab ele
e, translateX
kewX, skewY
– Maatriks pö
is väärtused
ed.
2007)
: scale(2); :rotate(‐96de: translate(3e: skew(10deg,: matrix(2, ‐0.
eistel tingimust
meeringudma fototööt
da, kallutada
used. Need u
stele kaob tu
ermisomad– Muudab e
menti.
X, translateY
Y – Kallutab e
ööramine. Ko
, teised kaks
g); m,0); , 20deg); 2, 0, 2, 0, 0);
27
tel kuvab meed
lust, flashi võ
ning seda te
uuendused o
ulevikus Flas
dused:elemendi suu
– Liigutab el
elementi. Saa
oosneb kuue
s on kallutam
dia päringud el
õi Javascript
ehes sujuvalt
on ühed kõige
h veebilehte
urust. Eraldi
lementi pare
ab kallutada
est väärtuses
mis väärtused
emendi tausta
i, et element
t animatsioo
e suurema a
edele vajadus
saab muuta
emale, vasak
ka ainult üht
st. Millest es
d ja viimased
a teisiti.
te veebilehe
onina. Nüüd v
rengu teinud
s.
elemendi X‐
kule, ülesse, a
te telgedest
simesed kaks
d kaks on liig
el näiteks
võimaldab
d muutused
‐telge ja Y‐
alla.
.
s on
utamis
2.7.2
2.8 Käeso
selek
kasut
jätta
Muga
ploki
kasul
Kuna
lihtsa
trans
Väga
puhta
2.2 CSS3Si transition
none.
transition
transition
ease, line
transition‐transition:
Jo
CSS3kokoleva semin
ktorite valik
tada saab om
siirdeid ja tr
avamaks on
suuruseid a
ik on see sis
CSS3 on sii
ate vahend
sformeeringu
kasulikud on
ana ja lihtsan
iireteomadn‐property –
n‐duration –
n‐timing‐func
ear, ease‐in,
‐duration: 2s, : transform 3s
oonis 33 ‐ CSS3
kkuvõtenaritöö auto
on laienenu
ma fonte ja
anformeerin
tehtud kas
rvutatakse. S
endväljades,
ski kujundus
itega väga
utega.
n kindlasti se
na.
dused:Kirjeldab, m
Kirjeldab, ku
ction – Kirjel
ease‐out, ea
4s; s ease‐in
3‐ga saab eleme
ori arvates o
d, muudatus
värvide kas
nguid.
utajaliidese
Samuti saab
, kus vahest
skeel on väg
ilusana.
elektorite uu
28
mis omadus v
ui kaua siire
ldab, kuidas
ase‐in‐out, cu
ente keerata, li
on olulistem
si on tehtud
sutamismude
moodulis o
määrata, ka
kipub tekst o
ga palju uue
Alustades
uendused. Ku
vallandab ani
kestab. Väär
animatsioon
ubic‐bezier(x
iigutada, suuru
maks uuend
d piirjoontes
eleid on lisa
levaid omad
as kasutaja s
olema pikem
ndusi, mis a
ümaratest
ui neid õigest
imatsiooni. V
rtused sekun
n edeneb aja
x1, y1, x2, y2
ust muuta ja an
usteks mitm
, elementide
ndunud. Mu
dusi. Veebilo
aab element
m kui sisendv
annab veebil
nurkadest,
ti kasutada, s
Väärtused on
ndites.
a jooksul. Vää
).
nimeerida.
mekordsed t
ele saab lisa
uidugi ei saa
ooja saab va
tide suurust
välja suurus.
loojatele vee
lõpetades
saab hoida k
n all või
ärtused on:
taustapildid,
ada varjusid,
a mainimata
alida, kuidas
muuta. Eriti
ebi kujutada
siirete ja
koodi väga
,
,
a
s
i
a
a
29
Kokkuvõte
Töö eesmärgiks oli tutvustada, millised on uued lahendused CSS3‐s, millised on neist kõige
olulisemad. Milliseid võimalusi saab veebiautor juurde tänu CSS3‐le? Mis brauserid toetavad CSS3
lahendusi ja mis on peamised erinevused võrreldes eelnevate versioonidega.
Töö eesmärgid said täidetud. Kuigi raske on välja tuua kõige olulisemaid uuendusi, siis küsitluse
põhjal selgus, et kõige rohkem huvi pakub piirjoontele ümarate nurkade määramine. Samuti leidsid
küsitlusele vastanud, et mitmekordsete taustapiltide kasutamine CSS3‐e abil annab
veebikujundamisele palju juurde ning oma fontide lisamine veebilehele annab võimaluse erinevatele
kirjatüüpidele.
Selgus, et brauserite toetused CSS3 uuendustele on üsna kesised. Tuntumatest brauseritest (Mozilla
Firefox, Internet Explorer, Safari, Opera ning Google Chrome) on kõige väiksem toetus Internet
Exploreri veebilehitsejal, kuigi IE 9 Beta versioon on teinud suure arengu võrreldes IE 8‐ga.
Järeleproovitud CSS3 uuenduste põhjal selgus, et Google Chrome ja Safari mootor Webkit on hetkel
kõige rohkem toetanud CSS3 uuendusi. Pisut väiksem toetus on Mozilla Firefoxi mootoril Gecko. (Lisa
1)
Töö autor leiab, et suurim uuendus, mis CSS3‐s on toimunud võrreldes varasemate versioonidega on
stiililehtede moodulipõhiseks muutmine. Erimooduleid on võimalik ametlikult välja anda erinevatel
aegadel ning orienteeruda on moodulites lihtsam.
Kuna CSS3 pole ametlik väljalase, siis oleks võimalik uurida CSS3 ametliku W3C soovituse uusi
omadusi. Kindlasti oleks huvitav teha küsitlus veebiloojate seas, mis on nende jaoks kõige olulisemad
uuendused ja mida nad kasutavad igapäevaselt. Huvitav oleks samuti jälgida, kui kiirelt erinevad
brauserid leiavad ametlikule soovitusele täieliku toetuse.
30
Kasutatudkirjandus
(W3C), B. B. (9. 8 2007. a.). CSS basic box model. Allikas: World Wide Web Consortium (W3C):
http://www.w3.org/TR/css3‐box/
Babé, L.‐R. (kuupäev puudub). Meet a ninja living in browsers. Allikas: lrbabe :
http://www.lrbabe.com/sdoms/borderImage/
Bert Bos, T. Ç. (27. 7 2010. a.). Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.
Allikas: W3C: http://www.w3.org/TR/CSS21/media.html
Coyier, C. (2009, 5 5). Poll Results: CSS3 Features. Retrieved from CSS Tricks: http://css‐
tricks.com/poll‐results‐css3‐features/
Coyier, C. (13. 2 2010. a.). The Skinny on CSS Attribute Selectors. Allikas: CSS‐Tricks: http://css‐
tricks.com/attribute‐selectors/
CSS:Sissejuhatus. (kuupäev puudub). Allikas: Vikiõpikud:
http://et.wikibooks.org/wiki/CSS:Sissejuhatus
CSS3.info. (kuupäev puudub). Background‐size. Allikas: CSS3 . Info ‐ All you ever needed to know
about CSS3: http://www.css3.info/preview/background‐size/
CSS3.info. (kuupäev puudub). Border‐radius: create rounded corners with CSS! Allikas: CSS3 . Info ‐ All
you ever needed to know about CSS3: http://www.css3.info/preview/rounded‐border/
CSS3.info. (kuupäev puudub). Box‐shadow, one of CSS3′s best new features. Allikas: CSS3 . Info ‐ All
you ever needed to know about CSS3: http://www.css3.info/preview/box‐shadow/
CSS3.info. (kuupäev puudub). Box‐sizing, box‐model fixes for the simple people. Allikas: CSS3 . Info ‐
All you ever needed to know about CSS3: http://www.css3.info/preview/box‐sizing/
CSS3.info. (kuupäev puudub). CSS3 Previews. Allikas: CSS3 . Info ‐ All you ever needed to know about
CSS3: http://www.css3.info/preview/
CSS3.info. (kuupäev puudub). CSS3 Speech. Allikas: CSS3 . Info ‐ All you ever needed to know about
CSS3: http://www.css3.info/preview/speech/
CSS3.info. (kuupäev puudub). CSS3: Attribute selectors. Allikas: CSS3 . Info ‐ All you ever needed to
know about CSS3: http://www.css3.info/preview/attribute‐selectors/
CSS3.info. (kuupäev puudub). CSS3: background‐origin and background‐clip. Allikas: CSS3 . Info ‐ All
you ever needed to know about CSS3: http://www.css3.info/preview/background‐origin‐
and‐background‐clip/
CSS3.info. (kuupäev puudub). How to create colored borders with CSS3. Allikas: CSS3 . Info ‐ All you
ever needed to know about CSS3: http://www.css3.info/preview/colored‐border/
31
CSS3.info. (kuupäev puudub). Multi‐column layout. Allikas: CSS3 . Info ‐ All you ever needed to know
about CSS3: http://www.css3.info/preview/multi‐column‐layout/
CSS3.info. (kuupäev puudub). Multiple backgrounds with CSS3. Allikas: CSS3 . Info ‐ All you ever
needed to know about CSS3: http://www.css3.info/preview/multiple‐backgrounds/
CSS3.info. (kuupäev puudub). Outline. Allikas: CSS3 . Info ‐ All you ever needed to know about CSS3:
http://www.css3.info/preview/outline/
CSS3.info. (kuupäev puudub). Text‐shadow, Photoshop like effects using CSS. Allikas: CSS3 . Info ‐ All
you ever needed to know about CSS3: http://www.css3.info/preview/text‐shadow/
CSS3.info. (kuupäev puudub). The resize property in CSS3. Allikas: CSS3 . Info ‐ All you ever needed to
know about CSS3: http://www.css3.info/preview/resize/
CSS3.info. (kuupäev puudub). Web fonts with @font‐face. Allikas: CSS3 . Info ‐ All you ever needed to
know about CSS3: http://www.css3.info/preview/web‐fonts‐with‐font‐face/
CSS3.info. (kuupäev puudub). word‐wrap. Allikas: CSS3 . Info ‐ All you ever needed to know about
CSS3: http://www.css3.info/preview/word‐wrap/
Gibbins, J. (21. November 2006. a.). Aural CSS: Support for CSS 2 Aural Style Sheets / CSS 3 Speech
Module | dotjay.co.uk. Allikas: Dotjay’s Lab: http://lab.dotjay.co.uk/notes/css/aural‐speech/
Hyatt, D. (26. 10 2007. a.). CSS Transforms. Allikas: The WebKit Open Source Project:
http://webkit.org/blog/130/css‐transforms/
Lie, H. W., & Bos, B. (1999). Cascading Style Sheets, designing for the Web. Addison Wesley.
Lin, P. (21. 12 2009. a.). Playing Around with CSS3 Colors. Allikas: Lateral Code:
http://www.lateralcode.com/playing‐with‐css3‐colors/
Meyer, E. A., & Bos, B. (23. 5 2001. a.). Introduction to CSS3. Allikas: World Wide Web Consortium
(W3C): http://www.w3.org/TR/css3‐roadmap/
Munner, M. (14. 06 2009. a.). Mis on CSS? Allikas: HTML, XHTML ja CSS artiklid, juhendid, vahendid:
http://www.interneti.info/artiklid/css/
Neerden, T. V. (10. Jaanuar 2010. a.). CSS3 browser support & properties syntax. Allikas: Le Hollandais
Volant: http://lehollandaisvolant.net/tuto/css3/
Network, M. D. (kuupäev puudub). text‐overflow ‐ MDC Doc Center. Allikas: Mozilla Developer
Network: https://developer.mozilla.org/En/CSS/Text‐overflow
Robbins, J. N. (2006). Web design in a nutshell (3rd tr.). O'Reilly Media, Inc.
Scott, J. (16. 8 2006. a.). CSS Opacity in Internet Explorer (IE). Allikas: Joseph Scott:
http://joseph.randomnetworks.com/2006/08/16/css‐opacity‐in‐internet‐explorer‐ie/
Wall, W. D. (kuupäev puudub). Cross‐Browser CSS Gradient. Allikas: Web Designer Wall:
http://www.webdesignerwall.com/tutorials/cross‐browser‐css‐gradient/
32
Wall, W. D. (kuupäev puudub). CSS3 Media Queries. Allikas: Web Designer Wall:
http://www.webdesignerwall.com/tutorials/css3‐media‐queries/
Wall, W. D. (kuupäev puudub). http://www.webdesignerwall.com/tutorials/css3‐media‐queries/.
Allikas: Web Designer Wall: http://www.webdesignerwall.com/tutorials/css3‐media‐queries/
xhtml.com. (22. 10 2007. a.). Conversation with CSS 3 team. Allikas: XHTML Reference:
http://xhtml.com/en/css/conversation‐with‐css‐3‐team/
33
Lisa1
Webkit Gecko Trident Presto border‐color ‐ + ‐ ‐ border‐image + + ‐ + border‐radius + + + + box‐shadow + + + + text‐shadow + + ‐ + @font‐face + ‐ ‐ + background‐origin
+ + ‐ ‐
background‐clip
+ + ‐ ‐
background‐size
+ + + +/‐
multiple‐backgrounds
+ + + +
opacity + + + + HSL + + + + HSLA + + + + RGBa + + + + text‐overflow + ‐ + + word‐wrap + + + + multicolumn‐layout
+ + ‐ ‐
box‐sizing ? ? ? ? resize + ‐ ‐ ‐ outline‐offset + + ‐ + gradient + + + ‐ Transitions + +/‐ ? ‐/? media‐queries + + + +
Järeleproovitud uuendustest töötas kõige paremini Google Chrome ja Safari mootor Webkit. Mozilla
Firefoxi mootor Gecko saavutas autori järele proovitud uuendustes teisena parima tulemuse. Opera
mootor Presto edestas Internet Exploreri mootorit Tridenti.
Tabel on koostatud autori katsetuste põhjal. Veebileht asub aadressil: http://ritso.pri.ee/css3.html
