Setarea mai multor coloane (cu revista) Cu CSS3 / Web design

În general, oamenii vor pierde pista atunci când citesc conținut extrem de lung. De aceea, în presa scrisă, precum revistele și ziarele, conținutul este împărțit în mai multe coloane pentru citirea ușoară.

Crearea unei coloane pe Web este o poveste complet diferită. Este destul de dificil. De fapt, nu cu mult timp în urmă, poate fi necesar să împărțiți conținutul manual în unele divs și plutește la dreapta sau la stânga, apoi specificați lățimea, umplutura, marginea, margini și așa mai departe.

Dar lucrurile sunt acum mult simplificate cu Modul multi-coloană CSS3. După cum sugerează și numele, acest modul ne permite să împărțim conținutul în aspectul coloanei pe care o vedem în ziare sau reviste.

Suport pentru browser

Mai multe coloane sunt acceptate în prezent în toate browserele - Firefox 2+, Chrome 4+, Safari 3.1+ și Opera 11.1 - cu excepția, așa cum sa prevăzut, Internet Explorer, dar versiunea următoare, IE10, pare să fi început să furnizeze suport pentru acest modul.

Pentru restul browserelor, pentru ca acesta să funcționeze, Firefox are nevoie de încă -Moz- prefix, în timp ce Chrome și Safari au nevoie -WebKit- prefix. Opera nu necesită prefixe, așa că putem folosi proprietățile oficiale.

Creați mai multe coloane

Înainte de a crea coloanele, am pregătit câteva paragrafe pentru demonstrație, înfășurate în interiorul HTML5

etichetă, după cum urmează;

  Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum în august. Donec vel tempor temporal. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, stați amet aliquet justo bibendum non. Întregul bibendum convallis sapien, sit amet tincidunt orci placerat în. Integer vitae consequat augu. //si asa mai departe

... și specificați lățimea pentru 600px din foaia de stil, asta e.

Acum, să începem să creăm coloanele.

În exemplul de mai jos, vom împărți conținutul două coloane cu coloană-count proprietate. Această proprietate va spune browserului să redea conținutul în coloane după numărul specificat și să permită browserului să decidă lățimea adecvată pentru fiecare coloană.

 articolul -webkit-count-count: 2; -moz-coloană de numărare: 2; coloană-count: 2;

În afară de a fi definite de contor, coloanele pot fi create prin specificarea lățimii folosind lățimea coloanei proprietate și lăsând browserul să decidă câte coloane ar trebui generate în loc.

În acest exemplu, specificăm lățimea coloanei pentru 150px, care a dus la împărțirea conținutului în trei coloane.

 articol -moz-coloană-lățime: 150px; -webkit-coloană-lățime: 150px; coloană-lățime: 150px;

După cum se menționează în specificațiile. lățimea efectivă a coloanei poate fi mai lată sau mai mică decât lățimea coloanei specificată, în funcție de spațiul disponibil. De asemenea, dacă valoarea lățimii nu este specificată explicit, “auto” va fi considerată implicită, ceea ce ar putea însemna și ea “nici o coloană”.

Coloana Gap

Coloana Gap defini spațiile care separă fiecare coloană. Valoarea diferenței poate fi exprimată în em sau px, dar așa cum se specifică în spec valoarea nu poate fi negativă. În exemplul de mai jos specificăm diferența pentru 30px, astfel încât spațiile dintre coloane arată puțin mai largi.

 articolul -webkit-gap-column: 30px; -moz-coloană-decalaj: 30px; coloană-decalaj: 30 pixeli;

Regulă pentru coloană

Dacă doriți să adăugați margini între coloană, puteți utiliza funcția coloană regulă proprietate, care funcționează foarte asemănător cu frontieră proprietate. Deci, să spunem, dacă vrem să punem o graniță între coloană, putem scrie;

 articolul -moz-coloană: 1px punctat #ccc; -webkit-rule-column: 1px punctat #ccc; regulă de coloană: 1px punctat #ccc;

Coloana Span

Această proprietate funcționează destul de similar cu colspan în masa etichetă. Implementarea comună a acestei proprietăți este de a include titlul conținutului în toate coloanele. Iată un exemplu.

 articolul h1 -webkit-column-span: toate; coloană-span: toate;

În exemplul de mai sus am definit h1 pentru a acoperi toate coloanele și dacă se specifică intervalul coloanei, 1 va fi considerată implicită. Din păcate, această proprietate, la momentul acestei scrieri, funcționează numai în Opera și Chrome.

Cuvintele finale

Asta e tot pentru moment, am parcurs toate lucrurile esențiale pentru a crea mai multe coloane cu CSS3 și, așa cum am menționat deja, acest modul funcționează foarte bine în browserele moderne, dar nu funcționează încă în Internet Explorer.

În cele din urmă, sperăm că acum aveți o înțelegere destul de bună cu privire la modul de creare a coloanelor cu CSS3 și dacă aveți timp pentru experimente, nu ezitați să vă partajați metodele și rezultatele în caseta de comentarii de mai jos. Vă mulțumim că ați citit acest post și că vă distrați.

Demo
Descărcați sursa