CSS3 - držte krok s dobou (nové vlastnosti)
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

CSS3 - držte krok s dobou (nové vlastnosti)CSS3 - držte krok s dobou (nové vlastnosti)

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

CSS3 - držte krok s dobou (nové vlastnosti)

Google       Google       2. 9. 2010       59 842×

Určitě jste již slyšeli o připravovaných a žhavých technologiích CSS3 a HTML5. V tomto článku se pokusím představit hlavní a nové vlastnosti, které vám aktuálně CSS3 nabízí.

Reklama
Reklama

Krátký úvod do přítomnosti

Dnes je stále doporučován standard konsorcia W3C pro druhou verzi. Ovšem již od roku 2005 o sobě dává nástupce druhé verze stále impulzivněji vědět. Ano, mluvíme tu o CSS3. I když stále není konsorciem W3C plně dokončen vývoj této technologie, který se mimochodem táhne už pár let, a během pár dní dokončen taky nebude (předpokládaný je rok 2015), tak se aktuálně nové verze webových prohlížečů přetahují v tom, co všechno už podporují, a to jak z CSS3, tak HTML5. Rozhodně to nechci odsuzovat, je dobré, když tu panuje taková rivalita, alespoň dobré pro nás uživatele a také webdesignery. Proto mi přijde hloupé dnes tvrdit, že by se neměly tyto nové technologie používat, protože by neměly fungovat a nevím co ještě. Není důvod se CSS3 bát!

Kromě tohoto článku se můžete o CSS3 dozvědět více na http://www.css3.info. Všechny zmíněné vlastnosti si můžete také vyzkoušet na http://css3generator.com, odkud jsem čerpal grafiku. Jako další zdroj informací lze použít návrh dokumentace W3C na http://www.w3.org/TR/css3-roadmap.

Kulaté rohy (border-radius)

Dodnes byste asi řešili kulaté rohy pomocí obrázku, to už ale není třeba, vlastnost border-radius umožní nastavit zaoblení vašeho objektu. Vlastnost má více možností zápisu: pokud chcete mít všechny rohy stejně kulaté, stačí zadat pouze jednu hodnotu, v případě že chcete nastavit horizontální a vertikální rohy jiné, tak použijete dvě hodnoty, první je horizontální a druhá vertikální, a třetí možnost je nastavení každého rohu zvlášť (1 = horní, 2 = pravý, 3 = spodní a 4 = levý). (Hodnotami jsou délkové míry.)

Ukázka hotového kódu:

<div style="-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px;">Objekt</div>

Živá ukázka:

Objekt

Stín (box-shadow)

Další novinkou je stín, dnes velmi oblíbená grafická vlastnost. Má čtyři hodnoty: první má na starosti posunutí stínu horizontálně od objektu, druhá naopak vertikálně, třetí hodnota nastavuje okraj stínu, který přechází do ztracena, a čtvrtá hodnota je samotná barva stínu.

Ukázka hotového kódu:

<div style="-webkit-box-shadow:10px 5px 20px #000; -moz-box-shadow:10px 5px 20px #000; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px; box-shadow:10px 5px 20px #000;">Objekt</div>

Živá ukázka:

Objekt

Stín u textu (text-shadow)

Obdobné jako box-shadow s rozdílem, že text-shadow se využívá pro stín u textu (jak název vlastnosti napovídá ;)), proto není třeba dále rozebírat. Postačí ukázka níže.

Ukázka hotového kódu:

<span style="-webkit-text-shadow:15px 10px 15px #000; -moz-text-shadow:15px 10px 15px #000; text-shadow:15px 10px 15px #000; font-size:50px; color:#808080;">Text</span>

Živá ukázka:

Text

Pohyb, rotace (transform)

Transform je asi jedna z nejvyužívanějších a nejočekávanějších vlastností - nastavuje rotaci a pohyb objektu. Taková operace s objektem dřív nebyla možná bez využití JavaScriptu, to je ale minulost. Vlastnost má čtyři hodnoty, které pracují odlišně a mají své další podhodnoty. Aby každý pochopil, tak vlastnost transform říká, že se bude pohybovat objektem, její hodnota říká jakým způsobem, například otáčet, a podhodnota této hodnoty říká přesně, o kolik se objekt otočí.

Hodnoty vlastnosti Transform:

translate nastavuje 2D pohyb objektu po osách x a y, hodnoty: (x[em],y[em])

  • x = posunuje objekt doprava při kladné hodnotě a doleva při záporné hodnotě
  • y = posunuje objekt dolů při kladné hodnotě a nahoru při záporné hodnotě

rotate otáčí objekt, hodnoty: (x[deg])

  • x = rotuje objekt ve směru hodinových ručiček

scale pracuje s velikostí objektů, hodnoty: (x)

  • x = nastavuje zvětšení objektu, přičemž hodnota 1 je standardní velikost, hodnota 2 je dvojnásobná a hodnota 0.5 je poloviční velikost

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="-webkit-transform: translate(3em,1em); -moz-transform: translate(3em,1em); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 1</div> // posune objekt dolů o 3 em a doprava o 1 em
<div style="-webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 2</div> // otočí objekt o 100 stupňů ve směru hodinových ručiček
<div style="-webkit-transform: scale(2); -moz-transform: scale(2); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 3</div> // zvětší objekt na dvojnásobek

Živá ukázka:

translate
rotate
scale

Zdroj ukázky: http://www.csshrou.sk/css3-transforms/

Průhlednost (opacity)

Další novou vlastností je průhlednost. Vlastnost má pouze jednu hodnotu, číslo z intervalu <0, 1>, přičemž 0 je 100% průhlednost (neviditelnost) objektu, a tudíž 1 je 0% průhlednost. Tento efekt je vykreslován až na konečný stav objektu.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="opacity:0.2; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Průhledný objekt</div> // průhlednost objektu se nastaví na 80 %

Model Barev (RGBA)

Další novou vlastností je funkce pro nastavení barev a průhlednosti. Ke klasickému RGB přibývá u nového RGBA čtvrtá hodnota, a to průhlednost. Nová hodnota je totožná s hodnotou opacity, proto není třeba ji představovat, pouze se hodí malá ukázka.

Ukázka hotového kódu:

<div style="backfround-color:rgba(50, 100, 10, 0.7); width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Text</div> // příklad z obrázku, využití RGBA

Model Barev podruhé (HSL)

U barev ještě zůstanem, v CSS3 přibyla další možnost definování barev, a to HSL (Hue, Saturation, Lightness). Tato vlastnost má tři hodnoty a to jsou: barva, sytost a světlost. První je hue (barva), samotné nastavení základní barvy z intervalu <0, 360>, přičemž 0 a 360 je červená, 120 zelená, 240 modrá a zbylá čísla jsou odstíny těchto barev. Druhá hodnota je saturation, neboli sytost. Určuje se v procentech, přičemž 100% je maximální barevnost a 0% minimální barevnost. Třetí hodnota je lightness, neboli světlost. Určuje se také v procentech, přičemž 0% je tmavá (černá), 100% světlá (bílá) a 50% je průměr.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="background-color:hsl(0,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 1</div>
<div style="background-color:hsl(120,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 2</div>
<div style="background-color:hsl(240,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 3</div>

Živá ukázka:

Objekt 1
Objekt 2
Objekt 3

Model Barev potřetí (HSLA)

HSLA je stejné rozšíření HSL, jako RGBA rozšiřuje RGB, tedy obohacení o průhlednost. Vše je zde stejné, proto opět stačí jen malá ukázka.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="background-color: hsla(0,100%,50%,0.2); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 1</div> // průhledný z 80 %
<div style="background-color: hsla(0,100%,50%,0.4); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 2</div> // průhledný z 60 %
<div style="background-color: hsla(0,100%,50%,0.6); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 3</div> // průhledný ze 40 %
<div style="background-color: hsla(0,100%,50%,0.8); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 4</div> // průhledný z 20 %
<div style="background-color: hsla(0,100%,50%,1); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 5</div> // neprůhledný

Živá ukázka:

Objekt 1
Objekt 2
Objekt 3
Objekt 4
Objekt 5

Sloupce (Multiple Columns)

Novinkou je také funkce, která si klade za cíl usnadnit práci s textem. Jedná se o funkci, která pomocí vlastnosti column-count rozdělí text v objektu do určitého počtu sloupců, které se řadí vedle sebe, a také pomocí vlastnosti column-gap nastaví mezery jednotlivých sloupců a nebo pomocí vlastnosti column-rule nastaví čáry mezi sloupci. Já ovšem použiji první možnost - column-gap. Každá vlastnost má pouze jednu hodnotu, u column-count je to počet sloupců, do kterých se má text rozdělit, a u column-gap je to délková míra, která nastavuje mezery mezi sloupci. U column-rule tomu je trochu jinak, ale touto možností se zabývat nebudu. Následuje příklad.

Ukázka hotového kódu:

<div style="-moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:2; column-gap:10px;">Text bude rozdělene do dvou sloupců!</div>

Živé ukázky vám nemusí vůbec nebo plně fungovat ve starších prohlížečích nebo v prohlížečích, které danou vlastnost ještě nepodporují. U každé vlastnosti je uvedeno, jaké prohlížeče vlastnost podporují, předpokládám, že máte nejnovější verzi svého browseru.

Závěr

Toto je samozřejmě jen špetka toho, co vám CSS3 nabízí oproti svému předchůdci, chtěl jsem vám pouze ukázat nové vlastnosti. Toto není článek, který by vám vysvětloval teorii, tyto nové vlastnosti vám určitě usnadní práci a zpřehlední kód. Rád bych se příště zmínil o nové funkci Media Queries, také bych rád ukázal práci s formuláři a zkusil vytvořit ukázkový layout.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Jiří ŠťastnýJsem student střední školy v Liberci, občasný programátor, aktivní sportovec, fanatický fanoušek Google a mé pravé jméno je سعيد جورج.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý