Photoshop používa na vytváranie prechodov nástroj Gradient Tool. Vo Photoshope máte možnosť vytvárať prechody rôznych typov „Lineárny prechod“, „Radiálny prechod“, „Uhlový prechod“, „Odrazový prechod“, „Diamantový prechod“ (na výber požadovaného prechodu použite príslušné tlačidlá v lišta možností, ikony s ukážkou prechodu). Najčastejšie sa používa „Lineárny gradient“ (lineárny prechod), oblasť výplne je rovnomerne vymaľovaná farbami zahrnutými v prechode, lineárne vo vami zvolenom smere.
Prechod môže zahŕňať všetky farby, ktoré môžete použiť, vrátane priehľadnej oblasti prechodu namiesto farby. Ak chcete vytvoriť prechod z vybratej farby na priehľadnú, vyberte nástroj Gradient. V pruhu volieb kliknite na prechod, ktorý je aktuálne vybratý.
V dialógovom okne „Editor prechodov“, ktoré sa otvorí, vytvorte nový prechod v poli „Názov“.
zadajte názov gradientu a kliknite na tlačidlo „Nový“. Nastavte Typ prechodu na Plný, Hladkosť na 100 %. Pod "Smoothness" uvidíte budúci prechod s posuvníkmi farieb v hornej a dolnej časti.
Horné posúvače sú zodpovedné za percento priehľadnosti konkrétnej farby, spodné posúvače za farbu prechodu. Výberom farieb v dolných posúvačoch môžete upraviť percento ich priehľadnosti zmenou parametrov „Nepriehľadnosť“ a „Umiestnenie“ v zodpovedajúcich horných posúvačoch.
Kliknite na ľavý horný posuvník a v jeho parametroch v poli „Zastávky“ nastavte 0 % pre „Nepriehľadnosť“ a 0 % pre „Umiestnenie“.
Prejdite na ľavý spodný posúvač (aj kliknutím naň). V týchto parametroch „Zastávky“ upravíte aj „Umiestnenie“ na 0 % a v položke „Farba“ zvolíte farbu, priehľadná farba by mala byť biela.
Teraz prejdite na pravú stranu posúvačov. V parametroch pravého dolného posúvača vyberte farbu, ktorú potrebujete, v položke "Umiestnenie" nastavte 100%.
V parametroch pravého horného posúvača v "Nepriehľadnosť" a "Umiestnenie" nastavte na 100%.
Všetok gradient je pripravený a môžete ho použiť. Kliknite pomocou nástroja Gradient Tool na časť obrázka, kde chcete, aby prechod začínal, a potiahnite myš tam, kde chcete, aby pokračoval. Ak nepracujete na výbere, prechod sa použije na celú oblasť obrázka.
Priehľadnosť, tiene a prechody
Transparentnosť
Schopnosť sprehľadniť obrázky a farby je jedným z najzákladnejších stavebných kameňov CSS3. Transparentnosť možno nastaviť dvoma spôsobmi. Prvým je použitie funkcie rgba(), ktorý má štyri parametre. Prvé tri parametre nastavujú hodnoty (od 0 do 255) červenej, zelenej a modrej zložky farby. Posledný parameter určuje hodnotu priehľadnosti alebo alfa, ktorá môže byť v rozsahu od 0 (úplne priehľadná) po 1 (úplne nepriehľadná).
Nasledujúce pravidlo nastavuje farbu pozadia na svetlozelenú pri 50% priehľadnosti:
Aside (pozadie: rgba(170,240,0,0,5); )
Prehliadače, ktoré nepodporujú funkciu rgba(), budú toto pravidlo jednoducho ignorovať a pozadie si zachová predvolenú priehľadnosť s úplnou priehľadnosťou.
Takže druhý prístup je lepší. Tu najprv nastavíme plnú záložnú farbu a potom ju nahradíme priesvitnou farbou:
Aside ( pozadie: rgb(170,240,0); pozadie: rgba(170,240,0,0,5); )
Prehliadače, ktoré nepodporujú funkciu rgba(), teda zafarbia pozadie prvku stále, ale iba úplne nepriehľadnou farbou.
Ak chcete dosiahnuť čo najlepšiu zhodu záložnej farby so základnou farbou, mali by ste použiť záložnú farbu, ktorá najpresnejšie reprodukuje efekt priesvitnosti. Napríklad, ak je priesvitná farba prekrytá na bielom pozadí, potom sa táto farba bude javiť ešte svetlejšia vďaka priesvitnému bielemu pozadiu. Pri výbere záložnej farby by sa tento efekt mal brať do úvahy.
Špecifikácia CSS3 tiež definuje vlastnosť štýlu nepriehľadnosť(nepriehľadnosť), ktorá funguje presne ako hodnota alfa. Hodnota opacity je tiež nastavená v rozsahu od 0 do 1, čo vám umožňuje urobiť akýkoľvek prvok priesvitným:
Aside (pozadie: rgb(170,240,0); nepriehľadnosť: 0,5; )
Obrázok nižšie ukazuje dva príklady priesvitnosti, jeden implementovaný pomocou funkcie rgba() a druhý pomocou vlastnosti opacity:
Vlastnosť opacity je uprednostňovaná pred funkciou rgba() v nasledujúcich prípadoch:
keď potrebujete urobiť priesvitnosť niekoľkých farieb. Vlastnosť opacity vám umožňuje urobiť pozadie, text a rám prvku polopriehľadnými;
keď potrebujete urobiť niečo priesvitné, bez toho, aby ste poznali jeho farbu, napríklad preto, že farbu je možné nastaviť pomocou inej šablóny štýlov alebo kódu JavaScript;
keď potrebujete urobiť obrázok priesvitným;
kedy použiť prechod, t.j. Efekt animácie, ktorý spôsobí, že sa prvok rozplynie alebo zhasne.
Tiene
Špecifikácia CSS3 definuje dva nové typy tieňov: blokovať tiene a tiene textu. Tiene polí sú vo všeobecnosti užitočnejšie a majú vyššiu úroveň podpory, zatiaľ čo tiene textu nefungujú v žiadnej verzii Internet Explorera. Box-shadow sa dá použiť na vytvorenie obdĺžnikového tieňa za rámčekom akéhokoľvek prvku
Príslušné tiene sa vytvárajú prostredníctvom vlastností krabicový tieň a textový tieň. Nasleduje príklad, ako vytvoriť základný tieň poľa:
Aside (box-shadow: 8px 8px 10px sivá; )
Prvé dve hodnoty vlastnosti box-shadow nastavujú horizontálne a vertikálne odsadenie tieňa od pôvodného objektu. Kladné hodnoty posúvajú tieň nadol a doprava, záporné hodnoty ho posúvajú nahor a doľava. Ďalšia hodnota určuje veľkosť rozostrenia (rozmazanie, v tomto príklade 10 pixelov), vďaka čomu bude tieň viac rozmazaný. Posledná hodnota určuje farbu tieňa. Ak sa pod blokom nachádza nejaký obsah, zvážte použitie funkcie rgba(), aby bol tieň polopriehľadný.
Na jemné doladenie tieňa je možné do vlastnosti box-shadow pridať dve hodnoty. Na nastavenie šírky (šírenia) tieňa, podvlastnosti, ktorá rozširuje tieň a zahusťuje jeho plnú časť medzi rozmazanými okrajmi, sa medzi hodnoty rozmazania a farby pridá hodnota:
Aside (box-shadow: 8px 8px 10px 5px sivá; )
A na vytvorenie tieňa, ktorý sa odráža nie vonku, ale vo vnútri prvku, sa na koniec zoznamu hodnôt pridá hodnota vložka. Najlepší efekt sa dosiahne, keď sa tieň umiestni priamo na vrch prvku bez horizontálneho alebo vertikálneho posunu:
Aside (box-shadow: 0px 0px 20px limetová vložka; )
Vlastnosť text-shadow vyžaduje podobnú množinu hodnôt, ale v inom poradí. Najprv sa určí farba, potom horizontálne a vertikálne posunutie a potom rozmazanie:
H1 (tieň textu: šedá 10px 10px 7px; )
prechody
Prechody sú farebné prechody, ktoré môžu vytvárať širokú škálu efektov, od jemného tieňa pod panelom ponuky až po psychedelicky zafarbené tlačidlá.
Na mnohých webových stránkach sú prechody simulované obrázkami na pozadí. Technológia CSS3 však umožňuje webovým vývojárom definovať požadovaný gradient, ktorý má prehliadač vykresliť. Výhodou tohto prístupu je, že znižuje počet obrazových súborov, ktoré je potrebné spracovať, a poskytuje možnosť vytvárať prechody, ktorých veľkosť sa plynule mení, aby vyplnili akýkoľvek priestor.
CSS na vytváranie prechodov nemá žiadne špeciálne vlastnosti. Namiesto toho sa na nastavenie vlastnosti pozadia používa funkcia prechodu. Nezabudnite však najskôr priradiť tejto vlastnosti plnú farbu, aby ste vytvorili záložnú výplň pre prehliadače, ktoré nepodporujú prechody (vrátane Internet Explorera, ktorý podporuje iba prechody začínajúce IE 10).
Existujú štyri funkcie prechodu, z ktorých všetky vyžadujú použitie predpon dodávateľa prehliadača. V tejto časti sa pozrieme na príklady prechodov pre prehliadač Chrome (ktorý používa predponu -webkit-). Ak chcete podporovať prehliadače Firefox a Opera, musíte pridať presne rovnaké hodnoty gradientu, ale s predponami -moz- a -o-.
Najprv sa pozrime na funkciu lineárny gradient(). Nasleduje jedna z najjednoduchších foriem sfarbenia bloku na bielo v hornej časti, ktorá v spodnej časti vybledne do modra:
Aside ( background: -webkit-linear-gradient(top, white, blue); )
Nahradením hodnoty top vľavo dostaneme lineárny horizontálny gradient. A zadaním rohu bloku pre začiatok prechodu dostaneme diagonálny prechod:
Na stranu ( pozadie: -webkit-linear-gradient (vľavo hore, biela, modrá); )
Poskytnutím zoznamu farieb môžete vytvoriť viacfarebný prechod. Napríklad nasledujúce pravidlo vytvorí trojfarebný horizontálny prechod:
Na stranu ( pozadie: -webkit-linear-gradient(vľavo, červená, oranžová, žltá); )
Nakoniec namiesto rovnomerného rozloženia farieb prechodu môžete určiť počiatočnú pozíciu každej farby pomocou gradientové zastávky naťahovanie alebo stláčanie pásikov alebo ich posúvanie v jednom alebo druhom smere.
Nástroj Prechod umožňuje kresliť niekoľko typov prechodov. Pomocou prechodov v režime priehľadnosti je tiež možné dosiahnuť efekt „vyblednutia“ alebo „zlúčenia“ dvoch obrázkov do jedného.
Všetky typy prechodov je možné vybrať v sekcii prechodov na:
Nižšie sú uvedené príklady toho, ako každý typ prechodu ovplyvňuje obrázok. Vľavo sú obrázky po spracovaní prechodom v režime Color s dvoma nepriehľadnými farbami (a hodnotou alfa 255). Vpravo sú obrázky po spracovaní s prechodom v režime „Priehľadnosť“:
Kruhový gradient vo farebnom a priehľadnom režime
Vytvorenie prechodu
Ak chcete nakresliť prechod, jednoducho kliknite a podržte tlačidlo myši a presuňte kurzor po plátne, rovnako ako keby ste kreslili čiaru. Prechod sa pri pohybe myšou zväčší.
Po uvoľnení tlačidla myši je možné prechod upraviť pomocou jeho riadiacich bodov alebo „uzlov“ vo forme malých kruhov. Kliknutím pravým tlačidlom myši na takýto „uzol“ sa prehodí primárna a sekundárna farba prechodu. Ak posuniete jeden z "uzlov" a súčasne držíte obe tlačidlá myši, môžete presunúť celú oblasť prechodu.
Farebný režim
Predvolený farebný režim ovplyvňuje všetky farebné kanály a alfa kanál. Pri použití prechodu v tomto režime bude primárna farba postupne miznúť do sekundárnej. Ak namiesto ľavého tlačidla myši použijete pravé tlačidlo myši, primárne a sekundárne farby sa obrátia. Vo vyššie uvedených príkladoch použil prechod predvolené primárne a sekundárne farby (primárna čierna, sekundárna biela).
Režim priehľadnosti
Režim transparentného prechodu možno použiť na vyblednutie (vyblednutie) časti obrázka. Tento režim môže byť užitočný aj na „zmiešanie“ dvoch obrázkov. Ak chcete aktivovať tento režim, posuňte príslušný ovládač do požadovanej polohy:
Tento typ gradientu ovplyvňuje iba alfa kanál aktuálnej vrstvy. Prechod bude hladko meniť hodnotu alfa primárnej farby, kým nezvráti hodnotu alfa sekundárnej farby. Pri použití pravého tlačidla myši prechod plynule zmení hodnotu alfa z prevrátenej hodnoty alfa sekundárnej farby na hodnotu alfa primárnej farby. Zjednodušene povedané, transparentný prechod si môžete predstaviť ako plynulý prechod z úplnej nepriehľadnosti (s hodnotou alfa 255) do úplnej priehľadnosti (s hodnotou alfa 0).
Ak chcete „premiešať“ alebo „zmiešať“ dva obrázky, umiestnite ich do rôznych vrstiev a potom na vrchnú vrstvu v režime „Priehľadnosť“ použite prechod.
Ako príklad používame dva obrázky, ktoré boli uvedené v popise. Plynulý prechod z jedného obrázku do druhého možno ľahko vytvoriť „natiahnutím“ priehľadného prechodu z ľavého na pravý okraj obrázku:
Súvisiace články
Zlaté čísla Ako predať krásne telefónne číslo
Ťažba kryptomeny: čo to je jednoduchými slovami
Najlepší operačný systém pre laptop: Kompletná recenzia
Programy na sťahovanie hudby od spolužiakov Stiahnite si smutnú pesničku od spolužiakov zo sociálnej siete
Mobilná verzia prehliadača Yandex