K prvkům můžete přidat stín a změnit jej vzhled pomocí vlastnosti CSS box-shadow. Tento styl umožňuje realizovat zajímavé efekty, například objem a trojrozměrnost bloku. Tato vlastnost je podporována všemi moderními prohlížeči. Výjimkou jsou IE8 a Opera Mini.

vlastnost box-shadow: syntaxe

Tento styl je napsán následovně:

Box-shadow: inset 4px 4px 8px 5px #333333;

Zvažme v pořadí, za co je každý parametr zodpovědný (zleva doprava):

• Klíčové slovo inset: parametr, který nemusí být specifikován; kreslí stín uvnitřživel.
• X offset: Určuje míru, o kterou je stín horizontálně odsazen vzhledem k prvku. Kladná hodnota znamená posun doprava, záporná doleva. Hodnota 0 znamená, že stín není odsazen.
• Posun Y: Určuje velikost vertikálního posunutí stínu. Kladná hodnota znamená posun směrem dolů, záporná hodnota znamená posun nahoru. Hodnota 0 je stín bez posunu.
• Poloměr rozostření: Toto je stupeň rozostření stínů. Čím vyšší hodnota, tím více je stín rozmazaný. Pokud parametr není zadán, výchozí hodnota je 0. V tomto případě bude stín dokonale čistý.
• Rozšíření: volitelný parametr zodpovědný za roztažení stínu podél obou os; čím vyšší hodnota, tím větší roztažení. Rozšíření funguje pouze v případě, že je přítomen předchozí parametr. Výchozí hodnota je 0.
• Barva stínu: s tímto parametrem je vše jasné - nastavuje barvu stínu prvku. Výchozí barva je černá.

Poznámka. Prohlížeče Android a starší verze pro iPhone Safari ke správnému fungování vyžaduje předponu -webkit- Vlastnosti CSS box-shadow.

Tato vlastnost může mít několik skupin hodnot (vytvářet několik stínů současně). K tomu budete muset uvést tyto skupiny parametrů oddělené čárkami. Například:

Box-shadow: 15px 15px 20px #8b0163, vložka 15px 15px 20px #630046;

Box-shadow příklady

Abychom vám pomohli lépe pochopit sílu a krásu vlastnosti CSS box-shadow, ukážeme vám několik příkladů, které můžete bezpečně uvést do praxe. Tato vlastnost dokáže velmi proměnit obyčejný blok!

Světlý stín

Box-shadow: 0 2px 4px rgba(0, 0, 0, 0,25);

Papírový efekt

Box-shadow: 0 1px 4px rgba(0, 0, 0, 0,3), -23px 0 20px -23px rgba(0, 0, 0, 0,6), 23px 0 20px -23px rgba(0, 0, 0, .6), vložka 0 0 40px rgba(0, 0, 0, .1);

Více vrstev

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Trojitý rám

Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0,6), 0 0 0 21px rgba(118, 46, 177, 0,4);

Rohy

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Jak vidíte, vlastnost box-shadow ponechává velký prostor pro představivost. Bloky můžete přetvářet, jak chcete - hlavní věcí je mít smysl pro proporce! 😉

V další kapitole prozkoumáte vlastnosti šířky a výšky, které určují velikost prvků.

Zásadně důležité je pořadí nahrávání. První hodnota je vždy posunutí podél osy X, druhá - podél osy Y.

Pokud odsazení podél jedné z os není potřeba, nastavte jej na nulu:

Class(box-shadow: 0 8px;) – posouvá stín pouze podél osy Y

Výsledek

Class(box-shadow: 8px 8px;) – posun podél obou os

Výsledek

Záporná hodnota pro osy box-shadow

Stín se bude pohybovat opačným směrem:

Class(box-shadow: -8px 8px;) – posun stínu se zápornou hodnotou podél osy X

Výsledek

Poloměr rozostření stínu

Třetí parametr vlastnosti box-shadow. Pokud není zadáno, hodnota je 0 a velikost stínu se rovná velikosti prvku, na který je aplikován.

Class(box-shadow: 0 48px 0;) – stín duplikuje rozměry prvku, na který je aplikován

