Share
În acest sfat rapid vă voi arăta cum să creați un fundal gradient frumos, utilizând orice imagine și câteva linii de CSS. În plus, voi vorbi despre performanță și vom explica proprietatea de atașament de fundal pe măsură ce mergem împreună.
Locuim într-o lume în care internetul (în mod evident) favorizează vizionările CSS și browser-ul generat de imagini. Imaginile au o rezoluție limitată, ceea ce le face destul de inflexibile. Ele pot influența, de asemenea, performanța unui site web, costând mai multe cereri de server plus lățime de bandă.
Uneori, totuși, ne putem baza pe imagini pentru a ne da viziuni frumoase. Acestea nu trebuie să fie uriașe în ceea ce privește dimensiunea fișierului sau rezoluția și efectul nu va fi compromis în nici un fel chiar și în cazul ecranelor hi-res și retinei. Să aruncăm o privire asupra folosirii unei imagini (în loc de CSS) pentru un fundal de gradient.
Dacă doriți să utilizați, să modificați sau să distribuiți imagini, fără a scoate în evidență câștigurile câștigate cu greu, puteți oricând să vă bazați pe Căutare avansată de imagini Google. În partea de jos a paginii, puteți selecta ce tip de drepturi de utilizare doriți să căutați. În acest caz, voi folosi imaginea care poate fi partajată, modificată și este gratuită.
Deschideți Photoshop și creați un fișier nou. Setați lățimea la 300px, înălțimea la 300px și rezoluția până la 72 PPI.
Acum importați imaginea pe care doriți să o modificați ca fundal gradient și scalați-o proporțional pentru a se potrivi dimensiunii panzei.
Pentru a obține un gradient interesant, faceți clic pe Filter> Blur> Gaussian Blur și setați-l la 40 (în cazul dumneavoastră, puteți crește sau micșora numărul în funcție de imagine). Asta e.
Dacă vă simțiți leneși, puteți, de asemenea, să aruncați o privire la 100 texturi gratuite neclare pe pepsized.com.
După ce ați finalizat acești primii pași, este timpul să salvați fondul de gradient și să reduceți cât mai mult dimensiunea, păstrând în același timp o calitate rezonabilă. Faceți clic pe Fișier> Salvați pentru Web și setați formatul imaginii în JPEG.
Acum pentru compresie. Când modificați calitatea (Maxim, Foarte ridicat etc.), veți vedea o previzualizare a rezultatului final. Mergeți cât de jos puteți, ajustați tastând valoarea reală din câmpul de calitate (80 în acest caz) și setați Blur la 2. Creșterea neclarității va rade un pic mai mult din dimensiunea fișierului și va atenua în continuare orice pixelare pe care o aveți.
Verificați "Progresiv". Acest lucru influențează modul în care imaginea este încărcată în browser. Încărcarea progresivă înseamnă că va fi încărcată în mai multe treceri; mai întâi se încarcă complet în calitate scăzută, apoi un pic mai mare, apoi un pic mai mare, în loc de încărcare linie cu linie.
Faceți clic pe "Salvați" pentru a salva imaginea gradientului. În partea din stânga jos a ferestrei, veți vedea cât de scăzut ați reușit să obțineți dimensiunea imaginii.
După ce v-ați stabilit setările potrivite, de ce să nu salvați aceste setări pentru acces rapid în viitor? Înainte de a apăsa "Salvați", faceți clic pe pictograma de meniu din partea din dreapta sus a ferestrei de dialog Salvați pentru Web și faceți clic pe "Salvați setările".
Chiar dacă am creat o imagine mică, datorită naturii sale neclare, aceasta poate fi efectiv întinsă pe rezoluții mult mai mari, fără a reduce vizibil calitatea. Pentru a încărca această imagine pe fundalul site-ului web, utilizați acest mic fragment CSS:
Accentsconagua
corp marja: 0; fundal: url ('img / bg.jpg'); dimensiunea fundalului: 100% 100%; atașament de fundal: fix; marja: 0 - Acest lucru poate să nu fie necesar dacă ați început să resetați corect CSS-ul pentru început. Elimină spațiul alb din jurul imaginii dvs. sau margini în punctul de vedere al browserului dvs..fundal: url ('bg.jpg') - Calea spre imaginea de fundal. Setați calea în URL-ul ( ").dimensiunea fundalului: 100% 100%; - Aceasta ajustează lățimea și înălțimea imaginii de fundal. Prima valoare este lățimea, a doua este înălțimea. Motivul pentru care am ales procentajul sistemului este acela că rămâne în aceeași dimensiune relativă cu portul de vizualizare de pe fiecare dispozitiv, în funcție de valoarea pe care ați setat-o. 100% va umple portul de vizualizare al oricărui browser.atașament de fundal: fix - Folosind această proprietate, putem specifica dacă fundalul va fi derulat sau fixat. În cazul nostru, dorim ca fundalul nostru să fie stabilit; nu va derula cu conținutul. Voi vorbi despre această proprietate în detaliu mai jos.Un dezavantaj la utilizarea imaginilor este că tragerea fiecăruia în browser adaugă o cerere suplimentară de server. Cantitatea de solicitări paralele pe care le puteți face este limitată, astfel încât în cazul în care se descarcă o mulțime de active, se poate întâmpla apariția unor neregularități. Pentru a obține acest lucru, este posibil să vă convertiți imaginea în Base-64 și să o inserați direct în fișierul dvs. CSS utilizând un URI de date.
Există o mulțime de servicii care îndeplinesc această sarcină pentru dvs., dar auto-proclamat "super simple dataURI instrument" duri.me este mort ușor de utilizat.
Pentru mai multe informații despre modul în care funcționează, consultați introducerea datelor URI de la Chris Brown.
Uitați-vă la imaginea noastră de 300px, întinsă în întregul fereastră de vizualizare. Puteți vedea și demo-ul live.
background-attachment Proprietatea de atașament de fundal este folosită în cea mai mare parte pentru a specifica dacă imaginile de fundal ar trebui să fie defilate sau fixate în raport cu elementul părinte.
Am folosit-o în forma sa cea mai simplă:
corpul background-image: url ("img / imgname.png"); atașament de fundal: fix; De asemenea, acceptă mai multe imagini de fundal, acceptând ele însele mai multe valori separate prin virgulă. În acest exemplu va fi derulată prima imagine de fundal ("image1.png"), cea de-a doua ("image2.png") va fi fixată:
corpul background-image: url ("image1.png"), url ("image2.png"); atașament de fundal: defilați, fixați; Uitați-vă la demo.
Aceasta este o modalitate simplă de a obține gradienți cu aspect rece, ca fundal proaspăt al site-ului, în câteva minute. Nu uitați să cântăriți dacă credeți că merită să utilizați gradienți CSS, dar sper că vă plăcut acest tutorial - multumesc pentru lectură!
