02 - Osnove CSS-a
Šta je CSS?
- CSS je skraćenica za Cascading Style Sheets
- Stilovi definišu kako se prikazuju HTML elementi
- Ovako se rešava problem održavanja
- Eksterni Style Sheet-ovi se čuvaju u CSS datotekama i štedi se mnogo posla
Sintaksa
- CSS sintaksa ima tri dela – selektor, svojstvo i vrednost
- selektor {svojstvo:vrednost;}
- Selektor je HTML element/tag koji se opisuje
- Svojstvo je atribut koji se menja, tj. kome se dodeljuje vrednost
- Svojstvo i vrednost se razdvajaju sa dvotačkom i stavljaju se između velikih zagrada
- h1 {color:blue;}
- Ako vrednost ima više reči stavljaju se navodnici
- p {font-family:"sans serif";}
- Ako se navodi više svojstava za jedan selektor razdvajaju se sa tačka-zarez
- p {color:red;text-align:center;}
- Radi bolje preglednosti svako svojstvo se može navesti u posebnom redu
- Moguće je grupisanje više selektora tako što se razdvoje zarezima
Id i class selektori
- Osim HTML elemenata moguće je definisati sopstvene id i class selektore
- Id selektor
- Id selektor definife stil za jedan konkretan element
- Id selektor koristi id atribut HTML elementa i definiše se sa #
- Sledeći stil će se primeniti na element koji ima id="idprimer":
- #idprimer {text-align:center;color:red;}
- Class selektor
- Class selektor se koristi za definisanje stila za grupu elemenata – koristi se za više elemenata
- Class selektor koristi class atribut HTML elementa i definiše se sa .
- Sledeći stil će se primeniti na sve HTML elemente koji imaju class="centrirano":
- .centrirano {text-align:center;}
- Moguće je navesti da se stil primenjuje samo na određen HTML element
- p.centrirano {text-align:center;}
CSS komentari
- CSS komentar počinje sa /* i završava sa */
Načini za ubacivanje Style Sheet-a
- External style sheet
- External style sheet se koristi kad se definišu stilovi za više strana
- Svaka strana linkuje CSS datoteku korišćenjem <link> taga u head sekciji
- <link rel="stylesheet" type="text/css" href="/mojstil.css" />
- CSS datoteka ne sadrži HTML tagove
- Ekstenzija je .css
- Internal style sheet
- Internal style sheet se koristi kada jedan dokument ima posebne stilove
- Internal style-ovi se definišu u head sekciji HTML dokumenta korišćenjem <style> taga
- <head> <style> p {margin-left:20px;} </style> </head>
- Inline style
- Inline style se koristi za oblikovanje jednog HTML elementa
- Koristi se style atribut odgovarajućeg taga
- <p style="color:red">Neki tekst.</p>
- Prioritet pri kaskadnom nasleđivanju stilova (od nižeg ka višem)
- Browser default
- External style sheet
- Internal style sheet (u head sekciji HTML dokumenta)
- Inline style (unutar HTML elementa)
CSS pozadina
- Boja pozadine
- Koristi se svojstvo background-color
- Boja pozadine za celu stranu se definiše u body tagu
- body {background-color:#b0c4de;}
- Boja se navodi na jedan od tri načina:
- imenom – npr. red, yellow...
- RGB vrednošću – npr. rgb(255,0,0)
- Hex-a vrednošću – npr. #ff0000
- Slika kao pozadina
- Koristi se svojstvo background-image
- Podrazumevano slika se ponavlja da pokrije ceo element
- Slika kao pozadina za celu stranu se definiše u body tagu
- body {background-image:url("slika.gif");}
- Za kontrolu ponavljanja koristi se svojstvo background-repeat
- repeat-x, repeat-y, no-repeat
- Položaj slike se određuje svojstvom background-position
- top/center/bottom/x koord. left/center/right/y koord.
- Da li se slika skroluje sa stranom određuje svojstvo background-attachment
- scroll, fixed
- Skraćeni oblik zapisa
- body {background:#ffffff url('slika.png') no-repeat top right;}
- Redosled svojstava:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS tekst
- color - Boja teksta
- text-align - Horizontalno poravnanje teksta
- left, center, right, justified
- text-decoration - Ukrašavanje teksta, najčešće je podvlačenje
- none, overline, line-through, underline
- text-transform - Kontrola velikih i malih slova
- uppercase, lowercase, capitalize
- text-indent - Uvlačenje prvog reda pasusa
- letter-spacing - Razmak između slova
- line-height - Visina reda
- vertical-align - Vertikalno poravnanje u redu
- baseline, top, text-top, middle, bottom, text-bottom...
- word-spacing - Razmak između reči
- Serifni i beserifni fontovi
- Beserifni fontovi su čitljiviji na ekranima, serifni u štampanom tekstu
- CSS Font Families
- generic family
- serif, sans-serif, monospace
- font family
- Koristi se svojstvo font-family
- Navodi se više vrsta fontova, a završava se sa generičkim fontom
- Ako ime fonta ima više reči stavlja se pod navodnike
- p {font-family:"Times New Roman", Times, serif;}
- generic family
- font-style - Stil fonta
- normal, italic, oblique
- font-size - Veličina fonta
- Moguće je postaviti apsolutnu ili relativnu veličinu fonta
- Veličina fonta nije zamena za naslove!
- Podešavanje veličine u pikselima
- Ako se ništa ne navede podrazumevana veličina je 16px
- Problem sa Internet Explorer-om – ne može resize
- Podešavanje veličine u em-ovima
- 1em = 16px
- Problem sa Internet Explorer-om – može resize, ali povećanje/smanjenje nije korektno
- Rešenje – body {font-size:100%;}
- Ostale mogućnosti
- xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %
- font-weight - Podebljanje fonta
- normal, bold, bolder, lighter, 100-900
- font-variant - Varijanta fonta
- normal, small-caps
- CSS linkovi
- Stanja linka
- a:link – običan, neposećen link
- a:visited – posećen link
- a:hover – link kad je miš iznad njega
- a:active – link kad se klikne na njega
- Pravila koja se moraju poštovati:
- a:hover mora doći posle a:link i a:visited
- a:active mora doći posle a:hover
- Stanja linka
CSS liste
- Pomoću CSS svojstva za liste moguće je
- postaviti različite oznake za numerisane liste
- postaviti različite oznake za nenumerisane liste
- postaviti sliku kao oznaku liste
- Postavljanje različite oznake za listu
- Koristi se list-style-type svojstvo
- ul.a {list-style-type: circle;}
- ul.b {list-style-type: square;}
- ol.c {list-style-type: upper-roman;}
- ol.d {list-style-type: lower-alpha;}
- Vrednosti svojstava za nenumerisane liste
- none, disc (podrazumevano), circle, square
- Vrednosti svojstava za numerisane liste
- decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman
- IE pravi problem...
- Koristi se list-style-type svojstvo
- Slika kao oznaka za listu
- Koristi se list-style-image svojstvo
- ul {list-style-image: url('slika.gif');}
- Problem sa položajem u različitim browser-ima, rešenje je
- ul {
list-style-type: none;
padding: 0px;
margin: 0px;}
li {
background-image: url(slika.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;}
- ul {
- Koristi se list-style-image svojstvo
CSS tabele
- Okviri
- Koristi se svojstvo border
- table, th, td {border: 1px solid black;}
- Dupli okviri!!!
- Stapanje okvira
- Koristi se svojstvo border-collapse
- table {border-collapse:collapse;}
- Koristi se svojstvo border
- Širina i visina tabele
- Koriste se svojstva width i height
- Veličine u % ili px
- Poravnanje teksta u tabeli
- za horizontalno poravnanje koristi se text-align svojstvo
- left, right, center
- za vertikalno poravnanje koristi se vertical-align svojstvo
- top, bottom, middle
- za horizontalno poravnanje koristi se text-align svojstvo
- Razmak između teksta i okvira
- Koristi se svojstvo padding
- Boje
- Podešava se boja okvira, pozadine i teksta
- table, td, th {
border:1px solid green;}
th {
background-color:green;
color:white;}
- table, td, th {
- Podešava se boja okvira, pozadine i teksta
- Položaj naslova
- Koristi se svojstvo caption-side
- caption {caption-side:bottom;}
- Koristi se svojstvo caption-side
CSS model kutije
- CSS box model je kutija oko HTML elementa i sastoji se od margina, okvira, razmaka i samog sadržaja
- Model kutije omogućava da se postavi okvir oko elemenata i da se odmaknu elementi od drugih elemenata (kontrola razmaka)
- Margina (Margin) je prazan prostor oko okvira, nema boju i potpuno je providan
- Okvir (Border) je okvir oko sadržaja i razmaka, ima boju
- Razmak (Padding) je prazan prostor oko sadržaja, ima boju
- Sadržaj (Content) je prostor gde se nalaze tekst i slike
- Širina i visina elementa
- Kad se u CSS-u navode širina i visina to se odnosi na sam sadržaj
- Ukupna širina elementa = leva margina + levi okvir + levi razmak + širina sadržaja + desni razmak + desni okvir + desna margina
- Ukupna visina elementa = gornja margina + gornji okvir + gornji razmak + visina sadržaja + donji razmak + donji okvir + donja margina
- Problem sa IE
- Na sam početak HTML dokumenta, pre <HTML> taga, dodati <!DOCTYPE html>
CSS okviri
- border-style svojstvo podešava vrstu okvira
- none, dotted, dashed, solid, double, groove, ridge, inset, outset...
- Obavezno je da se navede, bez njega ostala svojstva nemaju dejstvo!
- border-width svojstvo podešava debljinu okvira
- Koriste se pixel-i ili vrednosti thin, medium i thick
- border-color svojstvo podešava boju okvira
- Navodi se boja ili vrednost transparent
- Može se podesiti svaka strana posebno
- border- top, right, bottom, left
- Skraćeni oblik – svojstvo border
- border:5px solid red;
- Redosled je border-width, border-style, border-color
CSS Outline
- Okvir oko okvira
- Svojstva ista kao i za podešavanje okvira
CSS margine
- Podešava se samo veličina margina - px, %, auto
- Može se podesiti svaka strana posebno
- margin- top, right, bottom, left
CSS Padding
- Podešava se samo veličina razmaka, boja se podešava bojom pozadine elementa
- Može se podesiti svaka strana posebno
- padding- top, right, bottom, left
CSS dimenzije
- height - Podešava visinu elementa - px, %, auto
- max-height - Podešava maksimalnu visinu elementa - px, %, none
- max-width - Podešava maksimalnu širinu elementa - px, %, none
- min-height - Podešava minimalnu visinu elementa - px, %
- min-width - Podešava minimalnu širinu elementa - px, %
- width - Podešava širinu elementa - px, %, auto
CSS Display i Visibility
- display - Da li se element prikazuje i kako
- inline, block, none, flex, list-item, table...
- visibility - Da li je element vidljiv ili ne, svakako zauzima mesto
- Block elementi zauzimaju celu raspoloživu širinu i imaju prelom reda ispred i iza sebe (h1, p, li, div...)
- Inline elementi zauzimaju najmanju potrebnu širinu i nemaju prelom reda ispred i iza (span, a...)
CSS pozicioniranje
- Statično pozicioniranje - Static
- position: static;
- Ovo je podrazumevani način
- Elementi se raspoređuju prema normalnom redosledu na stranici
- Ne može se podešavati pomoću svojstava top, bottom, left, i right
- Fiksno pozicioniranje - Fixed
- position: fixed;
- Elemenat se postavlja u odnosu na prozor pregledača
- Ne pomera seprilikom skrolovanja
- Ne utiču na normalan redosled na stranici - dokument i ostali elementi se ponašaju kao da fiksni elementi ne postoje
- Mogu da preklapaju ostale elemente
- Relativno pozicioniranje - Relative
- position: relative;
- Elemenat se postavlja u odnosu na svoju normalnu poziciju
- Sadržaj ovih elemenata se pomera i može da preklapa druge elemente
- I dalje se rezerviše prostor za ovakve elemente u normalnom redosledu na stranici
- Ovi elementi se često koriste kao kontejneri za apsolutno pozicionirane elemente
- Apsolutno pozicioniranje - Absolute
- position: absolute;
- Elementi se postavljaju relativno u odnosu na prvi nadređeni element koji nije statično pozicioniran
- Ne utiču na normalan redosled na stranici - dokument i ostali elementi se ponašaju kao da apsolutno pozicionirani elementi ne postoje
- Mogu da preklapaju ostale elemente
- Preklapanje elemenata
- Do preklapanja dolazi kada se elementi ne raspoređuju prema normalnom redosledu na stranici
- z-index - Određuje koji element se postavlja ispred, a koji iza
- overflow, overflow-x, overflow-y - Podešavanje prelivanja
- visible - Preliva se van kontejnera
- hidden - Odseca se
- scroll - Odseca se i pojavljuju se skrol barovi
- auto - Ako treba da se preliva, odseca se i pojavljuju se skrol barovi
CSS Float
- float:left/right;
- Element se pomera skroz levo ili desno omogućavajući ostalom sadržaju, tj. elementima iza njega, da idu pored njega
- Pomeranje je samo horizontalno - levo ili desno
- Svojstvo clear podešava sa koje strane float elementa ne mogu da se postave drugi elementi koji nemaju podešeno svojstvo float
- clear:left/right/both
CSS horizontalno poravnanje
- Poravnavaju se blok elementi, tako im se određuje raspored na stranici
- Centriranje korišćenjem svojstva margin - leva i desna margina se podese na auto
- Apsolutno pozicionirani elementi se poravnavaju pomoću svojstava left i right (obavezno koristitti !DOCTYPE)
- Može se koristiti i svojstvo float
- Uvek je dobra praksa globalno anuliranje margina i razmaka na početku
CSS layout
- Za određivanje rasporeda elemenata na stranici koriste se dva elementa:
- <div> je block element koji se koristi kao kontejner za druge HTML elemente i za deo sadržaja stranice
- <span> je inline element koji se koristi kao kontejner za tekst i za deo sadržaja stranice
CSS Combinators (regulatori odnosa između elemenata)
- Selektor može da sadrži nešto više od jednog prostog selektora
- Između prostih selektora može se dodati kombinator
- Selektor potomaka
- div p - Svi p unutar div
- Selektor deteta
- div > p - Svi p koji su deca za div
- Selektor susednih siblinga
- div + p - Svi p koji su sibling neposredno iza div
- Opšti selektor siblinga
- div ~ p - Svi p koji su siblinzi i nalaze se iza div
- Selektor potomaka
CSS pseudo klase i pseudo elementi
- :link - a:link - Selektuje sve neposećene linkove
- :visited - a:visited - Selektuje sve posećene linkove
- :active - a:active - Selektuje aktivni link
- :hover - a:hover - Selektuje link na prelazak mišem
- :focus - input:focus - Selektuje input element koji ima fokus
- ::first-letter - p::first-letter - Selektuje prvo slovo svakog <p> elementa
- ::first-line - p::first-line - Selektuje prvi red svakog <p> elementa
- :first-child - p:first-child - Selektuje svaki <p> elemenat koji je prvo dete svog roditelja
- ::before - p::before - Umeće sadržaj ispred svakog <p> elementa
- ::after - p::after - Umeće sadržaj iza svakog <p> elementa
- :lang(language) - p:lang(it) - Selektuje svaki <p> element koji ima atribut lang koji počinje sa "it"
CSS meni
- Vertikalna navigacija
- <head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body> - list-style-type: none - Uklanja tačkice oznake liste
- Postavljanje margina i razmaka na 0 radi poništavanja podrazumevanih podešavanja pregledača
- display: block - Prikazivanje linkova kao blok elemenata pravi da se može kliknutu na celu površinu, ne samo na tekst i omogućava da se podesi širina
- width: 60px - Podrazumevano blok elementi zauzimaju celu raspoloživu širinu, ovde je to potrebno smanjiti
- <head>
- Horizontalna navigacija
- <head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body> - display: inline; - Podrazumevano <li> elementi su blok elementi, a ovde je potrebno da budu u jednom redu
- float: left - Koristi se da bi se elementi poređali jedan do drugog
- display: block - Prikazivanje linkova kao blok elemenata pravi da se može kliknutu na celu površinu, ne samo na tekst i omogućava da se podesi širina
- width: 60px - Podrazumevano blok elementi zauzimaju celu raspoloživu širinu, ovde je to potrebno smanjiti da bi uopšte mogli da se poređaju jedan do drugog
- <head>
CSS transparentne slike
- Za postizanje efekta prozorisnosti koristi se svojstvo opacity (za IE filter)
- img {
opacity: 0.4;
filter: alpha(opacity=40);
}
CSS sprajtovi
- Sprajt je kolekcija slika spojena u jednu sliku
- Korišćenje sprajtova ubrzava učitavanje stranice
- Sprajt se postavi kao pozadinska slika za element i podesi se potreban pomeraj, a podešavanjem dimenzija elementa kontroliše se koliki deo sprajta treba prikazati
CSS tipovi medija
- @media pravilo omogućava da se navedu različiti stilovi za različite tipove medija u jednom CSS dokumentu
- @media tipmedija {
... CSS stilovi ...
} - Tipovi medija:
- all - Koristi se za sve tipove
- aural - Koristi se za generatore govora i zvuka, tj. čitače
- braille - Koristi se za uređaje sa Brajevim pismom
- embossed - Koristi se za štampače Brajevog pisma
- handheld - Koristi se za male ručne uređaje
- print - Koristi se za štampače
- projection - Koristi se za prezentacije, tj. slajdove
- screen - Koristi se za kompjuterske ekrane
- tty - Koristi se za specifične uređaje kao što su terminali
- tv - Koristi se za uređaje tipa TV-a
CSS selektori atributa
- [attribute] - Selektovanje elemenata koji imaju određene atribute
- [attribute=value] - Selektovanje elemenata koji imaju atribute sa određenom vrednošću
- [attribute~=value] - Selektovanje elemenata koji imaju atribute sa čija vrednost sadrži određenu reč
- [attribute|=value] - Selektovanje elemenata koji imaju atribute čiji naziv počinje određenom rečju
- [attribute^=value] - Selektovanje elemenata koji imaju atribute sa čija vrednost počinje određenom rečju
- [attribute$=value] - Selektovanje elemenata koji imaju atribute čiji se naziv završava određenom rečju
- [attribute*=value] - Selektovanje elemenata koji imaju atribute čija vrednost sadrži određenu reč
CSS3
- CSS3 okviri
- border-radius - Zaobljenje uglova okvira
- border-radius: 25px;
- box-shadow - Dodavanje senke elementu
- box-shadow: 10px 10px 5px #888888;
- border-image - Slika kao okvir
- -webkit-border-image: url(border.png) 30 30 round;
-o-border-image: url(border.png) 30 30 round;
border-image: url(border.png) 30 30 round; - Ili stretch umesto round
- -webkit-border-image: url(border.png) 30 30 round;
- border-radius - Zaobljenje uglova okvira
- CSS3 pozadine
- background-size - Veličina slike za pozadinu
- background-size: 80px 60px;
- background-size: 100% 100%;
- background-origin - Odakle kreća slika za pozadinu
- background-origin: content-box;
- content-box, padding-box ili border-box
- background-clip - Šta pokriva pozadina
- background-clip: content-box;
- content-box, padding-box ili border-box
- Moguće je istovremeno postaviti više slika kao pozadinu
- background: url(prva.gif), url(druga.gif);
- background-size - Veličina slike za pozadinu
- CSS3 prelivi
- Omogućavaju da se prikažu glatki prelazi između dve ili više boja
- Linearni gradijent
- background: linear-gradient(direction, color-stop1, color-stop2, ...);
- Odozgo nadole
- background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
- background: -webkit-linear-gradient(red, blue);
- Sleva nadesno
- background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
- background: -webkit-linear-gradient(left, red , blue);
- Gore-levo ka dole-desno
- background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
- background: -webkit-linear-gradient(left top, red , blue);
- Pod određenim uglom
- Za direction se koristi 0deg, 90deg, 180deg i 270deg
- Više boja
- Samo se nabroji više od dve boje razdvojene zarezima
- Sa providnošću
- Boja se navede korišćenjem finkcije rgba()
- Linearni gradijent koji se ponavlja - repeating-linear-gradient()
- background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
- background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
- Radijalni gradijent
- background: radial-gradient(center, shape size, start-color, ..., last-color);
- Ravnomerno raspoređene boje
- background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
- background: -webkit-radial-gradient(red, green, blue);
- Različito raspoređene boje
- background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
- background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
- Korišćenjem parametra shape - circle ili ellipse
- background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
- background: -webkit-radial-gradient(circle, red, yellow, green);
- Korišćenjem parametra size - closest-side, farthest-side, closest-corner ili farthest-corner
- background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
- background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
- Radijalni gradijent koji se ponavlja - repeating-radial-gradient()
- background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
- background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
- CSS3 tekst efekti
- text-shadow - Dodaje senku tekstu
- text-shadow: 5px 5px 5px #FF0000;
- word-wrap - Da li se tekst koji ne može da stane u zadatu oblast prelama i kako (posle reči ili u sred reči)
- word-wrap: normal;
- word-wrap: break-word;
- text-shadow - Dodaje senku tekstu
- CSS3 fontovi
- Postavi se datoteka sa fontom na server i zatim se po potrebi preuzima
- Najčešće se koriste Web Open Font Format (WOFF), TrueType Fonts (TTF) i OpenType Fonts (OTF)
- @font-face pravilo povezuje ime koje će se koristiti za font i datoteku na serveru
- Pravi se posebno @font-face pravilo za bold varijantu fonta jer ima posebnu datoteku
- @font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
- @font-face {
- CSS3 2D transformacije
- translate() - Translacija u odnosu na početnu poziciju
- -ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
transform: translate(50px,100px); - translateX(), translateY()
- -ms-transform: translate(50px,100px);
- rotate() - Rotacija, pozitivne vrednosti su u smeru sata, a negativne obratno
- -ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
- -ms-transform: rotate(30deg);
- scale() - Povećanje ili smanjenje, parametri su koliko puta po x i y osi
- -ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
transform: scale(2,4); - scaleX(), scaleY()
- -ms-transform: scale(2,4);
- skew() - Iskošenje po x i y osi
- -ms-transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg);
transform: skew(30deg,20deg); - skewX(), skewY()
- -ms-transform: skew(30deg,20deg);
- matrix() - Kombinacija svih 2D transformacija, navodi se šest parametara
- scale-x
- skew-x
- skew-y
- scale-y
- translate-x
- translate-y
- translate() - Translacija u odnosu na početnu poziciju
- CSS3 3D transformacije
- rotateX() - Rotacija oko x ose za navedeni ugao
- -webkit-transform: rotateX(120deg);
transform: rotateX(120deg);
- -webkit-transform: rotateX(120deg);
- matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - Definiše 3D transformaciju pomoću 16 parametara
- translate3d(x,y,z) - Definiše 3D translaciju
- translateX(x) - Definiše 3D translaciju po x osi
- translateY(y) - Definiše 3D translaciju po y osi
- translateZ(z) - Definiše 3D translaciju po z osi
- scale3d(x,y,z) - Definiše 3D skaliranje
- scaleX(x) - Definiše 3D skaliranje po x osi
- scaleY(y) - Definiše 3D skaliranje po y osi
- scaleZ(z) - Definiše 3D skaliranje po z osi
- rotate3d(x,y,z,angle) - Definiše 3D rotaciju
- rotateX(angle) - Definiše 3D rotaciju oko x ose
- rotateY(angle) - Definiše 3D rotaciju oko y ose
- rotateZ(angle) - Definiše 3D rotaciju oko x ose
- perspective(n) - Definiše perspektivu za element transformisan u 3D
- rotateX() - Rotacija oko x ose za navedeni ugao
- CSS3 prelazi
- Omogućavaju da element postepeno promeni stil u neki drugi
- Navodi se svojstvo na koje se primenjuje efekat i trajanje prelaza, a mogu se dodati i timing funkcija (ease, linear, ease-in, ease-out, ease-in-out...) i kašnjenje
- -webkit-transition: width 2s;
transition: width 2s; - -webkit-transition: width 1s linear 2s;
transition: width 1s linear 2s;
- -webkit-transition: width 2s;
- Može i više sojstava razdvojenih zarezima
- -webkit-transition: width 2s, height 2s,-webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
- -webkit-transition: width 2s, height 2s,-webkit-transform 2s;
- CSS3 animacije
- @keyframes pravilo opisuje animaciju
- Kada postoji pravilo ono se povezuje sa elementom na koji će se primeniti navođenjem dva svojstva - naziva animacije iz @keyframes i trajanja animacije
- div {
-webkit-animation: myfirst 5s;
animation: myfirst 5s;
}
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
} - @-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
- div {
- CSS3 višestruke kolone
- column-count - Broj stubaca teksta
- -webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
- -webkit-column-count: 3;
- column-gap - Razmak između stubaca
- -webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
- -webkit-column-gap: 40px;
- column-rule - Podešava debljinu, vrstu i boju razdelne linije između stubaca
- -webkit-column-rule: 3px outset #ff00ff;
-moz-column-rule: 3px outset #ff00ff;
column-rule: 3px outset #ff00ff;
- -webkit-column-rule: 3px outset #ff00ff;
- column-count - Broj stubaca teksta
- CSS3 korisnički interfejs
- resize - Da li korisnik može da menja veličinu elementa - none, both, horizontal, vertical
- resize: both;
- box-sizing - Definiše kako se određeni elementi uklapaju u neku oblast
- -moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
float: left;
- -moz-box-sizing: border-box;
- outline-offset - Koliko je outline udaljen od okvira
- border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
- border: 2px solid black;
- resize - Da li korisnik može da menja veličinu elementa - none, both, horizontal, vertical