Share
I den här snabba tipsen visar jag dig hur du skapar en snygg snedställd bakgrund med någon bild och ett par rader av CSS. Dessutom talar jag om prestanda och förklarar egenskapen bakom bifogade filer som vi följer.
Vi lever i en värld där webben (förståeligt) gynnar CSS och webbläsargenererade bilder över bilder. Bilderna har begränsad upplösning, vilket gör dem ganska oflexibla. De kan också påverka webbplatsens prestanda och kosta mer serverförfrågningar plus bandbredd.
Ibland kan vi luta oss på bilder för att ge oss fina bilder. De behöver inte vara enorma när det gäller filstorlek eller upplösning, och effekten kommer inte att äventyras mycket, även på högtalare och näthinnan. Låt oss ta en titt på att använda en bild (istället för CSS) för en gradientbakgrund.
Om du vill använda, ändra eller dela bilder utan att skälla ut intjänade dollar kan du alltid lita på Google Advanced Image Search. Nederst på sidan kan du välja vilken typ av användningsrättigheter du vill söka. I det här fallet använder jag bild som kan delas, ändras och är fri att använda.
Öppna Photoshop och skapa en ny fil. Ställ in bredd till 300px, höjd till 300px och upplösningen till 72 PPI.
Importera nu bilden som du vill ändra som en gradientbakgrund, och skala den proportionellt så att den passar in i dukstorleken.
För att få en snygg lutning, klicka på Filter> Blur> Gaussian Blur och ställ in den till 40 (i ditt fall kan du öka eller minska antalet beroende på din bild). Det är allt.
Om du känner dig lat kan du också ta en titt på 100 fri suddiga texturer på pepsized.com.
Efter att ha slutfört de första stegen är det dags att spara vår bakgrundsgrad och att minska storleken så mycket vi kan, samtidigt som vi behåller rimlig kvalitet. Klicka på Arkiv> Spara för webben och ställ bildformatet till JPEG.
Nu för komprimeringen. När du ändrar kvaliteten (Maximum, Very High etc) får du en förhandsgranskning av det slutliga resultatet. Gå så lågt som möjligt, finjustera genom att skriva in det faktiska värdet i kvalitetsfältet (80 i det här fallet) och ställa in Blur till 2. Att öka suddningen kommer att raka lite mer från filstorleken och ytterligare mjuka alla pixeleringar du har.
Kontrollera "Progressiv". Detta påverkar hur bilden laddas i webbläsaren. Progressiv laddning innebär att den laddas i flera pass den laddas först helt i låg kvalitet, då lite högre, då lite högre, istället för att ladda linje för rad.
Klicka på "Spara" för att spara din gradientbild. Nederst till vänster i fönstret ser du hur lågt du lyckats få din bildstorlek.
När du väl har avgjort de inställningar du tycker är lämpliga, varför spara inte dessa inställningar för snabb åtkomst i framtiden? Innan du slår "Spara" klickar du på den lilla menyikonen längst upp till höger i dialogrutan Spara för webben och klickar på "Spara inställningar".
Även om vi har skapat en liten bild, kan den på grund av sin suddiga natur effektivt sträckas över mycket större upplösningar utan att synligt sänka kvaliteten. För att ladda den här bilden på din webbplats, använd den här lilla CSS-koden:
Accentsconagua
kropp marginal: 0; bakgrund: url ('img / bg.jpg'); bakgrundsstorlek: 100% 100%; bakgrundsbeslut: fast; marginal: 0 - Det kanske inte är nödvändigt om du har korrekt återställt din CSS till att börja med. Den tar bort whitespace runt din bild eller kanter i din webbläsares synvinkel.bakgrund: url ('bg.jpg') - Vägen till din bakgrundsbild. Ställ in sökvägen inom url ( ").bakgrundsstorlek: 100% 100%; - Detta justerar bredden och höjden på din bakgrundsbild. Det första värdet är bredd, den andra är höjd. Anledningen till att jag har valt procentuellt system är att det förblir samma relativa storlek för visningsporten på varje enhet beroende på det värde du har ställt in. 100% fyller visningsporten för vilken webbläsare som helst.bakgrundsfästning: fast - Med den här egenskapen kan vi ange om bakgrunden ska rullas eller fixas. I vårt fall vill vi att vår bakgrund ska lösas. det rullar inte med innehållet. Jag kommer att prata om den här egenskapen i mer djup nedan.En nackdel med att använda bilder är att dra varje i webbläsaren lägger till en extra serverförfrågan. Mängden parallella förfrågningar man kan göra är begränsad, så flaskhalsning kan uppstå i de fall där massor av tillgångar laddas ner. För att komma runt detta är det möjligt att konvertera din bild till Base-64 och infoga den direkt i din CSS-fil med en Data-URI.
Det finns massor av tjänster som utför den här uppgiften för dig, men det självutnämnda "super simple dataURI-verktyget" duri.me är dött enkelt att använda.
För mer information om hur detta fungerar, kolla in Chris Browns introduktionsdata URI.
Ta en titt på vår lilla 300px-bild, sträckt över hela visningsporten. Du kan också kolla in live demo.
background-fastsättning Egenskapen för bakgrundsfästning används oftast för att ange om bakgrundsbilder ska bläddra eller fixas i förhållande till deras moderelement.
Vi har använt det i sin enklaste form:
kropp bakgrundsbild: url ("img / imgname.png"); bakgrundsbeslut: fast; Den stöder också flera bakgrundsbilder, accepterar flera kommaseparerade värden själv. I det här exemplet rullar den första bakgrundsbilden ("image1.png"), den andra ("image2.png") kommer att fixas:
kropp bakgrundsbild: url ("image1.png"), url ("image2.png"); Bakgrundsbeslut: Rull, fast; Ta en titt på demo.
Detta är ett enkelt sätt att uppnå snygga gradienter som en ny webbplats, på några minuter. Glöm inte att väga upp om du tycker att det är värt att använda CSS-gradienter istället, men jag hoppas att du gillade den här handledningen - tack för att du läst!
