Vertikální přechod css. Lineární gradient. Přidání dalších barev

Vizuální model sluneční soustava na css a html

Vizuální model sluneční soustavy

Animace funguje pouze v prohlížečích, které podporují standard -webkit ( Google Chrome, Opera nebo Safari).

• Slunce

  Slunce je hvězda, která je horkou koulí horkých plynů ve středu naší sluneční soustavy. Jeho vliv sahá daleko za oběžné dráhy Neptunu a Pluta. Bez Slunce a jeho intenzivní energie a tepla by na Zemi nebyl život. Po celé galaxii Mléčné dráhy jsou rozptýleny miliardy hvězd, jako je naše Slunce.

• Rtuť

  Sluncem spálený Merkur je jen o málo větší než pozemský satelit Měsíc. Stejně jako Měsíc, ani Merkur prakticky nemá atmosféru a nemůže zahladit stopy po dopadu padajících meteoritů, takže je stejně jako Měsíc pokrytý krátery. Denní strana Merkuru se od Slunce velmi zahřívá, zatímco na noční straně klesá teplota o stovky stupňů pod nulou. V kráterech Merkuru, které se nacházejí na pólech, je led. Merkur dokončí jednu otáčku kolem Slunce každých 88 dní.

• Venuše

  Venuše je světem monstrózního tepla (ještě více než na Merkuru) a vulkanické činnosti. Strukturou a velikostí podobnou Zemi, je Venuše pokryta hustou a toxickou atmosférou, která vytváří silný skleníkový efekt. Tento spálený svět je dostatečně horký, aby roztavil olovo. Radarové snímky přes silnou atmosféru odhalily sopky a zdeformované hory. Venuše se otočí dovnitř opačný směr, z rotace většiny planet.

• Země

  Země je oceánská planeta. Náš domov s množstvím vody a života je v naší sluneční soustavě jedinečný. Jiné planety, včetně několika měsíců, mají také ledová ložiska, atmosféru, roční období a dokonce počasí, ale pouze na Zemi se všechny tyto složky spojily způsobem, který umožnil život.

• Mars

  Přestože jsou ze Země těžko vidět detaily povrchu Marsu, pozorování pomocí dalekohledu naznačují, že Mars má roční období a bílé skvrny na pólech. Po celá desetiletí lidé věřili, že světlé a tmavé oblasti na Marsu jsou skvrny vegetace, že Mars může být vhodným místem pro život a že voda existuje v polárních ledových čepicích. Když kosmická loď Mariner 4 dorazila k Marsu v roce 1965, mnoho vědců bylo šokováno, když viděli fotografie kalné planety poseté krátery. Mars se ukázal jako mrtvá planeta. Novější mise však odhalily, že Mars skrývá mnoho záhad, které zbývá vyřešit.

• Jupiter

  Jupiter je nejhmotnější planeta v naší sluneční soustavě se čtyřmi velkými měsíci a mnoha malými měsíci. Jupiter tvoří jakousi miniaturní sluneční soustavu. Aby se Jupiter stal plnohodnotnou hvězdou, musel být 80krát hmotnější.

• Saturn

  Saturn je nejvzdálenější z pěti planet známých před vynálezem dalekohledu. Stejně jako Jupiter je i Saturn složen převážně z vodíku a hélia. Jeho objem je 755krát větší než objem Země. Větry v jeho atmosféře dosahují rychlosti 500 metrů za sekundu. Tyto rychlé větry v kombinaci s teplem stoupajícím z nitra planety způsobují žluté a zlaté pruhy, které vidíme v atmosféře.

• Uran

  První planeta nalezená pomocí dalekohledu, Uran, byla objevena v roce 1781 astronomem Williamem Herschelem. Sedmá planeta je tak daleko od Slunce, že jeden oběh kolem Slunce trvá 84 let.

• Neptune

  Vzdálený Neptun se otáčí téměř 4,5 miliardy kilometrů od Slunce. Dokončení jedné revoluce kolem Slunce mu trvá 165 let. Pouhým okem je neviditelný díky své obrovské vzdálenosti od Země. Zajímavé je, že jeho neobvyklá elipsovitá dráha se protíná s dráhou trpasličí planety Pluto, a proto je Pluto uvnitř dráhy Neptunu asi 20 let z 248 let, během kterých udělá jednu otáčku kolem Slunce.

• Pluto

  Drobné, chladné a neuvěřitelně vzdálené Pluto bylo objeveno v roce 1930 a dlouho bylo považováno za devátou planetu. Ale po objevech světů podobných Plutu, které byly ještě dále, bylo Pluto v roce 2006 překlasifikováno na trpasličí planetu.

Heliocentrický model sluneční soustavy je model, ve kterém je Slunce ve svém středu a Země a ostatní planety rotují kolem dokola v důsledku svého gravitačního pole.

Sluneční soustava je soustava, která zahrnuje Slunce, 8 planet a jejich satelity, asteroidy, komety, meteory a vesmír. Asi 99,9 % celkové hmoty pochází ze Slunce a pouze 0,1 % pochází z jiných nebeských těles. Planety s asteroidy se pohybují kolem Slunce po eliptických drahách. Věda, která studuje tato nebeská tělesa, je astronomie. Tento model jasně ukazuje oběžné dráhy planet a pořadí jejich umístění. Dnes existuje mnoho různých modelů.

Poslední aktualizace: 21.04.2016

Přechody představují plynulý přechod z jedné barvy do druhé. CSS3 má řadu vestavěných přechodů, které můžete použít k vytvoření pozadí prvku.

Přechody v CSS nepředstavují žádnou speciální vlastnost. Pouze vytvoří hodnotu, která je přiřazena vlastnosti background-image.

Lineární přechod se táhne v přímce od jednoho konce prvku k druhému a vytváří plynulý přechod z jedné barvy do druhé.

Chcete-li vytvořit přechod, musíte určit jeho začátek a několik barev, například:

Obrázek na pozadí: linear-gradient(left,black,white);

V v tomto případě Začátek přechodu bude levý okraj prvku, který je označen hodnotou left . Barvy přechodu: černá a bílá. To znamená, že počínaje levým okrajem prvku doprava bude přechod z černé na bílou plynulý.

Použití přechodů má jednu nevýhodu – rozmanitost prohlížečů vás nutí používat předponu dodavatele:

Webkit- /* Pro Google Chrome, Safari, Microsoft Edge, Opera vyšší verze 15 */ -moz- /* Pro Mozilla Firefox */ -o- /* Pro Opera vyšší verze 15 (Opera 12) */

Tak, plné využití Gradient bude vypadat takto:

Chcete-li nastavit začátek přechodu, můžete použít následující hodnoty: doleva (zleva doprava), doprava ( zprava doleva), nahoře (shora dolů) nebo dole (zdola nahoru). Například vertikální přechod bude vypadat takto:

Obrázek na pozadí: linear-gradient(dole,black,white);

Můžete také nastavit směr úhlopříčky pomocí dvou hodnot:

Obrázek na pozadí: lineární přechod (vlevo nahoře, černá, bílá);

Kromě konkrétních hodnot, jako je nahoře nebo vlevo, můžete také zadat úhel od 0 do 360, který určí směr přechodu:

Obrázek na pozadí: lineární přechod (30 stupňů, černá, bílá);

Za hodnotou úhlů je uvedeno slovo deg.

Například 0° znamená, že přechod začíná na levé straně a posouvá se do pravá strana a když zadáte 45°, začíná v levém dolním rohu a pohybuje se pod úhlem 45° k pravému hornímu rohu.

Po definování začátku přechodu můžete určit barvy nebo referenční body, které se mají použít. Nemusí být dvě barvy, může jich být více:

