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:
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!