Share
I denne Quick Tip vil jeg vise deg hvordan du lager en fin utseende gradient bakgrunn, ved hjelp av et hvilket som helst bilde og et par linjer med CSS. I tillegg snakker jeg om ytelse og forklarer egenskapen til bakgrunnsvedlegg som vi går med.
Vi lever i en verden der nettet (forståelig) favoriserer CSS og nettleser-genererte bilder over bilder. Bilder har begrenset oppløsning, noe som gjør dem ganske ufleksible. De kan også påvirke et nettsteds ytelse, og koster flere serverforespørsler pluss båndbredde.
Noen ganger skjønt, vi kan lene på bilder for å gi oss flotte bilder. De trenger ikke å være store når det gjelder filstørrelse eller oppløsning, og effekten vil ikke bli alvorlig kompromittert, selv på høyden og netthinnen. La oss ta en titt på å bruke et bilde (i stedet for CSS) for en gradientbakgrunn.
Hvis du vil bruke, endre eller dele bilder uten å skille ut hardt opptjente dollar, kan du alltid stole på Google Advanced Image Search. Nederst på siden kan du velge hvilken type bruksrettigheter du vil søke. I dette tilfellet vil jeg bruke bilde som kan deles, endres og er gratis å bruke.
Åpne Photoshop og opprett en ny fil. Angi bredde til 300px, høyde til 300px og oppløsningen til 72 PPI.
Importer nå bildet som du vil endre som en gradientbakgrunn, og skala den proporsjonalt for å passe på lerretets størrelse.
For å få en kul seriens gradient, klikk på Filter> Blur> Gaussian Blur, og sett den til 40 (i ditt tilfelle kan du øke eller redusere nummeret avhengig av bildet ditt). Det er det.
Hvis du føler deg lat, kan du også se på 100 Free Blurry Textures på pepsized.com.
Etter at du har fullført de første trinnene, er det på tide å lagre vår gradientbakgrunn, og å redusere størrelsen så mye som mulig, samtidig som du beholder rimelig kvalitet. Klikk på Arkiv> Lagre for web, og sett bildformatet til JPEG.
Nå for kompresjonen. Når du endrer kvaliteten (Maksimum, Meget høy etc), får du en forhåndsvisning av det endelige resultatet. Gå så lavt som mulig, finjuster ved å skrive inn den faktiske verdien i kvalitetsfeltet (80 i dette tilfellet) og sett Blur til 2. Øke uskarpheten vil barbere litt mer fra filstørrelsen og ytterligere mykere hvilken pixelasjon du har.
Sjekk "Progressiv". Dette påvirker hvordan bildet lastes inn i nettleseren. Progressiv lasting betyr at den vil bli lastet inn i flere passeringer; Den lastes først helt i lav kvalitet, så litt høyere, så litt høyere, i stedet for å laste linje for linje.
Klikk på "Lagre" for å lagre gradientbildet ditt. Nederst til venstre i vinduet ser du hvor lavt du har klart å få bildestørrelsen din.
Når du har avgjort på innstillingene du finner passende, hvorfor ikke lagre disse innstillingene for rask tilgang i fremtiden? Før du klikker "Lagre", klikk på det lille menyikonet øverst til høyre i dialogboksen Lagre for web, og klikk på "Lagre innstillinger".
Selv om vi har opprettet et lite bilde, på grunn av sin uklare natur, kan den effektivt strekkes over mye større oppløsninger uten å synlig redusere kvaliteten. For å laste dette bildet på nettstedet ditt, bruk denne lille CSS-koden:
Accentsconagua
kropp margin: 0; bakgrunn: url ('img / bg.jpg'); bakgrunnsstørrelse: 100% 100%; bakgrunnsbeslutning: fast; margin: 0 - Dette kan ikke være nødvendig hvis du har tilbakestilt ditt CSS på riktig måte til å begynne med. Det fjerner hvitt plass rundt bildet, eller kanter i visningen av nettleseren din.bakgrunn: url ('bg.jpg') - Sti til bakgrunnsbildet ditt. Sett banen i url ( ").bakgrunnsstørrelse: 100% 100%; - Dette justerer bredden og høyden på bakgrunnsbildet ditt. Den første verdien er bredde, den andre er høyde. Grunnen til at jeg har valgt prosentvis system er fordi den forblir den samme relative størrelsen til visningsporten på hver enhet avhengig av verdien du har satt. 100% vil fylle visningsporten til hvilken som helst nettleser.bakgrunnsbeslutning: fast - Ved hjelp av denne egenskapen kan vi spesifisere om bakgrunnen skal rulles eller fastsettes. I vårt tilfelle ønsker vi at vår bakgrunn skal løses; det vil ikke rulle med innholdet. Jeg vil snakke om denne eiendommen i dybden under.En ulempe ved å bruke bilder er at å trekke hver enkelt i nettleseren legger til en ekstra serverforespørsel. Antallet parallelle forespørsler man kan gjøre er begrenset, slik at flaskehalsing kan forekomme i tilfeller hvor mange eiendeler lastes ned. For å komme rundt dette, er det mulig å konvertere bildet til Base-64 og sette det direkte inn i CSS-filen din ved hjelp av en Data-URI.
Det er mange tjenester som utfører denne oppgaven for deg, men det selvutnevnte "super simple dataURI-verktøyet" duri.me er dødt lett å bruke.
For mer informasjon om hvordan dette fungerer, sjekk ut Chris Browns introduksjonsdata URIer.
Ta en titt på vårt lille 300px-bilde, strekt over hele visningsporten. Du kan også sjekke ut live demoen.
Bakgrunnen-feste Egenskapen for bakgrunnsvedlegg brukes for det meste til å angi om bakgrunnsbilder skal rulle eller bli løst i forhold til foreldreelementet.
Vi har brukt den i sin enkleste form:
kropp bakgrunnsbilde: url ("img / imgname.png"); bakgrunnsbeslutning: fast; Den støtter også flere bakgrunnsbilder, og aksepterer flere kommaseparerte verdier selv. I dette eksemplet vil det første bakgrunnsbildet ("image1.png") rulle, det andre ("image2.png") vil bli løst:
kropp bakgrunnsbilde: url ("image1.png"), url ("image2.png"); Bakgrunnsbeslutning: Rull, fast; Ta en titt på demoen.
Dette er en enkel måte å oppnå kule utseendegradienter som en ny nettsidebakgrunn, i minutter. Ikke glem å veie om du synes det er verdt å bruke CSS-gradienter i stedet, men jeg håper du likte denne opplæringen - takk for å lese!
