LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS3 - Seznámení

Pár slov o CSS3 a pár ukázek s vysvětlením...

10.12.2010 00:00 | Lukáš Kovařík | Články autora | přečteno 6834×

CSS3 - Seznámení

Co to vlastně CSS3 je?

CSS3 je vlastně doplněk pro CSS, neboli upgradovaná verze CSS. Oproti CSS má několik grafických vylepšení, ať už to jsou stíny či zaoblené hrany

Výhody a nevýhody

Výhod je hned několik ať už se jedná o grafické spestření či usnadnění práce programátorovy, ale k tomu se dostaneme postupně v následujících příkladech. O něco horší už to bude s nevýhodama. Většina prohlížečů CSS3 v pohodě bere jen IE opět nezklamal a pro jistotu novinky z CSS3 ignoruje. Některých věcí se nechá složitější cestou docílil i v IE, ovšem zdaleka jich neni tolik jako pro ostatní prohlížeče. Toto je asi tak jediná nevíhoda o proti standardu CSS, ale poměrně podstatná. Změny se snad dočkáme v roce 2015, kdy by mělo CSS3 mít plnou podporu všech prohlížečů.

Pár ukázek co CSS3 umí

Tak teorie bylo dost, teď si jdeme ukázat co umí CSS3 v praxi. Nejprve si ukážeme například stín za textem. Stínu za textem docílím epomocí toho jednoduchého zápisu:

text-shadow: 3px 2px 7px #000000; filter: dropshadow(color=#000000, offx=3, offy=2);

Co která hodnota znamená? První údaj, tedy 3px určuje horizontáloní posun stínu. Druhá hodnota (2px) určuje vertikální posun stínu, třetí hodnotou se natavuje velikost ("rozmazání") stínu. A nakonec můžeme zadat ještě barvu stínu (#000000)

Stejně tak jako si můžeme pohrát se s tínem za textem, tak můžeme i se sínem za boxem. Zápis je stejný jako u textu (horizontální zarovnání, vertikální zarovnání, stín, barva)

-webkit-box-shadow: 3px 4px 5px #000000; -moz-box-shadow: 3px 4px 5px #000000; box-shadow: 3px 4px 5px #000000;

Stín ovšem nemusí být jen za boxem, ale může být také jako tzv. vnitřní stín. Toho docílíme poze připsáním "inset" na první pozici.

-webkit-box-shadow: inset 3px 4px 5px #000000; -moz-box-shadow: inset 3px 4px 5px #000000; box-shadow: inset 3px 4px 5px #000000;

Box (rám, objekt) už máme vystínovaný a co ho třeba trochu zaoblit? Žádný problém, poslouží nám tento stručný zápis, kde nastavujeme akorád míru zaoblení, zase doporučuji vyzkoušet:

-moz-border-radius: 10px; border-radius: 10px;

Dále je třeba zajímavé ohraničení textu, ale klasický rám (border) už je nuda. Co třeba tečkovaný nebo čárkovaný rámeček? Jak je libo, opět nic složiteho:

outline: 3px dotted #d60bd6; outline-offset: 10px;

první hodnotou (3px) určujeme velikost rámečku (teček), jako druhý parametr máme právě styl rámečku (dotted - tečkovaný) a poslední barametr určuje barvu rámečku.

Na výber máme z těchto rámečků: inherit, dotted, dashed, solid, groove, ridge, inset, outset, double.

Dále za zmínku stojí nové selektory, z nichž nejužitečnější podle mě bude :nth-child(), který v závislosti na svém parametru, jenž se zadává do závorek, selektuje ntý element, který je "dítětem" svého rodičovského elementu. Pro pochopení bude nejlepší ukázka.

tr:nth-child(4) {background-color: blue} /* čtvrtý řádek bude mít modré pozadí */
tr:nth-child(2n) {background-color: blue} /* sudé řádky budou mít modré pozadí */
tr:nth-child(2n+1) {background-color: blue} /* liché řádky budou mít modré pozadí */

CSS3 a HTML5 - obrazně

V dnešní době a i do budoucna se plánuje využívání CSS3 s HTML5. Co to ovšem HTML5 je a jak se liší od klasického HTML? Hned se to obrazně dozvítě v následujícím odstavci.

Většinou v HTML5 proběhlo snad jen zjednodušení od klasického HTML4, například hned specifikací dokumentu, kde nám k zápisu poslouží pouze:

<!doctype html>

Dále zápis kodování se zjednodušil na pouhé:
<meta charset="UTF-8">

Dále jen tak okrajově upřesním strukturu zápisu. V HTML už se odstupuje od klasického
<div id="neco"></div>
na pouhé
<neco></neco>
. Je to hlavně pro větší přehlednost v kodu, jinak žádné razatnější změny. To by jen tak okrajově stačilo, pro tvorbu našeho jednoduchého webu v příštím článku.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

24.8.2016 6:44 /Ondřej Čečák
Poslední týden CFP LinuxDays 2016; pokud byste rádi přednášeli na LinuxDays 2016 8. a 9. října v Praze, můžete svůj příspěvek přihlásit, následovat bude veřejné hlasování.
Přidat komentář

9.8.2016 22:56 /Petr Ježek
Zařazení souborového systému reiser4 do jádra 4.7 znamená konečně konec patchování jádra jen kvůli možnosti použít reiser4.
Přidat komentář

12.7.2016 13:14 /František Kučera
Spolek OpenAlt zve na 130. distribuovaný sraz příznivců svobodného softwaru a otevřených technologií (hardware, 3D tisk, SDR, DIY, makers…), který se bude konat ve čtvrtek 21. července od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

11.7.2016 16:53 /Redakce Linuxsoft.cz
Konference LinuxDays hledá přednášející. Přihlášky poběží do konce prázdnin, v září bude hlasování a program. Více na https://www.linuxdays.cz/2016/cfp/.
Přidat komentář

8.5.2016 17:19 /Redakce Linuxsoft.cz
PR: Dne 26.5.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, cloudové služby, infrastruktura cloudu, efektivní využití cloudu, možné nástrahy cloudů a jak se jim vyhnout
Přidat komentář

21.4.2016 8:01 /František Kučera
Spolek OpenAlt zve na 127. distribuovaný sraz příznivců svobodného softwaru a otevřených technologií (hardware, 3D tisk, SDR, DIY, makers…), který se bude konat ve čtvrtek 28. dubna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

2.3.2016 22:41 /Ondřej Čečák
Letošní ročník konference InstallFest již tento víkend!
Přidat komentář

14.2.2016 16:39 /Redakce Linuxsoft.cz
O víkendu 5. a 6. března 2016 proběhne na pražském Strahově 8. ročník tradiční konference InstallFest. Celkem za dva dny uvidíte ​30 přednášek​ a ​6 workshopů.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

12.8.2016 11:51 / Josef Zapletal
Jak udělat HTML/Javascript swiping gallery do mobilu?

8.8.2016 14:58 / Adams
fairies for hire

28.7.2016 15:51 / pepan
Re: NetBeans vs Eclipse

10.6.2016 21:10 / pavel riha
FreeBSD 10.3 a virtualizace

8.6.2016 21:56 / Milan Gallas
Nevalidní prefix m

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2016) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze