path: root/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html

---
title: Efectes avançats de la caixa
slug: Learn/CSS/Building_blocks/Advanced_styling_effects
tags:
  - Article
  - Beginner
  - Blend modes
  - Boxes
  - CSS
  - CodingScripting
  - Filters
  - Styling
  - box shadows
  - effects
translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>

<p class="summary">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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>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.</td>
  </tr>
 </tbody>
</table>

<h2 id="Ombres_de_caixa">Ombres de caixa</h2>

<p>De tornada al nostre mòdul <a href="/en-US/docs/Learn/CSS/Styling_text">Estilitzar text</a> module, vam mirar la propietat {{cssxref("text-shadow")}}, que permet aplicar una o més ombres al text d'un element. Bé, existeix una propietat equivalent per les caixes - {{cssxref("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.</p>

<p>Podeu trobar els exemples d'aquesta secció a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (vegeu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">codi font</a> també).</p>

<h3 id="Una_ombra_de_caixa_senzilla">Una ombra de caixa senzilla</h3>

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

<pre class="brush: html">&lt;article class="simple"&gt;
  &lt;p&gt;&lt;strong&gt;Warning&lt;/strong&gt;: The thermostat on the cosmic transcender has reached a critical level.&lt;/p&gt;
&lt;/article&gt;</pre>

<p>Ara el CSS:</p>

<pre class="brush: 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);
}</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p>

<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p>

<p>Veureu que tenim quatre elements en el valor de la propietat <code>box-shadow</code>:</p>

<ol>
 <li>El primer valor de longitud és el desplaçament horitzontal (<strong>horizontal offset</strong>) - 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).</li>
 <li>El segon valor de longitud és el desplaçament vertical (<strong>vertical offset</strong>) - la distància cap avall que l'ombra es desplaça des de la caixa original (o cap amunt, si el valor és negatiu).</li>
 <li>El tercer valor de longitud és el radi de difuminat (<strong>blur radius</strong>) - la quantitat de difuminació aplicada a l'ombra.</li>
 <li>El valor de color és el color base (<strong>base color</strong>) de l'ombra.</li>
</ol>

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

<h3 id="Múltiples_ombres_de_caixa">Múltiples ombres de caixa</h3>

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

<div class="hidden">
<pre class="brush: html">&lt;article class="multiple"&gt;
  &lt;p&gt;&lt;strong&gt;Warning&lt;/strong&gt;: The thermostat on the cosmic transcender has reached a critical level.&lt;/p&gt;
&lt;/article&gt;</pre>
</div>

<pre class="brush: 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));
}

.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;
}</pre>

<p>Ara obtenim aquest resultat:</p>

<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p>

<p>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.</p>

<h3 id="Altres_característiques_d'ombra_de_caixa">Altres característiques d'ombra de caixa</h3>

<p>A diferència de {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} té una paraula clau disponible <code>inset</code> - 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.</p>

<p>En primer lloc, anirem amb un codi HTML diferent per a aquest exemple:</p>

<pre class="brush: html">&lt;button&gt;Press me!&lt;/button&gt;</pre>

<pre class="brush: css">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);
}</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p>

<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p>

<p>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.</p>

<p>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.</p>

<div class="note">
<p><strong>Nota</strong>: Hi ha un altre element que es pot establir en el valor de <code>box-shadow</code>  - un altre valor de longitud es pot configurar de manera opcional just abans del valor del color, que és un radi de dispersió (<strong>spread radius</strong>). 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.</p>
</div>

<h2 id="Filtres">Filtres</h2>

<p>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 {{cssxref("filtre")}}. En aquesta secció, us explicarem la sintaxi i us mostrarem lo divertit que poden ser els resultats.</p>

