S rastúcou rozmanitosťou veľkostí monitorov nie je praktické navrhovať jednotlivé bloky textu, ktoré zaberajú celú šírku bloku. Tradičné riešenie je rozdeliť text do stĺpcov ručne čo je veľmi časovo náročné, prípadne rozdeliť text dynamicky pomocou JavaScript, ktorý ale nefunguje univerzálne. CSS3 nám poskytuje spôsob, ako vytvoriť textový štýl, ktorý ho naformátuje do rôznych stĺpcov. Dáva nám tiež možnosť nastaviť medzery priestor medzi týmito stĺpcami. Týmto spôsobom budete mať plnú kontrolu nad naformátovaným textom do stĺpcov bez použitia frameworku alebo grid systému. Najlepšie zo všetkého je, že pokiaľ váš prehliadač nepodporuje CSS3 a napríklad používate starý Netscape Navigator, vaše stránky sa „nerozbijú“ jednoducho sa namiesto viacerých stĺpcov vykreslí jeden. Podpora CSS3 stĺpcov v prehliadačoch Všetky súčasné prehliadače vo svojich najnovších verziách podporujú multi-stĺpce v CSS3. Budete ale musieť pridať do svojho CSS prefixy prehliadačov: pre WebKit (-webkit-) a Mozilla (-moz-). Nie je potrebné zahrnúť prefixy -ms- alebo -o- pre IE a Opera, pretože buď podporujú funkciu v plnom rozsahu alebo vôbec nie (IE9 a staršie). Vlastnosti stĺpcov Táto funkcia CSS nám vlastne dáva množstvo vlastností, aby sme mali plnú kontrolu nad zobrazením textového obsahu v prehliadači: column-count: Tu môžete určiť počet stĺpcov, ktoré chcete použiť v elemente column-width: šírka jedného stĺpca column-gap: šírka medzery medzi stĺpmi column-rule-width: šírka rámiku vášho stĺpca (border) column-rule-style: podobne ako rámik (border), ak potrebujete špecifikovať štýl rámiku column-rule-color: nastavenie farby rámiku column-span: táto hodnota povie prehliadaču, koľko stĺpcov chcete vyčleniť pre element span je to dobré pre nadpisy a funguje to ako spojené stĺpce rowspan v tabuľkách. So všetkými týmito vlastnosťami si nemyslím, že by sme v súčasnej dobe skutočne potrebovali niečo iné, aby sme mali plnú kontrolu nad našimi stĺpcami. Samozrejme, že nie všetky tieto vlastnosti sú nevyhnutné pre funkčnosť multi-stĺpcov – potrebujeme vlastne len column-count, ktorý určí počet stĺpcov a prípadne ešte column-gap pre špecifikáciu medzery medzi stĺpcami, aby sme nastavili tie správne rozostupy a neboli stĺpce natlačené na sebe. Aby sme CSS stĺpce uviedli do praxe – stačia nám len dva riadky kódu: .cols3 { column-count: 3; column-gap: 20px; } Ak chcete použiť pravidlá stĺpcov, stačí pridať ďalšie vlastnosti: .cols3 { column-count: 3; column-gap: 20px; column-rule-width: 1px; column-rule-style: solid; column-rule-color: #000; } Rovnako klasické „border property“ môžeme špecifikovať vlastnosti rámika stĺpca v jednom riadku: .cols3 { column-count: 3; column-gap: 20px; column-rule: 1px solid #000; } Ak máte nadpis a chcete, aby sa nezobrazoval v jednom stĺpci ale „cez všetky“ stĺpce – stačí pridať riadok: .cols3 h1{ column-span: all; } CSS3 stĺpce si možete vyskúsať na kompletnom HTML kóde vo vašom prehliadači. <!DOCTYPE html> <html lang="sk"> <head> <meta charset="utf-8" /> <title>CSS3 multi-column</title> <style> .cols3 { -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #000; -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-rule: 1px solid #000; column-count: 3; column-gap: 20px; column-rule: 1px solid #000; } .cols3 h1 { -webkit-column-span: all; -moz-column-span: all; column-span: all; } </style> </head> <body> <div class='cols3'> <h1>Integer posuere erat a ante</h1> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.</p> </div> </body> </html>
V CSS3 sú dva spôsoby, ako vytvoriť animáciu: CSS Transitions, ktoré nám umožňujú vytvoriť niektoré jednoduché efekty (ako je napr. :hover) alebo CSS Animations, prostredníctvom ktorých môžeme vytvárať zložitejšie efekty. Zdá sa vám, že vytvorenie peknej
Nie je žiadnym tajomstvom, že mnohí ľudia vidia vo webe budúcnosť. Vytvorenie responzívneho designu znamená, že je schopný sa adaptovať na mnoho rôznych prehliadačov a veľkostí, ktoré sú k dispozícii. Ak sa chcete ubezpečiť, aby sa vaše webové stránky vy
Modal boxy sú často používaným nástrojom v internetovom arzenále webového vývojára. Používajú sa na veľa rôznych vecí: napr. na formuláre prihlásenia / registrácie, zobrazenie reklamy alebo obrázkov / videa, prípadne na oznámenia / upozornenia pre užívate
Možnosti, ako si vytvoriť vlastnu mobilnu appkuMobilná aplikácia sa dnes považujú za najmocnejší marketingový nástroj.
prejsť na článokThe post Ako vytvoriť jednoduchú webstránku appeared first on Pixweb.
prejsť na článok