MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Learning the Web

Efectes avançats de la caixa

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

Aquest article actua com una caixa de trucs, que proporciona una introducció a algunes de les característiques avançades disponibles per a caixes d'estil que no encaixen a les altres categories anteriors - com ara ombres de caixa, modes de combinació i filtres.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu: Obtenir una idea sobre com utilitzar els efectes avançats de la caixa i conèixer algunes de les eines d'estil emergents que apareixen al llenguatge CSS.

Ombres de caixa

De tornada al nostre mòdul Estilitzar text module, vam mirar la propietat text-shadow, que permet aplicar una o més ombres al text d'un element. Bé, existeix una propietat equivalent per les caixes - box-shadow que permet aplicar una o més ombres a una caixa de l'element actual. Igual que les ombres de text, les ombres de caixa són bastant ben suportades en tots els navegadors, però només a IE9+. Els usuaris de versions antigues d'IE podrien haver de fer front a no veure cap ombra, així que només cal que proveu els vostres dissenys per assegurar-vos que el vostre contingut sigui llegible sense elles.

Podeu trobar els exemples d'aquesta secció a box-shadow.html (vegeu el codi font també).

Una ombra de caixa senzilla

Vegeu un exemple senzill per començar les coses. Primer, algun HTML:

<article class="simple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>

Ara el CSS:

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

Això ens dóna el següent resultat:

Veureu que tenim quatre elements en el valor de la propietat box-shadow:

  1. El primer valor de longitud és el desplaçament horitzontal (horizontal offset) - la distància a la dreta que l'ombra es desplaça des de la caixa original (o a l'esquerra, si el valor és negatiu).
  2. El segon valor de longitud és el desplaçament vertical (vertical offset) - la distància cap avall que l'ombra es desplaça des de la caixa original (o cap amunt, si el valor és negatiu).
  3. El tercer valor de longitud és el radi de difuminat (blur radius) - la quantitat de difuminació aplicada a l'ombra.
  4. El valor de color és el color base (base color) de l'ombra.

Podeu utilitzar qualsevol longitud i unitats de color que tingui sentit fer-ho per definir aquests valors.

Múltiples ombres de caixa

També podeu especificar múltiples ombres de caixa en una única declaració box-shadow, separant-les amb comes:

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}

Ara obtenim aquest resultat:

Hem fet alguna cosa divertida, aquí, creant una caixa elevada amb diverses capes de colors, però podeu utilitzar-la de la manera que vulgueu, per exemple, per crear un aspecte més realista amb ombres basades en múltiples fonts de llum.

Altres característiques d'ombra de caixa

A diferència de text-shadow, box-shadow té una paraula clau disponible inset - posar-la al principi d'una declaració ombra fa que es converteixi en una ombra interior, més aviat, que una ombra exterior. Fem un cop d'ull i vegem què volem dir.

En primer lloc, anirem amb un codi HTML diferent per a aquest exemple:

<button>Press me!</button>
button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

Això ens dóna el següent resultat:

Aquí hem configurat un estil de botó juntament amb els estats focus/hover/active. El botó té una senzilla ombra de caixa negre que s'adapta a ella de manera predeterminada, a més d'un parell d'ombres d'inserció, una de llum i una altra fosca, situades a les cantonades oposades del botó per donar-li un bon efecte d'ombrejat.

Quan es prem el botó, l'estat active fa que es canviï la primera ombra de la caixa per una ombra d'inserció molt fosca, donant l'aparença del botó que es prem.

Nota: Hi ha un altre element que es pot establir en el valor de box-shadow  - un altre valor de longitud es pot configurar de manera opcional just abans del valor del color, que és un radi de dispersió (spread radius). Si s'estableix, això fa que l'ombra sigui més gran que la caixa original. No és molt utilitzat, però val la pena esmentar.

Filtres

Els filtres CSS proporcionen una manera d'aplicar filtres a un element de la mateixa manera que podeu aplicar un filtre a una capa d'un paquet gràfic com Photoshop. Hi ha diverses opcions disponibles, i podeu llegir-les totes amb més detall a la pàgina de referència filtre. En aquesta secció, us explicarem la sintaxi i us mostrarem lo divertit que poden ser els resultats.

Bàsicament, un filtre es pot aplicar a qualsevol element, bloc o en línia - simplement utilitzeu la propietat filter i li proporcioneu un valor d'una funció de filtre en particular. Algunes de les opcions de filtre, disponibles, fan coses molt similars a altres funcions CSS, per exemple, drop-shadow() funciona d'una manera molt similar i dóna un efecte similar a box-shadow o text-shadow. La cosa realment agradable sobre els filtres és que treballen sobre les formes exactes del contingut dins de la caixa, no només la caixa en si mateix com un gran tros, que pot semblar més bonic, encara que no sempre pot ser el que desitjeu. Vegem un exemple senzill per il·lustrar el que volem dir:

En primer lloc, un senzill HTML:

<p class="filter">Filter</p>

<p class="box-shadow">Box shadow</p>

I ara, alguns CSS per aplicar una ombra a cadascuna:

p {
  margin: 1rem auto;
  padding: 20px;
  width: 100px;
  border: 5px dashed red;
}

.filter {
  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
}

Això ens dóna el següent resultat:

Com podeu veure, el filtre drop-shadow segueix la forma exacta del text i els guions de la vora. L'ombra de la caixa només segueix el quadrat de la caixa.

Algunes altres coses a destacar

  • Els filtres són molt nous - són compatibles amb la majoria de navegadors moderns, fins i tot Microsoft Edge, però no són compatibles en absolut amb Internet Explorer. Si utilitzeu filtres en els vostres dissenys, us heu de garantir que el vostre contingut es pugui utilitzar sense els filtres.
  • Veureu que hem inclòs una versió de la propietat filtre amb -webkit- prefixada. Es diu Vendor Prefix, i és utilitzada de vegades per un navegador abans que finalitzi la implementació d'una nova característica, per suportar aquesta característica i experimentar amb ella sense coincidir amb la versió no prefixada. Els Vendor prefixes mai van ser destinats a ser utilitzats pels desenvolupadors web, però s'utilitzen de vegades a les pàgines de producció si realment es desitgen les característiques experimentals. En aquest cas, actualment, la versió -webkit- de la propietat és necessària per al suport de Chrome/Safari/ Opera, mentre que Edge i Firefox utilitzen la versió final, no prefixada.

Nota: Si decidiu utilitzar els prefixos en el vostre codi, assegureu-vos d'incloure tots els prefixos requerits, així com la versió no prefixada, de manera que el nombre màxim de navegadors possibles poguin utilitzar la característica, i quan els navegadors posteriorment deixin anar els prefixos, també poguin utilitzar la versió no prefixada. Tingueu també en compte que aquestes característiques experimentals podrien canviar, de manera que el codi podria trencar-se. Realment és millor experimentar amb aquestes característiques fins que s'eliminin els prefixos.

Podeu veure altres exemples de filtres a filters.html (vegeu també el codi font).

Modes de mescla (Blend)

Els modes de mescla CSS ens permeten afegir modes de mescla a elements que especifiquen un efecte de mescla quan es superposen dos elements - el color final mostrat per a cada píxel serà el resultat d'una combinació del color del píxel original i el del píxel en la capa de sota. Els modes de mescla tornen a ser molt familiars per als usuaris d'aplicacions gràfiques com Photoshop.

Hi ha dues propietats que utilitzen modes de mescla en CSS:

  • background-blend-mode, mescla diverses imatges de fons i colors establerts, en un sol element.
  • mix-blend-mode, mescla l'element que està establert amb elements que es superposen - tant de fons com de contingut.

Trobareu molts més exemples, que els disponibles aquí, a la nostra pàgina d'exemple blend-modes.html (consulteu el codi font), i a la pàgina de referència <blend-mode>.

