---
title: Una caixa d'aspecte interessant
slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant
tags:
  - Assessment
  - Beginner
  - CSS
  - Learn
  - backgrounds
  - borders
  - box
  - box model
  - effects
translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>

<p class="summary">En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Rrequisits previs:</th>
   <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.</td>
  </tr>
 </tbody>
</table>

<h2 id="Punt_de_partida">Punt de partida</h2>

<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>

<ul>
 <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> - <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> and <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external-icon external" href="http://jsbin.com/">JSBin</a> o <a class="external-icon external" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element &lt;<code>style</code>&gt; al capdavant del document.</p>
</div>

<h2 id="Resum_del_projecte">Resum del projecte</h2>

<p>La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.</p>

<h3 id="Tasques_generals">Tasques generals</h3>

<ul>
 <li>Apliqueu el CSS a l'HTML.</li>
</ul>

<h3 id="L'estil_de_la_caixa">L'estil de la caixa</h3>

<p>Ens agradaria que dissenyéssiu<br>
 el {{htmlelement("p")}} proporcionat, donant-li el següent:</p>

<ul>
 <li>Un ample raonable per a un botó gran, diguem al voltant de 200 píxels.</li>
 <li>Una alçada raonable per a un botó gran, centrant el text verticalment en el procés.</li>
 <li>Text centrat.</li>
 <li>Un lleuger augment de la grandària de la font, al voltant de 17-18px d'estil, calculat. Utilitzeu rems. Escriviu com a treballar, el valor, en un comentari.</li>
 <li>Color base per al disseny. Doneu a la caixa a aquest color com a color de fons.</li>
 <li>El mateix color per al text; Feu que sigui llegible usant una ombra negre del text.</li>
 <li>Una vora de radi bastant subtil.</li>
 <li>Una vora sòlida de 1 píxel amb un color similar al color base, però una ombra una mica més fosca.</li>
 <li>Un gradient lineal semitransparent negre, que es dirigeix cap a la cantonada superior esquerra. Feu que sigui completament transparent al principi, gradat al voltant de 0,2 d'opacitat en un 30% al llarg i romandre en el mateix color fins al final.</li>
 <li>Múltiples ombres de caixa. Doneu-li una ombra de caixa estàndard, per fer que la caixa es vegi lleugerament aixecada de la pàgina. Les altres dues haurien de ser ombres de caixa d'inserció: una ombra blanca semitransparent prop de la part superior esquerra i una ombra semitransparent negre a la part inferior dreta, per afegir-li el bonic aspecte 3D de la caixa.</li>
</ul>

<h2 id="Exemple">Exemple</h2>

<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final</span></span>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p>

<h2 id="Avaluació">Avaluació</h2>

<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a class="external-icon external" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a class="external-icon external" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>

<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>