Necessitarem modificar les seg\u00fcents propietats amb els seg\u00fcents valors:<\/p>\n\n\n\n
- \n
- position:fixed<\/li>\n\n\n\n
- bottom: 20px<\/li>\n\n\n\n
- right: 20px<\/li>\n<\/ul>\n\n\n\n
Quines propietats necessitem modificar per a fer-lo com el bot\u00f3 del disseny?<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-4.png\")
<\/figure>\n\n\n\nHem fet una llista de propietats:<\/p>\n\n\n\n
- \n
- font-size: 20px<\/li>\n\n\n\n
- color:white<\/li>\n\n\n\n
- background-color:blue<\/li>\n\n\n\n
- border-radius: 20px<\/li>\n\n\n\n
- border-width: 2px<\/li>\n\n\n\n
- border-style: solid<\/li>\n\n\n\n
- border-color: black<\/li>\n\n\n\n
- padding: 10px 30px<\/li>\n\n\n\n
- text-decoration: none<\/li>\n<\/ul>\n\n\n\n
Un cop feta la llista de propietats, hem modificat l’HTML per donar dues classes al bot\u00f3 del peu<\/p>\n\n\n\n
<footer>
<p><a href=\"#navegacio\" class=\"pildora boto-pujar\">Pujar<\/a><\/p>
<\/footer><\/code><\/pre>\n\n\n\nHem posat dues classes per poder separar les propietats relatives a la posici\u00f3 i a l’aparen\u00e7a.<\/strong> D’aquesta manera, podrem aplicar la classe \u00abpildora\u00bb a tots els botons que volguem que es vegin com aquest. La classe \u00abboto-pujar\u00bb la farem servir nom\u00e9s per posicionar el bot\u00f3:<\/p>\n\n\n\n
.boto-pujar{
position:fixed;
bottom:20px;
right:20px;
}<\/code><\/pre>\n\n\n\n.pildora{\nfont-size:20px;\ncolor:white;\nbackground-color:blue;\npadding:10px 30px;\nborder:2px solid black;\nborder-radius:20px;\ntext-decoration:none;\n}<\/code><\/pre>\n\n\n\nHem explicat que podem escriure les propietats del border per separat (border-width, border-style, border-color) o unir-les en una \u00fanica propietat anomenada \u00abborder\u00bb. El primer valor modificar\u00e0 el border-width, el segon el border-style i el tercer, el border-color. Durant el curs anirem veient altres propietats que podem simplificar.<\/p>\n\n\n\n
Despr\u00e9s hem fet una millora, hem definit el padding i el border radius en relaci\u00f3 a la mida de la tipografia<\/strong>. D’aquesta manera, podem fer botons de diferents mides, on nom\u00e9s canviant el valor de la font-size es modifiquin les altres propietats de manera harm\u00f2nica.<\/p>\n\n\n\n
.pildora{\nfont-size:20px;\ncolor:white;\nbackground-color:blue;\npadding:0.5em 1.5em;\nborder:2px solid black;\nborder-radius:1em;\ntext-decoration:none;\n}<\/code><\/pre>\n\n\n\nDespr\u00e9s hem creat una altra regla per poder crear botons m\u00e9s grans:<\/p>\n\n\n\n
.pildora.gran{
font-size:40px;
}<\/code><\/pre>\n\n\n\nA l’HTML hem posat la classe \u00abpildora\u00bb a diferents enlla\u00e7os. I a l’enlla\u00e7 del peu li hem posat, a m\u00e9s, la classe \u00abgran\u00bb<\/p>\n\n\n\n
<footer> <p><a href=\"#navegacio\" class=\"pildora gran boto-pujar\">Pujar<\/a><\/p> <\/footer><\/code><\/pre>\n\n\n\nEl selector .pildora.gran localitzar\u00e0 aquells elements amb la classe pildora que tamb\u00e9 tinguin la classe gran.<\/p>\n\n\n\n
El display dels botons<\/h2>\n\n\n\n
Per defecte, els enlla\u00e7os (etiqueta a) tenen un tipus de display \u00abinline\u00bb. Aix\u00f2 significa que ocupen nom\u00e9s l’espai imprescindible per a mostrar el seu contingut. Per\u00f2 tamb\u00e9 significa que l’element contenidor no els fa l’espai que a vegades necessiten..aix\u00f2 es veu clarament en els botons que hem posat dins de la navegaci\u00f3 (a aquells enlla\u00e7os de la navegaci\u00f3 als que, per posar en pr\u00e0ctica aix\u00f2 d’aplicar classes, hem marcat com a classe \u00abpildora\u00bb).<\/p>\n\n\n\n
Per solucionar-ho, hem canviat el display a \u00abblock\u00bb. I si b\u00e9 \u00e9s cert que ara el contenidor (li) els ha donat prou espai, els botons han passat a ocupar el 100% de la pantalla (cosa que passa amb els elements tipus \u00abblock\u00bb).<\/p>\n\n\n\n
Per solucionar-ho, els hem donat un display intermig: \u00abinline-block\u00bb<\/p>\n\n\n\n
.pildora{\nfont-size:20px;\ncolor:white;\nbackground-color:blue;\npadding:0.5em 1.5em;\nborder:2px solid black;\nborder-radius:1em;\ntext-decoration:none;\ndisplay:inline-block;\n}<\/code><\/pre>\n\n\n\nNo us agradaria poder indicar com voleu que sigui aquest bot\u00f3 quan passem el cursor per sobre?<\/strong> (per exemple, fer que al passar el cursor canvies el background-color i el color) Com ho podem fer?<\/strong> Haurem d’aprendre a fer servir pseudo-classes<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Al peu de la p\u00e0gina de les pioneres tenim un enlla\u00e7 a la part superior de la p\u00e0gina. Volem estilar aquest bot\u00f3 i volem posicionar-lo a la part inferior dreta de la pantalla, sempre visible i disponible per poder ajudar-nos a tornar a dalt en qualsevol moment. Quines propietats necessitarem modificar per posicionar-lo? Necessitarem modificar… Continueu llegint Estilar enlla\u00e7os I: Botons<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-121","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":6,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/121\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/121\/revisions\/131"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}