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 7392×

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ů

13.9.2017 8:00 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

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

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

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