Nota: Els modes de mescla són també molt nous i lleugerament menys compatibles que els filtres. Encara no hi ha cap suport a Edge, i Safari només admet algunes de les opcions de mode de mescla.

background-blend-mode

De nou, anem a veure alguns exemples perquè pugueu entendre millor això. En primer lloc, background-blend-mode - aquí mostrarem un parell de <div>s senzills, de manera que pogueu comparar l'original amb la versió barrejada:

<div>
</div>
<div class="multiply">
</div>

Ara, alguns CSS - afegim dues imatges de fons als <div>s: un gradient lineal i un png:

div {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}

El resultat que obtenim és el següent - podeu veure l'original a l'esquerra i el mode de mescla multiply a la dreta:

mix-blend-mode

Ara mirem mix-blend-mode. Aquí presentem els mateixos dos <div>s, però cadascun d'ells ara està assegut a la part superior d'un simple <div> amb un fons porpra, per mostrar com es barregen els elements:

<article>
  No mix blend mode
  <div>
        
  </div>
  <div>
  </div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix">
        
  </div>
  <div>
  </div>
</article>

Aquí teniu el CSS amb aquest estil:

article {
  width: 300px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

Això ens dóna el següent resultat:

Aquí podeu veure que la mescla de la mescla de multiply ha combinat no només les dues imatges de fons, sinó també el color del <div> a sota.

Nota: No us preocupeu si no enteneu algunes de les propietats de disseny anteriors, com ara position, top, bottom, z-index, etc. Les cobrirem amb més detall en el nostre mòdul de Disseny CSS.

-webkit-background-clip: text

Una altra característica incipient que pensàvem esmentar breument abans de seguir endavant (actualment compatible amb Chrome, Safari i Opera i que es va implementar a Firefox) és el valor text de background-clip. Quan s'utilitza juntament amb el propietari -webkit-text-fill-color: transparent; la característica, això us permet retallar imatges de fons a la forma del text de l'element, fent-ne uns efectes agradables. Aquest no és un estàndard oficial, però s'ha implementat en diversos navegadors, ja que és popular i utilitzat àmpliament pels desenvolupadors. Quan s'utilitza en aquest context, ambdues propietats requeriran un -webkit- vendor prefix, fins i tot per a navegadors no basats en Webkit/Chrome:

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Llavors, per què altres navegadors han implementat un prefix -webkit-? Principalment per a la compatibilitat del navegador - així, que molts desenvolupadors web van començar a implementar llocs web amb prefixes -webkit- va començar a semblar que els altres navegadors estaven trencats, mentre que, de fet, seguien els estàndards. Així que es van veure forçats a implementar algunes característiques d'aquest tipus. Això posa de manifest el perill d'utilitzar característiques CSS no estàndard i/o prefixades en el vostre treball - no només causen problemes de compatibilitat amb el navegador, sinó que també estan subjectes a canvis, de manera que el vostre codi podria trencar-se en qualsevol moment. És molt millor complir amb els estàndards.

Si voleu utilitzar aquestes característiques en el vostre treball de producció, assegurar-vos de provar, a fons, en tots els navegadors i comprovar que, en els casos en què aquestes característiques no funcionin, el lloc encara és utilitzable.

Nota: Per a un complet codi d'exemple sobre -webkit-background-clip: text, vegeu background-clip-text.html (vegeu també el codi font).

Aprenentatge actiu: experimentar amb alguns efectes

Ara és el vostre torn. Per a aquest aprenentatge actiu, volem que experimenteu alguns dels efectes que heu llegit anteriorment, utilitzant el codi proporcionat a continuació.

Si cometeu un error, sempre podeu restablir l'exemple mitjançant el botó Reset.

Resum

Esperem que aquest article hagi demostrat ser divertit en general - jugar amb joguines brillants i sempre és interessant veure quins tipus d'eines només estan disponibles en navegadors d'avantguarda. Heu arribat al final dels articles de les Caixes d'estil de manera que a continuació, provareu les vostres habilitats amb les caixes d'estil amb les nostres avaluacions.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,