Veel mensen gebruiken CSS om tekst aan te passen, het lettertype, de kleur, de grootte en meer te wijzigen. Maar een ding dat veel mensen vaak vergeten, is dat je CSS ook met afbeeldingen kunt gebruiken.
De afbeelding zelf wijzigen
Met CSS kunt u aanpassen hoe de afbeelding op de pagina wordt weergegeven. Dit kan erg handig zijn om uw pagina's consistent te houden. Door stijlen op alle afbeeldingen in te stellen, creëer je een standaard look voor je afbeeldingen. Enkele dingen die u kunt doen:
- Een rand of omtrek rond de afbeeldingen toevoegen
- Verwijder de gekleurde rand rond gekoppelde afbeeldingen
- De breedte en/of hoogte van de afbeeldingen aanpassen
- Een slagschaduw toevoegen
- Draai de afbeelding
- De stijlen wijzigen wanneer de afbeelding wordt bewogen
Het geven van een rand aan uw afbeelding is een geweldige plek om te beginnen. Maar u moet meer overwegen dan alleen de rand - denk aan de hele rand van uw afbeelding en pas de marges en opvulling ook. Een afbeelding met een dunne zwarte rand ziet er mooi uit, maar het toevoegen van wat opvulling tussen de rand en de afbeelding kan er nog beter uitzien.
Het is een goed idee om link altijd niet-decoratieve afbeeldingen, wanneer mogelijk. Maar als u dat doet, onthoud dan dat de meeste browsers een gekleurde rand rond de afbeelding toevoegen. Zelfs als u de bovenstaande code gebruikt om de rand te wijzigen, overschrijft de link dat, tenzij u ook de rand op de link verwijdert of wijzigt. Om dit te doen, moet u een onderliggende CSS-regel gebruiken om de rand rond gekoppelde afbeeldingen te verwijderen of te wijzigen:
U kunt ook CSS gebruiken om de hoogte en breedte van uw afbeeldingen te wijzigen of in te stellen. Hoewel het geen goed idee is om de browser te gebruiken om afbeeldingsgroottes aan te passen vanwege de downloadsnelheden, worden ze veel beter in het aanpassen van het formaat van afbeeldingen zodat ze er nog steeds goed uitzien. En met CSS kunt u uw afbeeldingen instellen op een standaardbreedte of -hoogte of zelfs de afmetingen instellen om relatief aan de container te zijn.
Onthoud dat wanneer u het formaat van afbeeldingen wijzigt, u voor de beste resultaten slechts één dimensie moet wijzigen: de hoogte of de breedte. Dit zorgt ervoor dat het beeld zijn beeldverhouding behoudt en er dus niet vreemd uitziet. Stel de andere waarde in op auto of laat het weg om de browser te vertellen om de beeldverhouding consistent te houden.
CSS3 biedt een oplossing voor dit probleem met de nieuwe eigenschappen object-fit en object-positie. Met deze eigenschappen kunt u de exacte hoogte en breedte van de afbeelding definiëren en hoe met de aspectverhouding moet worden omgegaan. Dit kan letterbox-effecten rond uw afbeeldingen creëren of bijsnijden om de afbeelding in het vereiste formaat te laten passen.
Er zijn andere CSS3-eigenschappen die goed worden ondersteund in de meeste browsers en die u ook kunt gebruiken om uw afbeeldingen aan te passen. Dingen zoals slagschaduwen, afgeronde hoeken en transformaties om uw afbeeldingen te roteren, scheeftrekken of verplaatsen, werken allemaal nu in de meeste moderne browsers. U kunt dan CSS-overgangen gebruiken om de afbeeldingen te laten veranderen wanneer u erover zweeft, erop klikt of net na een bepaalde tijd.
Afbeeldingen als achtergrond gebruiken
CSS maakt het gemakkelijk om mooie achtergronden te maken met je afbeeldingen. Jij kan achtergronden toevoegen aan de hele pagina of slechts een specifiek element. Het is gemakkelijk om een achtergrondafbeelding op de pagina te maken met de achtergrond afbeelding eigendom:
Verander de lichaam selector naar een specifiek element op de pagina om de achtergrond op slechts één element te plaatsen.
Een ander leuk ding dat je met afbeeldingen kunt doen, is een achtergrondafbeelding maken die niet meeschuift met de rest van de pagina, zoals een watermerk. Je gebruikt gewoon de stijl achtergrond-bijlage: vast; samen met je achtergrondafbeelding. Andere opties voor uw achtergronden zijn onder meer om ze horizontaal of verticaal te laten betegelen met behulp van de achtergrond herhaling eigendom. Schrijven achtergrond-herhaling: herhaal-x; om de afbeelding horizontaal te plaatsen en achtergrond-herhaling: herhaal-y; verticaal te betegelen. En u kunt uw achtergrondafbeelding positioneren met de achtergrondpositie eigendom.
En CSS3 voegt ook meer stijlen toe voor uw achtergronden. U kunt uw afbeeldingen uitrekken zodat ze op de achtergrond van elk formaat passen of u kunt de achtergrondafbeelding instellen op schaal met de venstergrootte. U kunt de positie wijzigen en vervolgens de achtergrondafbeelding knippen. Maar een van de beste dingen van CSS3 is dat je nu meerdere achtergrondafbeeldingen kunt stapelen om nog ingewikkeldere effecten te creëren.
HTML5 helpt bij het opmaken van afbeeldingen
De FIGUUR element in HTML5 moet worden geplaatst rond alle afbeeldingen die op zichzelf kunnen staan in het document. Een manier om erover na te denken is als de afbeelding in een appendix zou kunnen verschijnen, dan zou deze in de moeten staan FIGUUR element. U kunt dan dat element gebruiken en de FIGCAPTION element om stijlen aan uw afbeeldingen toe te voegen.