Výsledek

Když je hodnota větší než nula, okraje ztrácejí zřetelnost, stín se zvětšuje a opticky zesvětluje. Rozostření se aplikuje ze všech stran:

Class(box-shadow: 0 0 8px;) – žádný posun, pouze rozostření

Výsledek

Class(box-shadow: 0 8px 8px;) – Posun a rozostření osy Y

Výsledek

Záporná hodnota je považována za chybu a stín se vůbec nezobrazí.

Poloměr roztažení stínu

Čtvrtý parametr vlastnosti box-shadow. Změní velikost stínu vzhledem k prvku. Protahuje se ve všech směrech:

Class(box-shadow: 0 0 0 8px;) – žádné posunutí nebo rozmazání, pouze roztažení

Výsledek

V tomto případě je stín o 16 pixelů větší než prvek na šířku a výšku: 8 pixelů vlevo + 8 pixelů vpravo a 8 pixelů nahoře + 8 pixelů dole.

Záporná hodnota roztažení stínu v CSS

Stín se neroztahuje, ale zužuje se na všechny strany o zadanou hodnotu:

Class(box-shadow: 0 16px 0 -8px;) – sníží stín zápornou hodnotou

Výsledek

Barva stínu

Ve výchozím nastavení barva stínu duplikuje barvu písma: jako ve výše uvedených příkladech.

Barva stínu je určena v jakémkoli dostupném formátu CSS:

• #ff0009
• rgb(255; 0; 9)
• hsl(358, 100 %, 50 %);

Dejte prvku modrý stín:

Class(box-shadow: 0 8px #3a8fe7;)

Výsledek

Vnitřní stín

Parametr vložka zobrazí stín uvnitř bloku.

Na rozdíl od výše uvedených možností zde není striktní pořadí psaní. Obě možnosti poskytnou stejný výsledek:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;

Výsledek

Druhá možnost je snáze pochopitelná při čtení kódu.

Několik stínů

Zadává se více stínů oddělených čárkami. Pořadí zobrazení shora dolů:

Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Výsledek

Pokud vyměníte místa, modrý stín nebude vidět:

Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Výsledek

Vnitřní a vnější stín jsou nastaveny současně:

Class( box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )

Výsledek

Zaoblený stín

Pokud je prvku přiřazena vlastnost hraniční poloměr, stín bude mít zaoblené rohy.

Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Výsledek

Nastavením roztažení stínu zvýšíme jeho zaoblení. Například poloměr okraje je 8 pixelů a roztažení stínu je 4.

8+4=12px je poloměr zaoblení stínu.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Výsledek

Stejný princip platí pro zmenšování stínu, když je hodnota záporná.

8+(-4)=4px – dostaneme dvakrát menší zaoblení stínu.

Pokud je komprese stínu větší než border-radius, dostaneme stín s pravými úhly. Například komprese je 16px.

8+(-16)=(-8), ale zaoblení nemůže mít zápornou hodnotu a použije se nula.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Výsledek

Vlastnost CSS box-shadow Podporováno všemi oblíbenými prohlížeči kromě Opery Mini.

Běžné stíny lze snadno implementovat pomocí box-shadow nebo text-shadow. Ale co když potřebujete vytvořit vnitřní stíny? Tento článek popisuje, jak vytvořit tyto stíny pomocí několika řádků kódu.

Syntax

Nejprve se podívejme na dva hlavní způsoby implementace stínů v CSS.

box-shadow

Design box-shadow obsahuje několik různých významů:

Horizontální odsazení A vertikální odsazení- horizontální a vertikální posunutí, resp. Tyto hodnoty udávají, kterým směrem bude objekt vrhat svůj stín:

Poloměr rozostření A poloměr šíření trochu složitější. Jaký je v tom rozdíl? Podívejme se na příklad se dvěma prvky, kde hodnoty poloměr rozostření lišit:

Okraj stínu je jednoduše rozmazaný. S různými hodnotami poloměr šíření vidíme následující:

V tomto případě vidíme, že stín je rozptýlen na velké ploše. Pokud nezadáte hodnotu poloměr rozostření A poloměr šíření, pak se budou rovnat 0.

stín textu

Syntaxe je velmi podobná box-shadow:

Významy jsou podobné, ale ne rozprostřený stín. Příklad použití:

Vložka v box-shadow

Chcete-li „převrátit“ stín uvnitř objektu, musíte přidat vložka v CSS:

Jakmile pochopíte základní syntaxi box-shadow, je velmi snadné pochopit, jak implementovat vnitřní stíny. Hodnoty jsou stále stejné, můžete přidat barvu (RGB v hex):

Barva je ve formátu RGB, hodnota alfa je zodpovědná za průhlednost stínu:

Obrázky se stíny

Přidání vnitřního stínu do obrázku je o něco obtížnější než přidání běžného stínu div. Pro začátek zde je obvyklý kód obrázku:

Je logické předpokládat, že můžete přidat stín takto:

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Ale stín není vidět:

Existuje několik způsobů, jak tento problém vyřešit, z nichž každý má své klady a zápory. Podívejme se na dva z nich. První je zabalit obrázek do běžného div:

Div ( výška: 200px; šířka: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0,9); ) img ( výška: 200px; šířka: 400px; pozice: relativní; z-index: -2 ;)

