CSS 3. Dr Nenad Kojić

Size: px

Start display at page:

Download "CSS 3. Dr Nenad Kojić"

Jodie McLaughlin
5 years ago
Views:

1 CSS 3 Dr Nenad Kojić

2 Šta je CSS 3? Skup dodatnih svojstava i selektora pomoću kojih se može vršiti prilagođavanje prikaza HTML elemenata. Proširuje skup postojećih svojstava Uvodi nove selektore tj. pseudo klase Svojstva ne funkcionišu u svim browser-ima podjednako dobro Proizvođači browser-a brže impelentiraju neka svojstva za razliku od W3C

3 Prefiksi Proizvođaći browser-a imaju svoje prefikse: Prefix/Browser Mozzila Chrome/Safari Microsoft Opera prefix -moz- -webkit- -ms- -o- -moz-border-radius:10px; -webkit--border-radius:10px; border-radius:10px;

4 Zakrivljene ivice, borderradius Ranije efekat zakrivljenih ivica je realizovan pomoću slike U CSS 3 postoji svojstvo koje zakrivljuje ivice border-radius:10px 20px 30px 40px; border-radius:10px 20px; border-radius:20px;

5 Slike za ivice, border-image Umesto klasičnih sterilnih bordura, možete ubaciti slike za borduru border-image:url(slike/ivica.png) round; border-image: source width outset rounded

6 Senka bloka, box-shadow Daje efekat senke nad blok elementom box-shadow:10px 10px 5px #888;

7 Veličina poz. slike, backgroundsize Veličina pozadinske slike background-size:80px 60px;

8 Pozicija pozadinske slike background-orgin:border-box,padding-box,content-box

9 Više pozadinskih slika background-image:url(slika1.gif),url(slika2.gif);

10 Prelamanje teksta Word-wrap:break-word,normal

11 Senka nad tekstom text-shadow:5px 5px 5px #FF0000;

12 Ubacivanje custom font-family: mojfont;src: url('fontovi/fonttest.ttf'), url('fontovi/fonttest.eot') format("opentype"); /* IE */} div{font-family:mojfont;}

13 Novi selektori U CSS 3 specifikaciji uvedeni su novi selektori

14 Selektori el1~el2 [attribute^=value] p~u l div[class^="test" ]

15 Selektori [attribute$=value], [attribute*=value] div[class$="tes t"] div[class*="test "]

16 Selektori :nth-child(n), nth-last-child(n) p:nthchild(2) p:nth-lastchild(2)

17 Selektori nth-of-type(n), nth-lastof-type(n) p:nth-oftype(2) p:nth-last oftype(2)

18 Prikaz teksta u kolonama column-count:3 column-gap:40px column-rule:4px outset #ff00ff;

19 CSS 3 media query CSS 3 je doneo neka nova svojstva i pogodonisti Media query tj. provera svojstava medija na kome se prikazuje Veoma značajno zbog mogućnosti primene css u zavisnosti od osobina uređaja

20 Provera medija do sada Do screen{ p.test {font-family:verdana,sans-serif;font-size:14px;} print{ p.test {font-family:times,serif;font-size:10px;} screen,print{ p.test {font-weight:bold;} } <link rel='stylesheet' media='all' href='normal.css' /> <link rel='stylesheet' media='print' href='print.css' />

21 Provera medija - sada #header-image {background-repeat: no-repeat; background-image:url('image.gif'); } // prikaz velike slike na velikom screen and (min-width: 1200px) { #header-image {background-image:url('large-image.gif'); } } // prilikom stampe sklanja se print { #header-image {display: none; } } Može i ovako <link rel="stylesheet" media="(max-width: 800px)" href= primer.css" />

22 Media query, sintaksa media [tip medija opcije] {CSS kod} ili <link rel="stylesheet" media=" [tip medija opcije] " href="" />

23 Logički operatori and (min-width: 700px) and (orientation: landscape) {... } not all and (monochrome) {... } only <link rel="stylesheet" media="only screen and (color)" href= primer.css" />

24 Media query, opcije Opcija Value Min/Max Opis color integer da Broj bita po komponeti boje device-aspectratio integer/integ da aspect ratio er device-height length da Visina uredja na kome se prikazuje device-width length da Širina uredja na kome se prikazuje height length da Visina površine za renderovanje monochrome integer da Broj bita po pikselu kod monohromatskog prikaza resolution Rezolucija da rezolucija ("dpi" or"dpc m") scan "progressive" ne proces formiranja slike or"interlaced" width length da Širina površine za renderovanje orientation portrait ili landscape Orijetacija uredjaja

25 Kombinovanje query-a, screen and (-webkit-device-pixel-ratio: 1.5), screen and (resolution: 144dpi){ #block1, #block2 { float: left; width: 100%; (min-width: 1000px) { #block1, #block2 { width: 50%; } } Većina modernih browser-a podržava media query-e. IE podržava od verzije 9.

26 Primer primene

27 Šta je flexbox? Predstavlja CSS modul namenjen efikasnom prikazu elementa na stranicama i uređajima Mogućnost da se element prilagodi trenutnom prostoru a da time ne naruši strukturu

28 FlexBox osnove Sadrži veliki broj svojstava Mogu se primeniti na elementima koji predstavljaju kontejnetere i na elementima koji su delovi tih kontejnera Prikaz je baziran na flex-flow-u za razliku od standardnih varijanti inline i block.

29 FlexBox osnove, nastavak Elementi se raspoređuju po main axis ili cross axis

30 FlexBox osnove, nastavak main axis flex kontejnera je primarna osa na osnovu koje se raspoređuju elementi; Pravac rasporeda elemenata zavisi od vrednosti svojstva flex-direction main-start Main-end početak i kraj flex kontejnera main size veličina flex item-a, može imati width ili height vrednost

31 FlexBox osnove, nastavak cross axis vertikalna/horizontalna osa u zavisnosti od vrednosti flex-direction cross-start cross-end početak i kraj flex kontejnera na cross axis-u cross size isto kao i main size

32 FlexBox, svojstva Postoji nekoliko svojstava koja se mogu primeniti nad elementima Neka se mogu primeniti nad elementima koji su kontejneri Neka se mogu primeniti nad elementima koji se nalaze unutar kontejnera

33 Flexbox container, svojstva display:flex inline-flex svi elemeti kontejnera su fleksibilni flex-direction: row row-reverse column column-reverse, prostiranje elemenata duž main axis-a flex-wrap: nowrap wrap wrap-reverse, definiše da li je kontejner više linijski duž cross axis-a

34 Flexbox container, svojstva flex-flow: < flex-direction > < flex-wrap >, predstavlja sintezu svojstava flex-direction i flexwrap justify-content: flex-start flex-end center space-between space-around, pozicioniranje flex elemenata unutar kontejnera horizontalno

35 Flexbox container, svojstva align-items: flex-start flex-end center baseline stretch, pozicioniranje flex elemenata unutar kontejnera vertikalno

36 Flexbox container, svojstva align-content: flex-start flex-end center space-between space-around stretch

37 Flexbox svojstva elemanata order: <integer>, definiše redosled prikaza elementa flex-grow: <number> (default 0), koliko prostora zauzima element npr. felx-grow:2 znači element uzima 2 pua više prostora od ostalih flex-shrink: <number> (default 1), koliko element treba da se smanji flex-basis: <length> auto (default auto), definiše podrazumevanu veličinu elementa pre redistribucije prostora

38 Flexbox svojstva elemanata flex: none [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ] align-self: auto flex-start flex-end center baseline stretch, dozvoljava redefinisanje poravnanja elementa u odnosu na align-items

Primer <ul class="flex-kontejner"> <li class="flex-element">prvi</li> <li class="flex-element">drugi</li> <li class="flex-element">treci</li> <li class="flex-element">cetvrti</li> <li

39 Primer <ul class="flex-kontejner"> <li class="flex-element">prvi</li> <li class="flex-element">drugi</li> <li class="flex-element">treci</li> <li class="flex-element">cetvrti</li> <li class="flex-element">peti</li> <li class="flex-element">sesti</li> </ul>.flex-kontejner { padding: 0;margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; }.flex-element { background: #FFF; padding: 5px;width: 200px; height: 150px;margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }

40 Podrška od strane browser-a Chrome Safari Firefox Opera IE Android ios 21+ (modern) 20- (old) 3.1+ (old) 2-21 (old) 22+ (new) (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

41 CSS 3 Dr Nenad Kojić

CSS CSS. selector { property: value; } 3/20/2018. CSS: Cascading Style Sheets

CSS CSS. selector { property: value; } 3/20/2018. CSS: Cascading Style Sheets CSS CSS CSS: Cascading Style Sheets - Opisuje izgled (appearance) i raspored (layout) stranice - Sastoji se od CSS pravila, koji defini[u skup stilova selector { property: value; 1 Font face: font-family