Vidljivost HTML elemenata

Vidljivost elemenata

Postoje situacije kada želite da neki element strane sakrijete kompletno, tj. oslobodite prostor koji zauzima u prozoru pretraživača. Zašto bi to radili? Postoje brojne situacije a neke od njih su:

Želite da element bude sakriven dok se ne izvrši neka akcija (definisana Java Script-om) koja će dovesti do njegovog prikaza.

Ili, dobili ste zadatak da taj element uklonite sa web strane a ne znate koji kod je u pozadini taj element generisao. Bez ulaženja u programski kod (najčešće php ili asp) elegantno i brzo rešenje je da primenite pravilo :

img {display:none;}

koje će sve slike na strani sakriti i osloboditi njihovo mesto za druge elemente stranice.

Ostala svojstva CSS atributa display su block i inline koje smo ranije objasnili.

VISIBILITY

Drugo pravilo koje sakriva element ali za razliku od display pravila, ostavlja prazan rezervisan prostor i naziva se visibility. Pomenuti efekat postiže se deklaracijom visibility:hidden;

Ako pogledamo primer koda dat ispod, videćemo da se slika, zbog primenjenog svojstva visibility:hidden; neće prikazati u pretraživaču ali će prostor koji zauzima ostati zauzet.

<!DOCTYPE html>

<html>

<head>

<style>

img {visibility:hidden;}

</style>

</head>

<body>

<h1>Ovo je recenica koja se nalazi iznad slike</h1>

<img src=” kafe2.jpg”>

<p>Ovo je recenica koja se nalazi ispod slike</p>

</body>

</html>

CSS-struktura-21

OPACITY

U slučaju da želite da odredjeni element na strani učinite delimično ili potpuno prozirnim, koristićete pravilo opacity.

Opacity može da ima vrednost u rasponu od 0 do 1 gde vrednost 1 znači potpuno neprozirni element (i isto je kao da niste primenili pravilo opacity) dok vrednost nula govori da je element potpuno proziran, tj, da se ne vidi na stranici. Pandam parametru opacity:0; bio bi visibility:hidden;

Primer:

img{opacity:0.5;}

Znači da je element poluproziran (50%).

Ovo je izuzetno korisno u situaciji kada želite da efekat prelaska mišem dovede do potpune neprozirnosti elementa. CSS kod će u tom slučaju izgledati:

img{opacity:0.7;}

img:hover {opacity:1;}

pa će slika u normalnom prikazu biti vidljiva 70%, dok će u momentu kada je miš iznad nje, njena vidljivost biti potpuna (100%).

Primer:

<!DOCTYPE html>

<html>

<head>

<style>

img {opacity:0.5;}

img:hover{opacity:1;}

</style>

</head>

<body>

<img src=”kafe2.jpg”>

</body>

</html>

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn