initial commit

1 files changed, 85 insertions, 0 deletions

diff --git a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html
new file mode 100644
index 0000000000..3a4df8a2b2
--- /dev/null
+++ b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html
@@ -0,0 +1,85 @@
+---
+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>