Fons i vores

This translation is incomplete. Please help translate this article from English

En aquesta lliçó, veurem algunes de les coses creatives que pots fer amb fons i vores al CSS. Des d’afegir degradats, imatges de fons i arrodonir cantonades, els fons i i les vores són la resposta a moltes preguntes d’estil en CSS.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Aprendre a estilitzar el fons i la vora de les caixes.

Aplicar estil als fons en CSS

La propietat CSS background és una propietat abreviada per una sèrie de propietats de fons que trobarem en aquesta lliçó. Si descobreixes una propietat de fons complexa en un full d’estil, pot semblar una mica difícil d’entendre ja que es poden transmetre 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; 
} 

Tornarem a l’objectiu de com funcionen les propietats abreviades més tard al tutorial, però primer fem un cop d’ull a les diferents coses que pots fer amb els fons de CSS, a través de les propietats de fons individuals.

Els colors de fons

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

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

Juga amb ells fent servir qualsevol valor <color> disponible.

Les imatges de fons

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

Aquest exemple mostra dues coses sobre les imatges de fons. De manera predeterminada, la imatge gran no es redueix per adaptar-se a la caixa, de manera que només veiem un petit racó, mentre que la imatge petita es mostra en mosaic per omplir la caixa. En aquest cas, la imatge real és només una estrella.

Si especifiques un color de fons a més d'una imatge de fons, aleshores la imatge es mostra a sobre. Prova d'afegir una propietat background-color a l'exemple de dalt per veure-ho en acció.

El control de background-repeat

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

  • no-repeat: atura la repetició del fons.
  • repeat-x: repeteix horitzontalment.
  • repeat-y: repeteix verticalment.
  • repeat: el valor per defecte; repeteix en ambdues direccions.

Prova aquests valors a l'exemple següent. Hem establert el valor no-repeat, així que només veuràs una estrella. Provar els diferents valors repeat-x i repeat-y per veure quins són els seus efectes.

Dimensionar la imatge de fons

A l'exemple anterior, tenim una imatge gran que ha acabat essent retallada ja que é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 dimensionar la imatge perquè s'ajusti al fons.

També pots utilitzar paraules clau:

  • cover: el navegador farà que la imatge sigui prou gran perquè cobreixi completament l’àrea de la caixa, mantenint la proporció d’aspecte. En aquest cas, és probable que algunes de les imatges acabin fora de la caixa.
  • contain: el navegador farà que la imatge sigui de la mida adequada per adaptar-se 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 a la de la caixa.

A 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. Pots veure que això ha distorsionat la imatge.

Prova el següent.

  • Canvia les unitats de longitud que s’utilitzen per modificar la mida del fons.
  • Elimina les unitats de longitud i mira 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 del fons background-repeat per repetir la imatge.

El posicionament de la imatge de fons

La propietat background-position et permet triar la posició en què apareix la imatge de fons a la caixa a la qual s'aplica. Utilitza un sistema de coordenades en el qual es troba la part superior esquerra de la caixa (0,0), i la caixa es situa al llarg dels eixos horitzontal (x) i vertical ((y).

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

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

Pots utilitzar paraules clau com top i right (busca les altres a la pàgina background-image):

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

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 indicar una distància de certs cantons de la caixa; en aquest cas, la unitat de longitud és una compensació del valor que la precedeix. Així doncs, al CSS de sota, estem posicionant el fons a 20px de la part superior i 10px de la dreta:

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

Utilitza l'exemple següent per jugar amb aquests valors i moure l'estrella per dins de la caixa.

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

Fons degradat

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

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

Prova alguns degradats diferents a l'exemple següent. A les dues caixes, respectivament, tenim un degradat lineal que s’estén sobre tota la caixa i un degradat radial amb una mida fixada, que per tant es repeteix.

Múltiples imatges de fons

També és possible tenir diverses imatges de fons: especifica diversos valors background-image en un únic valor de propietat, separant cadascuna amb una coma.

En fer-ho, pots acabar amb imatges de fons que es superposen entre si. Els fons es capturaran amb la darrera imatge de fons enumerada a la part inferior de la pila i cada imatge anterior s’apilarà a la part superior de la que la segueix al codi.

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

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 diferents propietats coincidirà amb els valors en la mateixa posició en les altres propietats. A sobre, per exemple, el valor de image1 per a la propietat background-repeat serà no-repeat. Tanmateix, què passa quan diferents propietats tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: a l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’aplicaran a les dues primeres imatges, i tornaran a tornar a rodar de nou: a image3 se li donarà el valor de primera posició i a image4 se li proporcionarà el valor de segona posició.

Juguem. A l'exemple següent hem inclòs dues imatges. Per demostrar l'ordre d'apilament, intenta canviar quina imatge de fons apareix primer a la llista. O jugar amb les altres propietats per canviar els valors de posició, mida, o la repetició.

Antecedents de fixació

Una altra opció que tenim disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla mitjançant 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 desplaci quan es desplaça el contingut de la pàgina o de l'element. Romandrà 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 no fa realment el que vols en molts casos. El valor local fixa el fons a l'element en què està configurat, de manera que quan es desplaça l'element, el fons es desplaça amb ell.

La propietat background-attachment només funciona quan hi ha contingut per desplaçar-se, de manera que hem fet una demostració per demostrar les diferències entre els tres valors: mira-ho a background-attachment.html (mira també el codi font aquí).

Fer servir la propietat abreviada background

Com hem esmentat al començament d'aquesta lliçó, sovint veuràs fons que s'especifiquen mitjançant la propietat background. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

Si fas servir diversos antecedents, has d’especificar totes les propietats del primer fons, i després afegir el següent fons després d’una coma. A l'exemple següent tenim 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.

Hi ha algunes regles que cal seguir quan s’escriuen valors de drecera d’imatges de fons, per exemple:

  • Un fons de color només es pot especificar 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%.

Mira la pàgina de MDN de background per veure totes les consideracions.

Consideracions d’accessibilitat amb antecedents

Quan col·loques un text sobre una imatge o un color de fons, has de tenir cura que tingui prou contrast perquè el text sigui llegible pels teus usuaris. Si especifiques una imatge i el text se situa sobre d'aquesta imatge, 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 imatges de fons, per la qual cosa haurien de ser purament de decoració; qualsevol contingut important hauria de formar part de la pàgina HTML i no estar contingut en segon pla.

Vores

En conèixer el model de caixa, vam descobrir com afecten les vores a la mida de la caixa. En aquesta lliçó veurem com utilitzar 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 border:

.box { 
  border: 1px solid black; 
} 

O bé podem orientar una vora de la caixa, per exemple:

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

Les propietats individuals d'aquestes abreviatures serien:

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

I per a les no abreviades:

.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 mapejades 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 a la propera lliçó, que inclou el maneig de diferents indicacions de text.

Hi ha una gran varietat d'estils que es poden utilitzar per a les vores A 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 mitjançant 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, per fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

.box { 
  border-radius: 10px; 
} 

O perquè 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 per fer-lo diferent. Pots jugar amb els valors per canviar les cantonades. Mira la pàgina de propietats de border-radius per veure les opcions de sintaxi disponibles.

Jugar amb els fons i les vores

Per provar els teus nous coneixements, intenta crear el que trobaràs a continuació mitjançant fons i vores, utilitzant l'exemple següent com a punt de partida:

  1. Dona a la caixa un límit sòlid negre de 5px, amb cantonades arrodonides de 10px.
  2. Afegeix una imatge de fons (fes servir l’URL balloons.jpg) i dimensiona-la perquè cobreixi 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ò tracta de descobrir-ho per tu mateix!

Resum

En aquest articles hem descobert forces conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Explora les diferents 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 per jugar amb i millorar els teus coneixements.

A la propera lliçó 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. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i elements de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS