Många använder CSS för att justera text, ändra teckensnitt, färg, storlek och mer. Men en sak som många ofta glömmer är att du också kan använda CSS med bilder.
Ändra bilden själv
Med CSS kan du justera hur bilden visas på sidan. Detta kan vara riktigt användbart för att hålla dina sidor konsekventa. Genom att ställa in stilar på alla bilder skapar du ett standardutseende för dina bilder. Några av de saker du kan göra:
- Lägg till en kant eller kontur runt bilderna
- Ta bort den färgade kanten runt länkade bilder
- Justera bredden och / eller höjden på bilderna
- Lägg till en skugga
- Rotera bilden
- Ändra stilar när bilden svävar över
Att ge din bild en ram är ett bra ställe att börja på. Men du bör överväga mer än bara gränsen - tänk på hela bildkanten och justera marginalerna och stoppning också. En bild med en tunn svart kant ser snygg ut, men att lägga till lite vaddering mellan kanten och bilden kan se ännu bättre ut.
Det är en bra idé att länka alltid icke-dekorativa bilder, när det är möjligt. Men när du gör det, kom ihåg att de flesta webbläsare lägger till en färgad kant runt bilden. Även om du använder ovanstående kod för att ändra gränsen kommer länken att åsidosätta den om du inte tar bort eller ändrar gränsen på länken också. För att göra detta bör du använda en CSS-underregel för att ta bort eller ändra gränsen runt länkade bilder:
Du kan också använda CSS för att ändra eller ställa in höjden och bredden på dina bilder. Även om det inte är en bra idé att använda webbläsaren för att justera bildstorlekar på grund av nedladdningshastigheter, blir de mycket bättre på att ändra storlek på bilder så att de fortfarande ser bra ut. Och med CSS kan du ställa in att dina bilder ska ha en standardbredd eller höjd eller till och med ställa in dimensionerna för att vara relativt behållaren.
Kom ihåg att när du ändrar storlek på bilder, för bästa resultat, bör du bara ändra storlek på en dimension - höjden eller bredden. Detta säkerställer att bilden behåller sitt bildförhållande och ser inte så konstigt ut. Ställ in det andra värdet på bil eller lämna ut för att be webbläsaren att hålla bildförhållandet konsekvent.
CSS3 erbjuder en lösning på detta problem med de nya egenskaperna objektpassning och objekt-position. Med dessa egenskaper kommer du att kunna definiera exakt bildhöjd och -bredd och hur bildförhållandet ska hanteras. Detta kan skapa brevlådaeffekter runt dina bilder eller beskära för att få bilden att passa i önskad storlek.
Det finns andra CSS3-egenskaper som stöds väl i de flesta webbläsare som du kan använda för att ändra dina bilder också. Saker som droppskuggor, rundade hörn och transformationer för att rotera, skeva eller flytta dina bilder fungerar just nu i de flesta moderna webbläsare. Du kan sedan använda CSS-övergångar för att göra att bilderna ändras när du svävar över eller klickade på eller strax efter en tidsperiod.
Använda bilder som bakgrunder
CSS gör det enkelt att skapa snygga bakgrunder med dina bilder. Du kan lägg till bakgrunder till hela sidan eller till bara ett specifikt element. Det är enkelt att skapa en bakgrundsbild på sidan med bakgrundsbild fast egendom:
Ändra kropp väljaren till ett specifikt element på sidan för att lägga bakgrunden till bara ett element.
En annan rolig sak du kan göra med bilder är att skapa en bakgrundsbild som inte rullar med resten av sidan - som ett vattenstämpel. Du använder bara stilen bakgrundsbilaga: fast; tillsammans med din bakgrundsbild. Andra alternativ för dina bakgrunder är att få dem att kakla bara horisontellt eller vertikalt med hjälp av bakgrund-upprepa fast egendom. Skriva bakgrundsupprepning: upprepa-x; för att kakla bilden horisontellt och bakgrund-upprepa: upprepa-y; att kakel vertikalt. Och du kan placera din bakgrundsbild med bakgrundsposition fast egendom.
Och CSS3 lägger också till fler stilar för dina bakgrunder. Du kan sträcka dina bilder så att de passar valfri bakgrundsstorlek eller ställa in bakgrundsbilden för att skala med fönsterstorleken. Du kan ändra position och sedan klippa bakgrundsbilden. Men en av de bästa sakerna med CSS3 är att du nu kan lagra flera bakgrundsbilder för att skapa ännu mer invecklade effekter.
HTML5 hjälper stilbilder
De FIGUR element i HTML5 ska placeras runt alla bilder som kan stå ensamma i dokumentet. Ett sätt att tänka på är om bilden kan visas i en bilaga, då ska den vara inne i FIGUR element. Du kan sedan använda det elementet och FIGUR element för att lägga till stilar till dina bilder.