Noi reguli CSS fierbinți pe care să le încercați acum

Pagina 3 din 4: Repetarea fundalului, raportul de aspect, modul de amestecare

Repetare fundal (rotund și spațiu)

Repetare fundal a fost o parte stabilă a CSS pentru ceea ce pare a fi o eternitate, dar există două opțiuni mai puțin cunoscute disponibile - Round și Space. Ambele opțiuni funcționează asigurându-se că 100% din imaginea de fundal declarată este repetată și vizibilă în orice moment. Acestea funcționează în moduri ușor diferite și vor face o diferență subtilă a modului în care apar imaginile.

Opțiunea rotundă redimensionează imaginea pentru a se potrivi

rundă opțiunea redimensionează imaginea pentru a se potrivi

fundal-repetare: rotund; repetă imaginea de fundal fără a decupa vreodată imaginea. În schimb, va redimensiona imaginea uniform până când va fi suficient spațiu pentru a se potrivi într-o țiglă suplimentară.



Opțiunea de spațiu creează spațiu suplimentar între plăcile dvs.

spaţiu opțiunea creează spațiu suplimentar între plăcile dvs.

Fundal-repetare: spațiu; gresie imaginea în ambele direcții. Este similar cu Round, cu excepția faptului că în loc să redimensionați imaginea până când există mai mult spațiu pentru afișarea altei dale, va crea în schimb spațiu alb între dale până când se poate afișa un alt rând sau coloană.

Nici una dintre aceste opțiuni nu este atât de nouă, dar acestea vă vor oferi un pic de control suplimentar asupra modului în care are loc placarea pe diferite dimensiuni ale ferestrei. Ceea ce este, de asemenea, foarte util la aceste opțiuni este că sunt acceptate de fiecare browser.

interogări media cu raportul de aspect

Introducerea interogărilor media a schimbat modul în care creăm site-uri web. Ni s-a oferit posibilitatea de a ne construi aspectele în funcție de modul în care utilizatorul a văzut pagina. Cel mai adesea, acest lucru s-ar baza numai pe lățimea sau înălțimea ferestrei, dar recent a fost adăugată o nouă opțiune.

folosiți iPhone ca tabletă de desen pentru pc

Acum puteți aplica CSS pe baza ecranului paginii printr-o interogare media care detectează raportul de aspect al ferestrei cu care navigați. De asemenea, puteți detecta dacă fereastra se potrivește cu un raport de aspect maxim sau minim.

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea

Codul de utilizat pentru aceasta este destul de simplu. Se potrivește convenției folosite cu orice altă declarație de interogare media - ceva de genul:

@media screen and (aspect-ratio: 16/9) { Your CSS } @media screen and (min-aspect-ratio: 16/9) { Your CSS }

Există doar câteva scenarii în care raportul de aspect interogările media ar fi utile. Dacă construiți ceva special pentru dispozitive mobile, puteți utiliza raportul de aspect min / max pentru a viza dacă utilizatorul navighează în modul peisaj sau portret (deși această utilizare ar putea fi abordată și cu interogare media orientativă).

In orice caz, raportul de aspect este acceptat de toate browserele majore care îl acceptă, suportul pentru Internet Explorer mergând încă din versiunea 9.

Blend-mode

Aplicarea imaginilor de fundal este de obicei o parte stabilă a fiecărei construcții a proiectului. Dar, uneori, este bine să fim puțin mai creativi cu imaginile noastre de fundal, care este locul blend-mode intră.

În loc să puneți doar fundalul deasupra culorii fundalului, blend-mode combină imaginea de fundal cu culoarea de fundal într-un stil definit. Opțiunile pe care le puteți utiliza sunt normale, se multiplică, ecranează, suprapun, întunecă, luminează, color-dodge, saturație, culoare și luminozitate.

În sensul acelor de ceasornic din stânga sus: suprapunere, diferență, efecte înlănțuite, luminozitate (faceți clic pe pictograma din dreapta sus pentru a mări imaginea)

Adobe Illustrator descarcă gratuit versiunea completă cu crack Mac
În sensul acelor de ceasornic din stânga sus: suprapunere, diferență, efecte înlănțuite, luminozitate (faceți clic pe pictograma din dreapta sus pentru a mări imaginea)

Să aruncăm o privire la unele dintre opțiuni. În imaginea de mai sus, avem:

Acoperire (stânga sus)
Amestecă atât imaginea de fundal, cât și culoarea împreună pentru a reda întunericul sau luminozitatea zonei de fundal.

Diferență (sus în dreapta)
Scade culorile mai întunecate din imaginea de fundal / culoare din cele mai deschise nuanțe, pentru a da un efect de contrast foarte ridicat.

Luminozitate (stânga jos)
Păstrează culoarea superioară în timp ce se estompează nuanța și saturația fundalului, pentru a oferi un aspect fotografic vechi, spălat.

Codul de utilizat pentru amestecarea fundalului dvs. este destul de simplu - tot ce aveți nevoie este o linie de CSS pentru a îmbina imaginea de fundal cu culoarea de fundal:

background-blend-mode: *blending-option*;

Când vine vorba de aplicarea amestecurilor la imaginea de fundal, nu trebuie să utilizați un singur mod. Puteți înlănțui mai multe moduri de amestecare pentru a crea un efect mai unic (prezentat în colțul din dreapta jos al imaginii de mai sus) utilizând ceva similar cu codul de mai jos:

background-blend-mode: multiply, darken;

Modurile de amestecare sunt acceptate în aproape toate browserele (inclusiv toate versiunile de Microsoft Edge), cu excepțiile fiind toate versiunile de Internet Explorer și Opera Mini.

cum să schimbi fotografia de copertă fără să știe nimeni

Pagina următoare: potrivire obiect, formă exterior, culoare actuală și multe altele

  • 1
  • Două
  • 3
  • 4

Pagina curenta: Repetarea fundalului, raportul de aspect, modul de amestecare

Pagina anterioară Filtre CSS și variabile CSS Pagina următoare Potrivire obiect, formă exterior, culoare curentă și multe altele