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

Learning the Web

Una caixa d'aspecte interessant

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

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.

Rrequisits previs: Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu: Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.

Punt de partida

Per començar aquesta avaluació, heu de:

  • Feu còpies locals del codi HTML i CSS - deseu-les com index.html and style.css en un directori nou.

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble 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 <style> al capdavant del document.

Resum del projecte

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

Tasques generals

  • Apliqueu el CSS a l'HTML.

L'estil de la caixa

Ens agradaria que dissenyéssiu
el <p> proporcionat, donant-li el següent:

  • Un ample raonable per a un botó gran, diguem al voltant de 200 píxels.
  • Una alçada raonable per a un botó gran, centrant el text verticalment en el procés.
  • Text centrat.
  • 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.
  • Color base per al disseny. Doneu a la caixa a aquest color com a color de fons.
  • El mateix color per al text; Feu que sigui llegible usant una ombra negre del text.
  • Una vora de radi bastant subtil.
  • Una vora sòlida de 1 píxel amb un color similar al color base, però una ombra una mica més fosca.
  • 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.
  • 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.

Exemple

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

Avaluació

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 en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

Document Tags and Contributors

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