Una caixa d'aspecte interessant

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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!