<p>Bàsicament, un filtre es pot aplicar a qualsevol element, bloc o en línia - simplement utilitzeu la propietat <code>filter</code> 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 {{cssxref("box-shadow")}} o {{cssxref("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:</p>

<p>En primer lloc, un senzill HTML:</p>

<pre class="brush: html">&lt;p class="filter"&gt;Filter&lt;/p&gt;

&lt;p class="box-shadow"&gt;Box shadow&lt;/p&gt;
</pre>

<p><span id="result_box" lang="ca"><span>I ara, alguns CSS per aplicar una ombra a cadascuna</span></span>:</p>

<pre class="brush: css">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);
}</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p>

<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p>

<p>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.</p>

<p>Algunes altres coses a destacar</p>

<ul>
 <li>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.</li>
 <li>Veureu que hem inclòs una versió de la propietat <code>filtre</code> amb -<code>webkit</code>- prefixada. Es diu {{glossary("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ó -<code>webkit</code>- de la propietat és necessària per al suport de Chrome/Safari/ Opera, mentre que Edge i Firefox utilitzen la versió final, no prefixada.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<p>Podeu veure altres exemples de filtres a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">codi font</a>).</p>

<h2 id="Modes_de_mescla_(Blend)">Modes de mescla (Blend)</h2>

<p>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.</p>

<p>Hi ha dues propietats que utilitzen modes de mescla en CSS:</p>

<ul>
 <li>{{cssxref("background-blend-mode")}}, mescla diverses imatges de fons i colors establerts, en un sol element.</li>
 <li>{{cssxref("mix-blend-mode")}}, mescla l'element que està establert amb elements que es superposen - tant de fons com de contingut.</li>
</ul>

<p>Trobareu molts més exemples, que els disponibles aquí, a la nostra pàgina d'exemple <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (consulteu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">codi font</a>), i a la pàgina de referència {{cssxref("&lt;blend-mode&gt;")}}.</p>

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h3 id="background-blend-mode">background-blend-mode</h3>

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

<pre class="brush: html">&lt;div&gt;
&lt;/div&gt;
&lt;div class="multiply"&gt;
&lt;/div&gt;</pre>

<p>Ara, alguns CSS - afegim dues imatges de fons als <code>&lt;div&gt;</code>s: un gradient lineal i un png:</p>

<pre class="brush: css">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;
}</pre>

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

<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>

<h3 id="mix-blend-mode">mix-blend-mode</h3>

<p>Ara mirem {{cssxref("mix-blend-mode")}}. Aquí presentem els mateixos dos <code>&lt;div&gt;</code>s, però cadascun d'ells ara està assegut a la part superior d'un simple <code>&lt;div&gt;</code> amb un fons porpra, per mostrar com es barregen els elements:</p>

<pre class="brush: html">&lt;article&gt;
  No mix blend mode
  &lt;div&gt;

  &lt;/div&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/article&gt;

&lt;article&gt;
  Multiply mix
  &lt;div class="multiply-mix"&gt;

  &lt;/div&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/article&gt;</pre>

<p><span id="result_box" lang="ca"><span>Aquí teniu el CSS amb aquest estil:</span></span></p>

<pre class="brush: css">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;
}</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p>

<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>

<p>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 <code>&lt;div&gt;</code> a sota.</p>

<div class="note">
<p><strong>Nota</strong>: No us preocupeu si no enteneu algunes de les propietats de disseny anteriors, com ara {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Les cobrirem amb més detall en el nostre mòdul de <a href="/en-US/docs/Learn/CSS/CSS_layout">Disseny CSS</a>.</p>
</div>

<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2>

<p>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 <code>text</code> de {{cssxref("background-clip")}}. Quan s'utilitza juntament amb el propietari -<code>webkit-text-fill-color: transparent</code>; 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 -<code>webkit</code>- vendor prefix, fins i tot per a navegadors no basats en Webkit/Chrome:</p>

<pre class="brush: css">.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}</pre>

<p>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 -<code>webkit</code>- 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.</p>

<p>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.</p>

<div class="note">
<p><strong>Nota</strong>: Per a un complet codi d'exemple sobre <code>-webkit-background-clip: text</code>, vegeu <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">codi font</a>).</p>
</div>

<h2 id="Aprenentatge_actiu_experimentar_amb_alguns_efectes">Aprenentatge actiu: experimentar amb alguns efectes</h2>

<p>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ó.</p>

<p>Si cometeu un error, sempre podeu restablir l'exemple mitjançant el botó <em>Reset</em>.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;div class="style-me"&gt;
&lt;/div&gt;&lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;.style-me {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
} &lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p>

<h2 id="Resum">Resum</h2>

<p>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 <a href="/en-US/docs/Learn/CSS/Styling_boxes">Caixes d'estil</a> de manera que a continuació, provareu les vostres habilitats amb les caixes d'estil amb les nostres avaluacions.</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>