CSS kontrola prikaza

Na ovom mestu ćemo obraditi nekoliko atributa koji se bave prikazom samog elementa, kao i prikazom njegovog sadržaja.

display

Kao što znamo postoje tri osnovna tipa elemenata, na osnovu njihovog ponašanja u "normalnom toku". Blok elementi se ređaju jedan ispod drugog. Ako im se ne zada širina, "šire" se koliko mogu. Inline elementi su deo teksta i mogu se prelamati kroz više linija. Inline blokovi su blokovi koji "putuju" sa tekstom, ali ne mogu se "prepoloviti" na kraju reda. Praktično se ponašaju kao jedno veliko slovo ili slika. Ovi elementi, kao i obični blokovi mogu imati zadate dimenzije. Inline blokovi se ređaju jedan za drugim, do kraja reda, a onda sledeći inline blok prelazi u sledeći red.

Atribut display ima veliki broj atributa, ali ovde ćemo objasniti najosnovnije. Dobar broj njih možete naći u tekstu koji se bavi formatiranjem tabela i delu koji se bavi flex-box modelom.

• block - element se ponaša kao blok
• inline - element predstavlja deo teksta i prlama se na kraju reda
• inline-block - element je blok koji se nalazi unutar teksta
• none - element "nestaje" sa stranice i uklanja se iz normalnog toka, praktično, kao da ne postoji

visibility

Pomoću ovog atributa određujemo da li će se elemenat videti ili ne. Ako zadamo da element bude nevidljiv, on će i dalje uticati na raspored ostalih elemenata - dakle kada je element sakriven, ostaje "rupa". Moguće je zadati jednu od sledećih vrednosti:

• visible - element je vidljiv (default)
• hidden - element je sakriven
• collapse - specijalna vrednost koja se odnosi na redove/kolone tabele
• inherit - vidljivost elementa se preuzima od nadređenog elementa

Kada primenimo vrednost collapse na redove (ili kolone) tabele, oni bivaju uklonjeni iz tabele (sakriveni), ali i dalje utiču na širinu/visinu vidljivih ćelija.

Inače, podređeni elementi nevidljivog elementa mogu biti vidljivi, ako im se zada vrednost visible.

opacity

Pošto smo videli da element može biti prikazan ili ne, kao i da može biti vidljiv ili nevidljiv, trebalo bi da znamo da isto tako može biti poluprovidan. Ovaj atribut kao vrednost ima numeričku vrednost:

• [numerik] - broj u rangu od 0..1

Vrednost 0 označava potpuno providan elemenat, dok vrednost 1 označava potpuno vidljiv elemenat. Bilo koja vrednost između 0 i 1 predstavlja različite nivoe transparencije. Ne zaboravite da se decimalne vrednosti uvek zadaju sa decimalnom tačkom.

cursor

Pomoću ovog atributa možemo kontrolisati kako će izgledati kursor miša (mouse pointer) kada dovedemo "strelicu" iznad elementa. Izgled kursora će naravno varirati od sistema pod kojim posmatramo web stranicu - kursor će biti drugačiji pod Linuxom u odnosu na Windows, a na uređajima sa ekranom osetljivim na dodir, neće se ni videti. Neke od češće korišćenih vrednosti su:

• auto - miš će izgledati onako kako bi ga web čitač prikazao (podrazumevana vrednost)
• default - obična strelica, koja ne pokazuje ni na šta specijalno
• pointer - miš izgleda kao pokazivač na linku
• text - izgled miša kao za selektovanje teksta

Pređite mišem preko navedenih vrednosti, da biste videli kako se kursor miša menja.

Kursor miša je moguće zadati i u obliku sličice, preko url CSS funkcije. Moguće je zadati više alternativa odvojenih zarezom (za svaki slučaj), a listu je moguće završiti jednom od predefinisanih vrednosti.

overflow-x
overflow-y
overflow

U CSS-u možemo zadati dimenzije blok elemenata (za block i inline-block). Šta se onda dešava sa tekstom koji prevazilazi dimenzije elementa? Upravo time se bave ovi atributi.

Po defaultu, teskt se vidi, ali takav tekst "visi" iz elementa i ne utiče na ostale elemente, što znači da će se ispisivati i preko drugih elemenata.

Atribut overflow-x se bavi "ispadanjem" teksta po horizontali, atribut overflow-y "ispadanjem" teksta po vertikali (ovo je i najčešći slučaj) i konačno, atribut overflow istovremeno rešava i horizontalu i vertikalu.

Moguće vrednosti su:

• visible - tekst će biti vidljiv i "ispadaće" sa elementa (default)
• hidden - tekst koji prevazilazi blok će biti sasečen
• scroll - biće prikazan scroll-bar (horizontalni, vertikalni ili oba - zavisno od atributa), da bi korisnik mogao iščitati sadržaj elementa
• auto - ako tekst prevazilazi dimenzije, prikazaće se scroll-bar, a u suprotnom neće

Vrednost scroll će uvek prikazati scroll-bar, s tim što će biti neaktivan ako tekst ne prevazilazi dimenzije elementa.

text-overflow

Ovaj atribut definiše šta će da se prikaže kao oznaka za isečen tekst, u slučaju da se dogodilo da se tekst ne vidi pošto izlazi van dimenzija elementa. Važno je napomenuti da se ova oznaka prikazuje samo kod teksta koji je "iskočio" po horizontali. Moguće vrednosti su:

• clip - tekst se samo iseca i ništa se ne prikazuje (default)
• ellipsis - na mestu gde se tekst iseca, pojavljuje se simbol "..." (tri tačke)
• 'neki tekst' - možemo i zadati tekst koji se prikazuje

Atribut text-overflow "pali" samo kod blok elemenata, i to onih kod kojih je višak teksta sakriven (overflow postavljen na hidden).

clip-path

Atribut clip-path nam služi da zadamo grafički oblik (kao SVG vektorski crtež), koji definiše vidljivu površinu elementa - masku. Ovaj atribut se koristi umesto zastarelog clip atributa. Moguće vrednosti su:

• none - default vrednost - znači da ne postoji maska za isecanje, već se vidi ceo element
• [url] - URL do SVG fajla u kome je definisana površina
• inherit - maska se preuzima od nadređenog elementa

  .tekst {
    display: inline-block;
    oveflow-y: hidden;
    text-overflow: ellipsis;
  }

  article {
    display: block;
    oveflow: scroll;
    width: 400px;
    height: 300px;
  }