1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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 <<code>style</code>> 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>
|