Vše funguje, ale musíte přidat něco málo navíc HTML značení a CSS. Druhým způsobem je nastavit obrázek jako pozadí požadovaný blok:

Div ( výška: 200px; šířka: 400px; pozadí: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Při použití vnitřních stínů se může stát toto:

Vložit do stínu textu

Chcete-li implementovat vnitřní stín textu, jednoduše přidejte do kódu vložka nefunguje:

Chcete-li vyřešit, nejprve aplikujte na záhlaví h1 Nainstalujte tmavé pozadí a lehký stín:

H1 ( barva pozadí: #565656; barva: průhledná; stín textu: 0px 2px 3px rgba(255,255,255,0,5); )

Co se stane:

Přidání tajné přísady klip na pozadí který ořízne vše, co přesahuje text (na tmavé pozadí):

H1 ( barva pozadí: #565656; barva: průhledná; stín textu: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)

Ukázalo se téměř přesně to, co jsme potřebovali. Nyní text jen trochu ztmavíme (alfa) a výsledek je:

Dnes se naučíme, jak vytvořit CSS stíny bez obrázků. Po dokončení tohoto tutoriálu již nebudete potřebovat generátor stínů CSS.

Hlavní výhodou stínů vytvořených pomocí CSS3 je snadná implementace a snížení počtu požadavků na server (protože již nepoužíváme obrázky). K vytvoření stínu CSS potřebujeme tag div a vlastnost CSS box-shadow. Nebudete potřebovat žádné další označení, protože vytvoříme pseudo prvky :after a :before, které umístíme za hlavní objekt (div s třídou blok).

Podívejte se na HTML kód, pro který vytvoříme CSS3 stín:

Dále můžete vidět hotové příklady a kód potřebný k jejich implementaci. Abychom minimalizovali text na stránce, vynecháme CSS vlastnosti s předponami prohlížeče. Celý kód lze zobrazit kliknutím na odkaz "Příklad" odpovídající příkladu.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( right :10px; left:auto; transform:rotate(3deg); )

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; dole:12px; vlevo:10px; šířka:50%; výška:55%; max-šířka:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0,5); transform:skew(-8deg) rotation(-3deg); ) .block:after ( right:10px; left:auto; transform:skew(8deg) rotation(3deg); )

Pomocí stínu můžete poskytnout perspektivu bloku. Viz příklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( left:80px; bottom:5px ; width:50%; height:35%; max-width:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .block:after ( display:none; )

CSS stín u vyvýšeného bloku. Viz příklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0,5), 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0 , 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )

Příklad stínu CSS3 pro vertikálně složený blok. Viz příklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before (horní:10px; spodní:10px ; left:0; right:50%; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:10px / 100px; )

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before (horní:10px; spodní:10px ; left:0; right:0; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:10px / 100px; )

Příklad stínu CSS3 pro vodorovně složený blok. Viz příklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) vložka; ) .blok:před, .blok:po (obsah:""; pozice:absolutní; z-index:-2; ) .blok:před (nahoře:50%; dole: 0px; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:100px / 10px; )

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:100px / 10px; )

CSS3 stín pro otočený blok. Viz příklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-index:-1; top:0px; bottom:0; left:0; right:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba (0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; výška:20%; max.šířka:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0,7); transform:rotate(-3deg); ) .block:after ( right:10px; left: auto; transform:rotate(3deg); )

Blokový stín je vynikající trojrozměrný efekt, který blokům webových stránek dodává realismus a objem. Když jsem začal studovat (asi před 5-6 lety), neměl jsem o existenci ani ponětí a při tvorbě webu jsem musel ze stínu bloků udělat obrázek. Bylo to velmi nepohodlné a ne vždy to fungovalo tak, jak jsem chtěl. Díky síle CSS, která usnadnila práci webdesignérům. Dnes vám ukážu, jak vytvořit stín pro bloky v CSS.

Chcete-li přidat stín do CSS, použijte vlastnost box-shadow .

1. posuňte stín vodorovně (až 100px doprava, až -100px doleva);
2. vertikální posun (až 100px dolů, až -100px nahoru);
3. rozostření stínů (0 - čistý stín, 100 - velmi rozmazaný stín);
4. roztažení stínu (až 100px - roztažení, až -100px - komprese);
5. barva stínu;
6. inset - stín je uvnitř prvku, bez insetu bude stín směřovat ven.

Výsledek :

Stůl se stíny:

kód	Příklad:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

Pomocí stínu můžete vytvořit trojrozměrný blok:

Kód	Příklad
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3g(213px,6), 3g(213px,3rg) 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px,191,31), 5px,6px,189,192,188px 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8gb,9160px,0px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3gb(21px 83px) ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5rgb(563px), -5pxb(563px) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8gb(718px) ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px,1916 rgb(216) 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184) );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3rgb (23px) ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5rpgb(163px) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8gb(318px) ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( šířka: 70 %; max. šířka: 550 pixelů; okraj: 10 pixelů automaticky; odsazení: 1 em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0,3), -23px 0 20px -23px rgba(0 , 0, 0, 0,8), 23px 0 20px -23px rgba(0, 0, 0, 0,8), 0 0 40px rgba(0, 0, 0, 0,1) vložka; )

Výsledek :

Blok1 ( šířka: 30 %; max. šířka: 550 pixelů; okraj: 2 em auto; výplň: 1 m; pozadí: #DADADA; box-shadow: 6 pixelů 6 pixelů #BBBBBB, 12 pixelů 12 pixelů #919191; )

Výsledek :

Blok1 ( šířka: 30 %; okraj: 0 auto; odsazení: 2 em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Výsledek :

Pomocí stínu můžete vytvořit krásný rám.

Krásný rám s využitím vlastnostíbox- stín

Blok1 ( šířka: 20 %; max. šířka: 250 pixelů; okraj: 0 automaticky; odsazení: 1 em; ohraničení: 2 pixely přerušované # 999; box-shadow: 0 0 0 1 pixel # 999, vložka 0 0 0 1 pixel # 999; )
Výsledek
:

Blok1 ( šířka: 30 %; max. šířka: 250 px; okraj: 2 em auto; výplň: 4 em; pozadí: # dcc005; box-shadow: 0 0 4 em 4 em #fff inset; )
Výsledek
:

Blok1 ( max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(kruh na 0 0, rgba(255,255,255,.25,255,255(rgba) .35)); box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Výsledek
:


 
 
 
 
 
 
 

 

 
webová stránka
 

 

Výsledek
:

To jsou tyhle krásné efekty lze dosáhnout pomocí stínů v CSS.  Vymyslete něco nového a originálního, vše je ve vašich rukou.  Máte znalosti a schopnosti. 
A jednoho dne zveřejním článek o tom, jak můžete tvořit bez použití Photoshopu.  Buďte tedy v centru dění a přihlaste se k odběru aktualizací mého blogu.  Nenechte si ujít téma, které vás zajímá.  No a je to, hodně štěstí!!!