LINUXSOFT.cz Přeskoč levou lištu

ARCHIV



   

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

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ů

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

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

> Poslední diskuze

31.7.2023 14:13 / Linda Graham
iPhone Services

30.11.2022 9:32 / Kyle McDermott
Hosting download unavailable

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

Více ...

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