CSS kontrola prikaza

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

display Način prikaza elementa
visibility Da li je elemenat vidljiv ili sakriven
opacity Efekat transparencije (poluprovidnost) elementa
cursor Izgled kursora miša iznad elementa
overflow Rešavanje teksta koji izlazi van okvira elementa
overflow-x Rešavanje teksta koji izlazi van okvira elementa po horizontali
overflow-y Rešavanje teksta koji izlazi van okvira elementa po vertikali
text-overflow Tekst koji se prikazuje umesto isečenog teksta koji je izašao van okvira
clip-path Zadavanje grafičkog oblika koji definiše vidljivu površinu elementa

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.

display: none;

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:

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.

visibility: hidden;

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:

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.

opacity: 0.4;

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:

cursor: pointer;

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

auto default none context-menu
help pointer progress wait
cell crosshair text vertical-text
alias copy move no-drop
not-allowed e-resize n-resize ne-resize
nw-resize s-resize se-resize sw-resize
w-resize ew-resize ns-resize nesw-resize
nwse-resize col-resize row-resize all-scroll
zoom-in zoom-out grab grabbing

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.

cursor: url("mis.png"), auto;

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.

overflow: auto; overflow-y: scroll;

Moguće vrednosti su:

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:

text-overflow: ellipsis; text-overflow: "Dalje";

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:

clip-path: url("grafika.svg");

Primer

Nekoliko jednostavnih primera...


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

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

Pogledajte primer, kako biste videli kako se elementi ponašaju sa različitim vrednostima atributa.

css-spec-prikaz-sr
  1. Mozilla Developer Network, CSS Reference
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.