Tranziții de culoare Smooth: gradient de CSS

Culorile naturale sunt, de obicei uniform netede. Dar, chiar și pe o suprafață perfect plană a unei imagini color solide a tranzițiilor de culoare naturale. Întotdeauna se încadrează în mod neintenționat lumina soarelui sau lumină artificială, precum și modificarea unghiului de vizualizare permite nuanțe neregulate și unice.

Două puncte de vedere care vizează același obiect, percep diferența de culoare, respectiv, de unghiurile lor de vedere și corelarea cu alte unghiuri de incidență a razelor de pe suprafața încoace și încolo.

Efectele psihologice ale tranzițiilor de culoare

Culoarea este nu numai senzațiile fizice și nu depinde numai de timpul și poziția în spațiu. Imagini de copaci, clădiri, munți și alte elemente într - o poziție inversată evoca sentimentul de reflexie în suprafața apei sau pe cealaltă suprafață.

linii paralele Absolut negre pe pereți suprafață perfect albe, fiecare linie de-a lungul întregii creșteri de lungime proporțional cu reducerea grosimii grosimii liniei naturale atunci când sunt vizualizate pe un perete - toate acestea va provoca o senzație în privitorului că camera are un plafon orizontal.

O imagine este inscripționată cu cele două, și fiecare dintre ele este deplasat în raport între ele printr-o distanță între ochi, dând efectul volumului spațial, în cazul în care aspectul defocalizare.

Dacă afișul este suficient de mare și de trecere a frontierei, în realitate a făcut perfectă, imaginea de pe afișul va fi văzut la fel de natural ca nuanțele de culoare dorite, conștiința privitorului se va conecta automat.

Site-ul, și mai presus de toate, design-ul și schema de culori sunt logice esențiale și complementare de resurse, dialogul său, face efectul psihologic adecvat asupra vizitatorului.

tranziții line prin CSS

Gradienti sunt create cu gradient linear () și radial gradient (). În primul caz, o schimbare buna de culoare are loc de-a lungul liniei și în al doilea caz - a unei elipse sau un cerc. gradient de CSS poate fi setat în proprietățile de fundal, fundal imagine, border-imagine, lista de stil-imagine. Suprapunerea elemente între ele, definind transparența lor poate genera nuanțe mari și de a crea tranziții unice.

Cu toate acestea, ar trebui să se țină seama de faptul că tranziția de culoare nu poate fi întotdeauna netedă. Unele variante de combinații de culori, valorile de transparență, aspectul paginii de fundal poate da nedorite efecte pas.

reguli CSS pentru gradient de fundal de înregistrare

Gradientul este o tranziție lină de la o culoare la alta. În acest caz, puteți utiliza mai multe culori. Notă versiunea liniară a (gradient liniar CSS) pot fi variate:

Primul parametru este înclinația latura unghi sau regiune, urmat de culoare. Nu este necesar să se utilizeze numai două culori, puteți desena întregul curcubeu. Aplicarea proprietății transparenței opacitate pot fi obținute efecte care se suprapun.

Alegerea culorii, generatoarele de culoare

Partea creativa a designerului, site-ul dezvoltatorului în ultimii ani simplificat. Ea devine o formă practică și adecvată dreptunghiulară, care conține un minimum de informații, un minim de funcții, simțul maximă și atitudinea mentală de a vinde produsul, oferă un serviciu, evidențiați reduceri, de calitate și / sau diferențe semnificative față de competitori.

Cu toate acestea, chiar și în astfel de condiții dure, reglementări și crearea de web modernă resurse este un loc pentru creativitate și o dorință clară de unii dezvoltatori pentru a face o lucrare agresiv, orientate cu culoare, reflectând sensul conținutului textului și dialogul de stil ales. gradientului CSS a fost aplicat mai frecvent.

Soluții de culoare „Google“ și „Skype“, în special, a avut un efect și urmașii, cu toate acestea, în ultimii doi ani, componenta activă a web design a început să caute noi forme, culori noi și discret, încercați dinamica formelor de curgere.

Pe Internet există mai multe resurse on-line (generator de gradient CSS), care simplifică foarte mult sarcina de a alege culorile potrivite :. Angrytools, flatonika, generatecass etc. Cu ajutorul lor, puteți salva într-adevăr timp la selectarea culorii dreapta, ia în considerare tranzițiile de linie și suprapunerile.

schema de culori dinamice

Tradiția, care stau la baza crearea de web a resurselor, a făcut regula inviolabile: structura, conținutul și dialogul site cu clientul - competența dezvoltator pune în aplicare voința proprietarului (client). Aspectul site-ului, design-ul este, de asemenea, în mod tradițional, se referă la faptul că nu este determinată de client.

Între timp, o varietate de dispozitive este în creștere, iar în familiile fiecărui tip există diferite exemplare promițătoare, cu diferențe semnificative, nu numai în reproducerea culorilor, la fel ca în rezoluția și browser-ul formează regiunea vizibilă.

O varietate de browsere și versiuni utilizate creează, de asemenea, probleme în realizarea unei hărți adecvată a capacităților de gradient CSS.

În mod colectiv evaluarea acestor circumstanțe, și exemple ale unor lucrări promițătoare, se poate argumenta că aspectul site-ului defaultnom numai de stat - competența dezvoltator și / sau proprietarul resursei. Numai atunci când un client accesează pentru prima dată resursa, acesta poate fi în măsură să evalueze designul site-ului. În cazul în care clientul a considerat potrivit să-și amintească site-ul și să o folosească în viața lor de zi cu zi, dorința lui de a avea instrumentele necesare pentru a controla aspectul și funcționalitatea este pe deplin justificată.

Un astfel de centru de greutate al transferului de beneficii dezvoltator: nu este nevoie să se angajeze în punerea în aplicare a compatibilității cross-browser, site-ul de testare pe dispozitive diferite pe diferite sisteme de operare.

Mai mult decât atât, tendința va crea o bază de date comună pentru punerea în aplicare efectivă a normelor CSS pentru diferite dispozitive. Acesta este doar începutul, dar potențialul său este de mare importanță.