{"id":287,"date":"2023-06-17T13:17:43","date_gmt":"2023-06-17T11:17:43","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?p=287"},"modified":"2023-06-17T13:34:04","modified_gmt":"2023-06-17T11:34:04","slug":"usos-de-before-i-after-botons","status":"publish","type":"post","link":"https:\/\/user0.gesem.es\/blog\/usos-de-before-i-after-botons\/","title":{"rendered":"Usos de ::before i ::after : botons"},"content":{"rendered":"\n

Com ja hem vist a classe, podem crear pseudo-elements amb CSS. Els pseudo-elements permeten crear caixes de contingut que no estan a l’HTML. Aquestes caixes es poden estilar, com qualsevol altra caixa: se’n podem canviar les dimensions, el fons, el color del text,…<\/p>\n\n\n\n

Posar les imatges de fons en un pseudo-element ens permet aplicar efectes interessants com canviar-ne l’opacitat o aplicar transformacions.<\/p>\n\n\n\n

En aquest exercici farem servir algunes transformacions. Trobar\u00e0s informaci\u00f3 extensa sobre transformacions aqu\u00ed: https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/transform<\/a><\/p>\n\n\n\n

En aquest exercici crearem dos botons en HTML i els aplicarem uns estils en CSS. A classe vam fer un exercici similar, per\u00f2 per comptes de modificar el content, com farem aqu\u00ed, vam modificar el fons del pseudo-element ::before.<\/strong><\/p>\n\n\n\n

Modificarem la propietat \u00abcontent\u00bb amb uns emojis que hem trobat aqu\u00ed: https:\/\/coolsymbol.com\/<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Els emojis (\ud83d\ude04 \ud83d\ude0d \ud83d\udc97) s\u00f3n caracters del conjunt de caracters utf-8 (Unicode). Semblen imatges o icones, per\u00f2 en realitat s\u00f3n lletres. Per aix\u00f2 els podem incloure com a valor de la propietat \u00abcontent\u00bb de CSS, simplement copiant-los i enganxant-los, ja que s\u00f3n text.<\/p>\n\n\n\n

Aix\u00ed es veuran els nostres botons:<\/p>\n\n\n\n

\nCursos de primavera<\/a>\n<\/p>\n

\nCursos de primavera<\/a>\n<\/p>\n\n\n\n

Primer creem els botons en HTML:<\/p>\n\n\n\n

<p>\n    <a class=\"pildora primavera\" href=\"#\">Cursos de primavera<\/a>\n<\/p>\n<p>\n    <a class=\"pildora estiu\" href=\"#\">Cursos d'estiu<\/a>\n<\/p><\/code><\/pre>\n\n\n\n
A l’HTML hem creat dos enlla\u00e7os amb la classe \u00abpildora\u00bb. A m\u00e9s, un d’ells t\u00e9 la classe \u00abprimavera\u00bb i l’altre \u00abestiu\u00bb. <\/p>\n\n\n\n
Ara, al CSS estilem aquest dos botons i els posem uns emojis com a contingut del ::before.<\/p>\n\n\n\n
.pildora{\n  font-size:20px;\n  line-height:1;\n  padding: .5em 1.35em .5em 1.25em;\n  border-radius: 2em;\n  background-color: yellow;\n  text-decoration:none;\n  font-weight:bold;\n  display:inline-block;\n}\n.pildora:hover{\n   background-color:orange;\n}\n.pildora::before{\n   display:inline-block;\n   width: 1em; \n   height:1em; \n   margin-right: .5em;\n}\n.primavera::before{\n   content:\"\ud83c\udf38\";\n}\n.estiu::before{\n   content:\"\ud83c\udf34\";\n}<\/code><\/pre>\n\n\n\n
Ara, aprofitant que tenim la imatge com a contingut d’un before , podem aplicar alguns efectes amb CSS per a que es comportin com aquests dos botons:<\/p>\n\n\n\n
\n
\nCursos de primavera<\/a>\n<\/p>\n
\nCursos de primavera<\/a>\n<\/p>\n<\/div>\n\n\n\n
Aquest ser\u00e0 el CSS necessari:<\/p>\n\n\n\n
.pildora{\n  font-size:20px;\n  line-height:1;\n  padding: .5em 1.35em .5em 1.25em;\n  border-radius: 2em;\n  background-color: yellow;\n  text-decoration:none;\n  font-weight:bold;\n  display:inline-block;\n}\n.pildora:hover{\n background-color:orange;\n}\n.pildora::before{\n   display:inline-block;\n   width: 1em; \n   height:1em; \n   margin-right: .5em;\n   transition:all .35s ease-in;\n   transform: rotate(0deg) scale(1)\n}\n.primavera::before{\n   content:\"\ud83c\udf38\";\n}\n.estiu::before{\n   content:\"\ud83c\udf34\";\n}\n.pildora:hover::before{\n  transform: rotate(210deg) scale(2);\n}<\/code><\/pre>\n\n\n\n
Hem afegit una transformaci\u00f3 al before dels botons (.pildora) quan l’estat \u00e9s hover (.pildora:hover::before). El que hem fet \u00e9s rotar-lo 210 graus (210deg) i escalar-lo un 200% (2). Hem aplicat una transici\u00f3 ( transition:all .35s ease-in;) que fa que el canvi d’estat duri 0.35 segons i es produeixi d’una manera gradual (ease-in)<\/p>\n\n\n\n
IMPORTANT<\/strong><\/p>\n\n\n\n
Les transicions i les transformacions encara estan en fase de desenvolupament i alguns navegadors necessiten que els prefixem. Un cop tinguis el teu CSS, l’haur\u00e0s de passar per aqu\u00ed per a obtenir-lo amb els prefixes aplicats: https:\/\/autoprefixer.github.io\/<\/a><\/p>\n\n\n\n
El CSS d’aquest exercici quedar\u00e0 aix\u00ed:<\/p>\n\n\n\n
.pildora{\n  font-size:20px;\n  line-height:1;\n  padding: .5em 1.35em .5em 1.25em;\n  border-radius: 2em;\n  background-color: yellow;\n  text-decoration:none;\n  font-weight:bold;\n  display:inline-block;\n}\n.pildora:hover{\n background-color:orange;\n}\n.pildora::before{\n   display:inline-block;\n   width: 1em; \n   height:1em; \n   margin-right: .5em;\n   -webkit-transition:all .35s ease-in;\n   -o-transition:all .35s ease-in;\n   transition:all .35s ease-in;\n   -webkit-transform: rotate(0deg) scale(1);\n       -ms-transform: rotate(0deg) scale(1);\n           transform: rotate(0deg) scale(1)\n}\n.primavera::before{\n   content:\"\ud83c\udf38\";\n}\n.estiu::before{\n   content:\"\ud83c\udf34\";\n}\n.pildora:hover::before{\n  -webkit-transform: rotate(210deg) scale(2);\n      -ms-transform: rotate(210deg) scale(2);\n          transform: rotate(210deg) scale(2);\n}<\/code><\/pre>\n\n\n\n
\n
\n
Exercici<\/p>\n\n\n\n
Crea dos botons semblants a aquests fent servir emojis com a contingut del pseudo-element before dels botons<\/p>\n\n\n\n
Aplica-hi transformacions que podr\u00e0s trobar aqu\u00ed: https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/transform<\/p>\n\n\n\n
Pots afegir l’HTML i el CSS a l’exercici d’aquests apunts: https:\/\/user0.gesem.es\/blog\/taules<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Com ja hem vist a classe, podem crear pseudo-elements amb CSS. Els pseudo-elements permeten crear caixes de contingut que no estan a l’HTML. Aquestes caixes es poden estilar, com qualsevol altra caixa: se’n podem canviar les dimensions, el fons, el color del text,… Posar les imatges de fons en un pseudo-element ens permet aplicar efectes… Continueu llegint Usos de ::before i ::after : botons<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-287","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"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=287"}],"version-history":[{"count":11,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/287\/revisions\/319"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}