CSS Kolone

Opcija razbijanja teksta nije najpopularnija opcija prenosa teksta još od rasporeda časopisa. Kao i u dizajnu štampe, i u veb dizajnu postoje stupci. Najbolji i najjasniji način za upotrebu je opcija kolone u CSS-u .

Ako vas zanima opcija podvlačenja teksta, koja je mnogo atraktivnija, pogledajte je ovde .

Dosadno je, sadržajno i dizajnerski, da se tekstualni sadržaj proširuje na celu veb stranicu, pa se to retko može videti. Za više informacija o pozicijama u CSS-u pogledajte ovaj tekst . Imajte na umu da je sadržaj bloga izostavljen iz ovog razloga zbog svoje prirode.

Dakle, tekstualni sadržaj na Internetu je organizovan u elementima manje širine i zbog toga nisu potrebne kolone. Nakon svih navedenih činjenica, prošle nedelje su mi trebale kolumne o dizajnu na kojem sam radio i bio je u potpunosti opravdan (ali poravnat levo).

Svojstva povezana sa svojstvom kolone su:

• column-count - određuje broj kolona na koje bi element trebao biti podeljen,
• column-width - određuje širinu kolona,
• column-gap - određuje razmak između kolona,
• column-rule - postavlja pravilo između kolona (to je stenografsko svojstvo za podešavanje širine pravila, boje pravila i stila pravila),
• column-span - određuje kroz koliko stupaca treba da se proteže element.
  Internet Ekplorer 9 (i starije verzije) i Firefok ne podržavaju raspon kolona
• column-fill - određuje način popunjavanja kolona (automatski ili ravnoteža).

*Samo svojstvo kolone prihvata brojanje kolona, širinu kolone ili obe osobine.
*

Da objasnim malo ova svojstva.

Svojstvo širina kolone navodi predloženu, optimalnu širinu kolona. Ako je definisano brojanje kolona, vrednost širine kolone će biti zamenjena.

Svojstvo popunjavanja kolona dostupno je samo u Firefox-u. Sadržaj sa saldom popunjavanja kolona automatski će uravnotežiti sadržaj u rasporedu više kolona sa ograničenom visinom. Drugi pregledači će uvek popunjavati stupce redom kada im se dodeli ograničenje visine. Ako želite isto ponašanje kroz sve upravo postavljene pregledače column-fill: auto.

Sadržaj koji se može uređivati na ovaj način mora biti u sledećem elementu <p>, <div>, <h>, <ul> i <ol> . Ako visina kolona nije definisana, sadržaj podeljen u kolone definiše visinu.

Primeri

Ovaj primer predstavlja razbijanje sadržaja u 2 kolone.

(Koristio sam gradijent za predstavljanje toka sadržaja)

<style>
    div{
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;          
        }
</style>

Ovaj primer predstavlja razbijanje sadržaja u kolonu definisane širine sa definisanim razmakom između njih.

<style>
    div{
        -webkit-column-width: 300px; /* Chrome, Safari, Opera */
        -moz-column-width: 300px; /* Firefox */
        column-width: 300px;      
        -webkit-column-gap: 150px; /* Chrome, Safari, Opera */
        -moz-column-gap: 150px; /* Firefox */
        column-gap: 150px;
        }
</style>

Ovaj primer predstavlja sadržaj raspoređen u 3 kolone sa definisanim pravilom između njih.

<style>
    div{
        -webkit-columns: 3; /* Chrome, Safari, Opera */
        -moz-columns: 3; /* Firefox */
        columns: 3;      
        -webkit-column-rule: 1px solid #dbdbdb; /* Chrome, Safari, Opera */
        -moz-column-rule: 1px solid #dbdbdb; /* Firefox */
        column-rule: 1px solid #dbdbdb;
        }
</style>

Poslednji primer predstavlja sadržaj u kolonama i elementima koji uključuju sve širine kolona.

<style>
    div{
        -webkit-columns: 3; /* Chrome, Safari, Opera */
        -moz-columns: 3; /* Firefox */
        columns: 3;      
        }
    h1{
        -webkit-column-span: all; /* Chrome, Safari, Opera */
        column-span: all;
        }
</style>

Verujem da je ovo sve o svojstvu kolone u CSS-u. Nadam se da pomaže!

Ako želite da pročitate više o CSS-u i veb dizajnu, proverite ovaj blog svakog sata ili se samo pretplatite!