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;}
  • 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

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...
  • 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;}

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;}
  • Š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
  • 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;}
  • Položaj naslova
    • Koristi se svojstvo caption-side
      • caption {caption-side:bottom;}

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

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
  • 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

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
  • 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);
  • 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);
      • 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);
      • 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);
      • 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%);
    • 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);
      • 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%);
      • 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);
      • 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);
      • 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%);
  • 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;
  • 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;
        }
  • 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()
    • rotate() - Rotacija, pozitivne vrednosti su u smeru sata, a negativne obratno
      • -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        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()
    • skew() - Iskošenje po x i y osi
      • -ms-transform: skew(30deg,20deg);
        -webkit-transform: skew(30deg,20deg);
        transform: skew(30deg,20deg);
      • skewX(), skewY()
    • matrix() - Kombinacija svih 2D transformacija, navodi se šest parametara
      • scale-x
      • skew-x
      • skew-y
      • scale-y
      • translate-x
      • translate-y
  • CSS3 3D transformacije
    • rotateX() - Rotacija oko x ose za navedeni ugao
      • -webkit-transform: rotateX(120deg);
        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
  • 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;
    • Može i više sojstava razdvojenih zarezima
      • -webkit-transition: width 2s, height 2s,-webkit-transform 2s;
        transition: width 2s, height 2s, 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;}
        }
  • CSS3 višestruke kolone
    • column-count - Broj stubaca teksta
      • -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    • column-gap - Razmak između stubaca
      • -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        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;
  • 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;
    • outline-offset - Koliko je outline udaljen od okvira
      • border: 2px solid black;
        outline: 2px solid red;
        outline-offset: 15px;

 

Vi ste ovde: Home Predavanja Četvrta godina Informatički smer - Web dizajn 02 - Osnove CSS-a