Obrázek na pozadí: linear-gradient(top, red, #ccc, blue);

Všechny aplikované barvy jsou rovnoměrně rozloženy. Můžete však také určit konkrétní umístění pozadí pro barevné body. K tomu se za barvu přidá druhá hodnota, která určuje polohu bodu.

Obrázek na pozadí: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Opakující se přechod

Pomocí repeating-linear-gradient můžete vytvořit opakování lineární přechody. Například:

Obrázek na pozadí: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

V tomto případě začíná přechod od levého okraje prvku pruhem šedá(#ccc) o šířce 20 pixelů, poté do 30 pixelů přejde do červena a poté do 40 pixelů se vrátí do světle modré (rgba(0, 0, 126, 0,5)). Prohlížeč pak opakuje přechod, dokud nevyplní celý povrch prvku.

Vlad Merževič

Přechod je plynulý přechod z jedné barvy do druhé a mezi nimi může být několik barev a přechodů. Pomocí přechodů se vytvářejí ty nejbizarnější efekty webdesignu, například pseudotrojrozměrnost, odlesky, pozadí atd. Také s přechodem vypadají prvky atraktivněji než monochromatické.

Neexistuje žádná samostatná vlastnost pro přidání gradientu, protože je uvažován obrázek na pozadí, takže se přidá prostřednictvím vlastnosti background-image nebo obecné vlastnosti pozadí, jak je znázorněno v příkladu 1.

Příklad 1: Gradient

Zde obscénní idiom tradičně začíná prozaický obraz, ale jazyková hra nevede k aktivnímu dialogickému porozumění.

Výsledek tento příklad znázorněno na Obr. 1.

Rýže. 1. Lineární přechod pro odstavec

Ve velmi jednoduchý případ se dvěma barvami ukázanými v příkladu 1 nejprve napište pozici, od které bude přechod začínat, poté počáteční a koncovou barvu.

Chcete-li zaznamenat pozici, nejprve napište do a poté přidejte klíčová slova top , bottom a left , right a také jejich kombinace. Pořadí slov není důležité, můžete psát vlevo nahoře nebo vlevo nahoře . V tabulce 1 ukazuje různé polohy a typ přechodu získaný pro barvy #000 a #fff, jinak od černé po bílou.

Tabulka 1. Typy přechodů

Pozice		Popis	Pohled
nahoru	0 stupňů	Zespodu nahoru.
doleva	270 stupňů	Zprava doleva.
na dno	180 stupňů	Shora dolů.
doprava	90 stupňů	Zleva doprava.
vlevo nahoře		Z pravého dolního rohu do levého horního rohu.
vpravo nahoře		Z levého dolního do pravého horního rohu.
vlevo dole		Zprava horní roh vlevo dole.
vpravo dole		Zleva shora dolů doprava.

Místo klíčového slova můžete zadat sklon čáry přechodu, která ukazuje směr přechodu. Jako první se píše kladné nebo kladné. záporná hodnota rohu, pak se k němu přidá st.

Nula stupňů (neboli 360º) odpovídá gradientu zdola nahoru, poté je odpočítávání ve směru hodinových ručiček. Úhel sklonu čáry přechodu je uveden níže.

Pro hodnotu vlevo nahoře a podobné se úhel čáry přechodu vypočítá na základě velikosti prvku tak, aby spojoval dva diagonálně protilehlé rohové body.

Chcete-li vytvořit složité přechody, dvě barvy již nebudou stačit; syntaxe vám umožní je přidat neomezené množství, uvádějící barvy oddělené čárkami. V tomto případě můžete použít průhledná barva (klíčové slovo transparentní ), a také průsvitné použití formát RGBA, jak je ukázáno v příkladu 2.

Příklad 2: Průsvitné barvy

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Přechod s průsvitnými barvami

Chcete-li přesně umístit barvy v přechodu, za hodnotou barvy následuje její poloha v procentech, pixelech nebo jiných jednotkách. Například záznam červená 0%, oranžová 50%, žlutá 100% znamená, že přechod začíná červeně, pak 50 % oranžově a nakonec žlutě. Extrémní jednotky jako 0 % a 100 % lze pro jednoduchost vynechat. Příklad 3 ukazuje, jak vytvořit tlačítko přechodu, ve kterém je pozice druhé barvy ze tří nastavena na 36 %.

Příklad 3: Přechodové tlačítko

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Jemně mě přitiskni

Výsledek tohoto příkladu je znázorněn na Obr. 3.

Rýže. 3. Tlačítko přechodu

Nastavením pozice barvy můžete získat ostré přechody mezi barvami, což nakonec dává sadu monochromatických pruhů. Takže pro dvě barvy musíte zadat čtyři barvy, první dvě barvy jsou stejné a začínají od 0 % do 50 %, zbývající barvy jsou také stejné a pokračují od 50 % do 100 %. V příkladu jsou přidány 4 pruhy jako pozadí webové stránky. Vzhledem k tomu, že krajní hodnoty jsou automaticky nahrazeny, nelze je specifikovat, takže stačí napsat pouze dvě barvy.

Příklad 4. Jednoduché pruhy

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Typickou evropskou buržoazii a slušnost elegantně ilustruje úřední jazyk.

Výsledek tohoto příkladu je znázorněn na Obr. 4. Všimněte si, že jedna z barev přechodu je nastavena na průhlednou, takže se mění nepřímo prostřednictvím barvy pozadí webové stránky.

Rýže. 4. Pozadí vodorovných pruhů

Přechody jsou mezi webovými designéry poměrně oblíbené, ale jejich přidávání může být komplikované různé vlastnosti pro každý prohlížeč a označující různé barvy. Abychom vám usnadnili vytváření přechodů a jejich vkládání do kódu, doporučuji stránku www.colorzilla.com/gradient-editor, pomocí které si přechody snadno nastavíte a ihned získáte požadovaný kód. K dispozici hotové šablony(Presets), prohlížení výsledku (Preview), úprava barev (Adjustments), finální kód (CSS), který podporuje IE přes filtry. Pro ty, kteří pracovali ve Photoshopu nebo jinde grafický editor, bude vytváření přechodů vypadat jako hračka, ale pro ostatní nebude těžké na to rychle přijít. Obecně to vřele doporučuji.

Gradient - vyplnění vybrané oblasti sekvencí barevných odstínů s plynulými přechody mezi nimi. Pro zobrazení se používá gradient hladký přechod mezi dvěma nebo více určenými barevnými odstíny. Příklad přechodu:

Dříve se k vytvoření efektu přechodu používaly obrázky na pozadí. Nyní můžete použít CSS3 k vytvoření pozadí s přechodem. Prvky s přechody CSS3 vypadají lépe, když jsou přiblíženy, než jejich protějšky s obrázky na pozadí, protože přechod generuje prohlížeč přímo pro zadanou oblast.

Všimněte si, že přechod CSS je obrázek na pozadí vygenerovaný prohlížečem, nikoli barva pozadí takže je definována jako hodnota vlastnosti background-image. To znamená, že přechod lze zadat nejen jako hodnotu vlastnosti background-image, ale také kdekoli, kam můžete vložit obrázek na pozadí, například list-style-image a background .

CSS3 definuje dva typy přechodů:

• Lineární přechod(Linear Gradient) - plynulý přechod z barvy do barvy v přímce.
• Radiální gradient(Radial Gradient) - plynulý přechod z barvy do barvy z jednoho bodu ve všech směrech.

Lineární přechod

Lineární přechod se táhne v přímce a ukazuje hladký přechod z jednoho odstínu barvy do druhého. Lineární přechod se vytvoří pomocí funkce linear-gradient(). Funkce vytvoří obrázek, který je lineárním přechodem mezi zadanými odstíny barev. Velikost přechodu odpovídá velikosti prvku, na který je aplikován.

Funkce linear-gradient() přebírá následující argumenty oddělené čárkami:

• První argument je míra úhlu nebo klíčová slova, která definují směrový úhel čáry přechodu. Volitelný argument.
• Čárkami oddělený seznam dvou nebo více barev, z nichž za každou může následovat pozice zastavení.

Nejjednodušší lineární přechod vyžaduje pouze dva argumenty určující počáteční a koncovou barvu:

Div ( background-image: linear-gradient(black, white); width: 200px; height: 200px; ) Zkuste »

Předání dvou argumentů funkci nastaví vertikální přechod s počátečním bodem nahoře.

Směr čáry přechodu lze určit dvěma způsoby:

Použití stupňů Jako první argument můžete předat stupeň úhlu čáry gradientu, který určuje směr gradientu, například úhel 0deg (zkratka pro stupeň - stupeň) definuje čáru gradientu od spodního okraje prvek nahoru, úhel 90 stupňů definuje čáru přechodu zleva doprava atd. Jednoduše řečeno, kladné úhly představují rotaci ve směru hodinových ručiček, záporné úhly představují rotaci proti směru hodinových ručiček.

Použití klíčových slov Klíčová slova „to top“, „to right“, „to bottom“ nebo „to left“ lze také předat jako první argument, představují úhly přechodových čar „0deg“ „90deg“ „180deg“ „ 270 stupňů".

Úhel lze také nastavit pomocí dvou klíčových slov, například vpravo nahoře - čára přechodu směřuje do pravého horního rohu.

Příklad gradientu specifikovaného v různých směrech:

Jak již bylo zmíněno, lineární přechod může obsahovat seznam více než dvou barev oddělených čárkou a prohlížeč je rovnoměrně rozloží po celé dostupné oblasti:

Div ( okraj: 10px; šířka: 200px; výška: 200px; plovoucí: vlevo; ) #jeden (obrázek na pozadí: lineární-gradient (doprava, červená, modrá, žlutá); ) #dva (obrázek na pozadí: lineární- přechod (vlevo nahoře, modrá, bílá, modrá) Zkuste »

Po barvě můžete určit polohu zastavení, která určuje umístění barvy (kde jedna barva začíná přecházet v jinou) vzhledem k počátečnímu a koncovému bodu přechodu. Pozice zastavení se určuje pomocí jednotek nebo procent podporovaných CSS. Při použití procent se poloha zarážky polohy vypočítá v závislosti na délce čáry přechodu. Hodnota 0 % je počáteční bod gradientu, 100 % je koncový bod.

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient (vpravo nahoře, modrá, bílá 70%, modrá); ) #two ( background-image : lineární přechod (doprava dolů, žlutá 10 %, bílá, červená, černá 90 %);) #tři (obrázek na pozadí: lineární přechod (doprava, černá 10 %, žlutá, černá 90 %); ) Zkuste »

Hodnotu barvy lze specifikovat různými způsoby, například: zadejte název barvy, použijte hexadecimální hodnoty (HEX), použijte syntaxi RGB (RGBA) nebo HSL (HSLA). Například použití přechodu s průhledností lze použít v kombinaci s barvou pozadí nebo obrázkem pod přechodem k vytvoření zajímavých vizuálních efektů:

Div ( margin: 10px; width: 300px; height: 100px; background-color: green; ) #one ( background: linear-gradient(do left, rgb(255,255,0), rgba(255,255,0,0)); ) #two ( background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); )

Když mluvíme o přechodech v CSS, mluvíme o barevné přechody.

V CSS existují dva typy přechodů:

• lineární: barvy jdou z jednoho bodu do druhého, podél říditčáry;
• radiální: barvy jdou od středu kruhu k jeho okrajům, dovnitř každý směrech.

Gradient je uvažován obrázek na pozadí a musí být používán s příslušnou vlastností.

lineární gradient

Syntaxe lineárních přechodů je poměrně složitá, ale základní myšlenka je tato:

• určit požadované barvy;
• kde by se tyto barvy měly objevit podél osy(na začátku, uprostřed, na konci atd.);
• ve kterém směr měl by tam být gradient.

Začněme jednoduchým dvoubarevným přechodem:

Div (obrázek na pozadí: lineární přechod (červená, modrá); )

Výchozí:

• vertikální směr, shora dolů;
• první barva v začátek(nahoru);
• druhý barva v konec(dolů).

Změna směru

Pokud vám směr shora dolů nevyhovuje, můžete jej změnit na jednu z možností:

• definovat přiřazení gradientu pomocí klíčových slov jako vlevo nahoře;
• určit konkrétní roh ve stupních, například 45 stupňů.

Tento směr musí být nastaven před barva:

Div (obrázek na pozadí: lineární přechod (vpravo dole, žlutá, fialová); šířka: 200px; )

Pokud se chcete zeptat specifický úhel, pak můžete použít hodnotu v stupně:

• 0deg - zdola nahoru;
• 20deg - mírně diagonálně, ve směru hodinových ručiček;
• 90 stupňů - jako 15 hodin, zleva doprava;
• Výchozí hodnota je 180 stupňů, shora dolů.

Div ( obrázek na pozadí: lineární přechod (20 stupňů, zelená, modrá); šířka: 150 pixelů; )

Přidání dalších barev

Můžete vložit tolik barev, kolik chcete. Budou rovnoměrně rozložené podél osy:

• dvě barvy: 0 % a 100 %
• tři barvy: 0 %, 50 % a 100 %
• čtyři barvy: 0 %, 33 %, 67 % a 100 %

Div ( obrázek na pozadí: lineární přechod (oranžová, šedá, žlutá); šířka: 150px; )

Definování konkrétních barevných bodů

Pokud nechcete, aby byla barva rozložena rovnoměrně, můžete nastavit určité barevné pozice pomocí procent (%) nebo pixelů (px):

Div (obrázek na pozadí: lineární přechod (oranžová, šedá 10%, žlutá 50%); šířka: 150px; )

V těchto parametrech:

• oranžová nemá specifikovanou polohu barvy, takže výchozí hodnota je 0 %;
• šedá barva je blíže k vrcholu, o 10 % místo o 50 %;
• Žlutá barva zabírá polovinu gradientu, od 50 % do konce 100 %.

radiální gradient

Zatímco lineární gradienty sledují jednu osu, radiální gradienty šířit všemi směry. Jejich syntaxe je velmi podobná lineárním gradientům, protože oba mají barevné tečky. Ale místo určení směru musíte zadat:

• formulář: kruh nebo elipsa;
• výchozí bod: který bude středem kruhu nebo elipsy;
• koncový bod: kde bude hrana kružnice nebo elipsy.

Div (obrázek na pozadí: radiální přechod (červená, žlutá); odsazení: 1rem; šířka: 300px; )

Výchozí:

• gradient je elipsa;
• první barva začíná v centrum;
• poslední barva končí nejvzdálenější roh.

Výchozí pozice

Výchozí pozice funguje jako pozice na pozadí . Můžete jej nastavit pomocí klíčového slova at.

Div (obrázek na pozadí: radiální přechod (vpravo nahoře, černá, světle šedá); výplň: 1rem; šířka: 300px; )

Koncová poloha

Ve výchozím nastavení formulář končí na nejvzdálenější roh. Můžete si vybrat:

• nejbližší strana
• nejbližším rohu
• nejvzdálenější strana
• nejvzdálenější roh

Div ( obrázek na pozadí: radiální přechod (nejbližší roh při 20 pixelech, zelená, modrá); odsazení: 1rem; šířka: 300 pixelů; ) div:hover ( obrázek na pozadí: radiální přechod (nejvzdálenější strana při 20 pixelech, zelená, modrá)

Pevná velikost

Místo nastavení počáteční a koncové polohy můžete jednoduše nastavit konkrétní velikosti:

Div (obrázek na pozadí: radiální přechod (20px 10px při 75% 50%, tmavěfialová, růžová); výplň: 1rem; šířka: 300px; )

Přechody v CSS jsou mocný nástroj s ohledem na nekonečné číslo možnosti.