Fons i vores

En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu: Aprendre a aplicar estil al fons i la vora de les caixes.

Aplicar estil als fons amb CSS

La propietat CSS background és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.

Els colors de fons

La propietat background-color defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<color>) vàlid. Un color de fons s'estén per sota del contingut i de l'àrea de farciment de la caixa.

En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element <span>.

Juga a fer servir qualsevol valor de <color> disponible.

Les imatges de fons

La propietat background-image permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.

Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.

Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat background-color a l'exemple de dalt i observa-ho en acció.

Control amb la propietat background-repeat

La propietat background-repeat s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:

  • no-repeat: evita que el fons es repeteixi.
  • repeat-x: repeteix horitzontalment.
  • repeat-y: repeteix verticalment.
  • repeat: el valor per defecte; repeteix en totes dues direccions.

Prova aquests valors en l'exemple següent. Hem establert la propietat al valor no-repeat, de manera que només veuràs una estrella. Prova els diferents valors repeat-x i repeat-y i observa’n els efectes.

Les mides de la imatge de fons

En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat background-size, que pot prendre valors de longitud o percentatge, per a dimensionar la imatge i que s'ajusti al fons.

També pots utilitzar paraules clau:

  • cover: el navegador ajusta la imatge perquè cobreixi tota l’àrea de la caixa, sense canviar-ne la relació d’aspecte. En aquest cas una part de la imatge pot acabar fora de la caixa.
  • contain: el navegador ajusta la imatge a la mida adequada perquè s’adapti a la caixa. En aquest cas, pots acabar amb buits a banda i banda o a la part superior i inferior de la imatge, si la relació d'aspecte de la imatge és diferent de la de la caixa.

En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.

Fes la prova següent.

  • Canvia les unitats de longitud que s’hi utilitzen i modifica’n la mida del fons.
  • Elimina les unitats de longitud i observa què passa quan fas servir background-size: cover o background-size: contain.
  • Si la imatge és més petita que la caixa, pots canviar el valor de background-repeat perquè la imatge es repeteixi.

La ubicació de la imatge de fons

La propietat background-position et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el (0,0) és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (x) i vertical ((y).

Nota: El valor per defecte de background-position és (0,0).

Els valors de background-position més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.

També pots utilitzar paraules clau com top i right (busca la resta de possibilitats en la pàgina sobre la propietat background-image):

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top center; 
} 

I longituds i percentatges:

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: 20px 10%; 
} 

També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top 20px right 10px; 
} 

Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.

Nota: background-position és una propietat abreviada de background-position-x i background-position-y, que et permeten establir els diferents valors de posició de l'eix per separat.

Fons degradat

Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat background-image.

Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <gradient> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, com aquest. Pots crear un degradat i copiar i enganxar el codi font que el genera.

Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.

Múltiples imatges de fons

També és possible posar més d’una imatge de fons: especifica amb una sola propietat background-image els diversos valors, separats cadascun per una coma.

En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.

Nota: Els degradats es poden barrejar feliçment amb imatges de fons comunes.

Les altres propietats background-* també poden tenir valors separats per comes, de la mateixa manera que background-image:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. A sobre, per exemple, el valor per a la propietat background-repeat d’image1 és no-repeat. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a image3, i el valor de segona posició, a image4.

Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.

Ancoratge del fons

Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat background-attachment, que pot prendre els valors següents:

  • scroll: Fa que el fons de l'element es desplaci quan es desplaça la pàgina. Si el contingut de l'element es desplaça, el fons no es mou. En efecte, el fons està fixat a la mateixa posició de la pàgina, de manera que es desplaça a mesura que la pàgina es desplaça.
  • fixed: Fa que el fons d'un element es fixi a la finestra de visualització, de manera que no es desplaça quan es desplaça el contingut de la pàgina o de l'element. Roman sempre en la mateixa posició a la pantalla.
  • local: Aquest valor es va afegir més endavant (només és compatible amb Internet Explorer 9+, mentre que els altres són compatibles amb IE4+) perquè el valor scroll és més aviat confús i en molts casos no fa realment el que vols. El valor local fixa el fons a l'element en què està configurat, de manera que quan l'element es desplaça, el fons es desplaça amb ell.

La propietat background-attachment només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a background-attachment.html (també en pots consultar el codi font aquí).

Ús de la propietat abreviada background

Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat background. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb no-repeat i una posició, i després un color.

Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:

  • Només es pot especificar un fons de color després de la coma final.
  • El valor background-size només es pot incloure immediatament després de background-position, separat amb el caràcter «/», així: center/80%.

Consulta la pàgina sobre background de MDN per a veure’n totes les possibilitats.

Consideracions d’accessibilitat relatives als fons

Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.

Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.

Vores

En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.

Podem establir una vora per als quatre costats d'una caixa amb la propietat border:

.box { 
  border: 1px solid black; 
} 

O podem establir una sola vora de la caixa, per exemple:

.box { 
  border-top: 1px solid black; 
} 

Cadascuna d’aquestes propietats abreviades seria:

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

I per a les no abreviades seria:

.box { 
  border-top-width: 1px; 
  border-top-style: solid; 
  border-top-color: black; 
} 

Nota: Aquestes propietats de la part superior, dreta, inferior i esquerra també tenen mapades propietats lògiques relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou el tractament del text en diverses direccions.

Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.

Les cantonades arrodonides

L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat border-radius i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.

Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

.box { 
  border-radius: 10px; 
} 

O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:

.box { 
  border-top-right-radius: 1em 10%; 
} 

Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de border-radius i esbrina les opcions de sintaxi disponibles.

Juga amb els fons i les vores

Posa a prova aquests coneixements nous i intenta crear el que trobaràs a continuació amb fons i vores; fes servir l'exemple següent com a punt de partida:

  1. Proporciona a la caixa una vora sòlida negra de 5px i cantonades arrodonides de 10px.
  2. Afegeix una imatge de fons (fes servir l’URL balloons.jpg) i dimensiona-la perquè cobreixi tota la caixa.
  3. Dona a <h2> un color de fons negre semitransparent i fes que el text sigui blanc.

Nota: Dona un cop d'ull a la solució aquí, però primer intenta fer-ho tu mateix!

Resum

En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.

En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?

En aquest mòdul

  1. La cascada i l'herència
  2. Els selectors CSS
  3. El model de caixes
  4. Fons i vores
  5. El tractament del text en diverses direccions
  6. El desbordament de continguts
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, mèdia i elements de formulari
  10. Aplicar estil a les taules
  11. Depura el teu CSS
  12. Organitza el teu CSS