e-gradiva     HTML CSS JavaScript Načrtovanje  
  logotip  
SERŠ Maribor Iskanje Primeri

clip

Lasnost clip lahko uporabimo, kadar je element prevelik in se ne prilega v notranjost bloka.

Vsebnostni blok je enostavno element, kateri vsebuje sorodne podelemente. Problem nastane, kadar je podelement prevelik, da bi se prilegal dimenzijam vsebnostnega bloka. Privzeto, kadar je element prevelik, da bi se prilegal dodeljenemu prostoru, bo delež odsekan tako, da se bo elemet prilegal bloku. Deli, kateri so odsekani, enostavno niso prikazani.

Lasnost clip določa, kateri del odsekanega dela bo prikazan. To se obravnava kot obrezovanje podelementov.

Sorodna lasnost overflow dovoljuje določanje, če naj bo prevelik element obsekan. Če je lasnost overflow nastavljena na vrednost visible, potem lasnost clip ne bo učinkovala. V tem primeru bo prevelik element prikazan čez meje vsebnostnega bloka.

vrednost opis NN IE CSS
auto Vrednost auto ukazuje naj brskalnik določi, kateri del bo viden. 6 4 1
rect (zgoraj, desno, spodaj, levo)

V CSS2 je edina dovoljena oblika pravokotnik rect, ki s štirimi številnimi vrednostmi (zgoraj, desno, spodaj, levo) določa izrez od zgornjega, desnega, spodnjega in levega roba.

Vrednosti zgoraj, desno, spodaj, in levo imajo lahko za svojo vrednost dolžino ali pa ključno besedo auto. Negativne vrednosti so dovoljene pri negativni vrednosti se element raztegne na nasprotno stran. Vrednost auto določa, da je rob elementa tudi rob izreza. Vrednosti so med seboj lahko ločene z vejico. Vrednosti za dolžino so katerakoli od sedmih enot.

Posamezme vrednosti pomenijo:

  • zgoraj: izrez med zgornjim robom pravokotnika in podano vrednostjo, ki se meri od zgornjega roba
  • desno: izrez med desnim robom pravokotnika in podano vrednostjo, ki se meri od levega roba
  • spodaj: izrez med spodnjim robom pravokotnika in podano vrednostjo, ki se meri od zgornjega roba
  • levo: izrez med levim robom pravokotnika in podano vrednostjo, ki se meri od levega roba
 6 4 2

Primeri

img.clp
{
clip: rect(10px 60px 60px 10px);
height: 75px;
width: 75px;
position: absolute;
}

→ Primera obrezane slike

gor Gor     e-gradiva     CSS     primeri     nazaj top/bottom/left/right   overflow naprej

SERŠ Maribor : Strokovna gimnazija : 2004 : Neven Šrok