{"id":253,"date":"2023-06-11T22:50:57","date_gmt":"2023-06-11T20:50:57","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?p=253"},"modified":"2023-06-12T15:29:00","modified_gmt":"2023-06-12T13:29:00","slug":"posar-imatges-com-a-imatges-de-fons","status":"publish","type":"post","link":"https:\/\/user0.gesem.es\/blog\/posar-imatges-com-a-imatges-de-fons\/","title":{"rendered":"Posar imatges com imatges de fons"},"content":{"rendered":"\n

A l’exercici d’aquest mes tenim alguns reptes, com fer servir imatges que no s\u00f3n a l’HTML i haurem de posar per CSS. Per exemple aqu\u00ed:<\/p>\n\n\n\n

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

Aix\u00f2 a l’HTML \u00e9s aix\u00ed:<\/p>\n\n\n\n

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

Podem posar la icona com a fons del div o com a fons del h3. Decidim fer-ho com a imatge de fons del div.<\/p>\n\n\n\n

Tenim clar que haurem de poder indicar al navegador que aquest div concret ha de tenir una imatge de fons. Per poder assenyalar aquest div en concret d’alguna manera, podem donar-li una classe, afegir-li l’atribut class amb un nom de classe com a valor, per exemple \u00abtargeta\u00bb.<\/p>\n\n\n\n

Com que a la p\u00e0gina hi haur\u00e0 m\u00e9s divs<\/em> com aquest que compartiran propietats, podem donar-li una segona classe, per poder fer una regla amb les propietats que compartir\u00e0 amb altres elements i una classe per all\u00f2 m\u00e9s espec\u00edfic. <\/p>\n\n\n\n

Amb CSS farem una regla per aquesta classe m\u00e9s gen\u00e8rica, i una altra per la classe targeta, m\u00e9s espec\u00edfica. La classe m\u00e9s gen\u00e8rica es podria dir \u00abcaracteristiques\u00bb*, perqu\u00e8 cadascun d’aquests divs parlen de caracter\u00edstiques del producte.<\/p>\n\n\n\n

*atenci\u00f3: a classe n’hem dit \u00abcaracteristica\u00bb, en singular.<\/p>\n\n\n\n

Per tant, haurem de modificar l’HTML per afegir aquestes classes:<\/p>\n\n\n\n

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

Ara que ja hem afegit les classes a l’HTML les podem referenciar al CSS<\/p>\n\n\n\n

Comen\u00e7arem per les propietats comunes<\/p>\n\n\n\n

.caracteristiques{\n    padding-top:40px;\n    background-repeat:no-repeat;\n}<\/code><\/pre>\n\n\n\n
I despr\u00e9s, en una altra regla, definirem les propietats que t\u00e9  l’element amb la classe \u00abtargeta\u00bb<\/p>\n\n\n\n
.targeta{\n    background-image:url(\"imatges\/sell.png\");\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
El que hem fet \u00e9s crear un espai en la part superior del div, jugant amb la propietat padding-top. En aquesta \u00e0rea tenim espai per a la imatge (30px) i per el marge entre la imatge i el t\u00edtol (10px), per aix\u00f2 l’hem fet de 40px.<\/p>\n\n\n\n
\u00das de les pseudo-classes :before i :after<\/h3>\n\n\n\n
A la  majoria d’elements HTML  els podem afegir contingut abans i despr\u00e9s mitjan\u00e7ant CSS. Per fer-ho, fem servir les pseudo-classes :before<\/strong> i :after.<\/strong><\/p>\n\n\n\n
Aquesta opci\u00f3 es fa servir molt amb finalitats est\u00e8tiques, ja que pemet afegir informaci\u00f3 que no est\u00e0 a l’HTML. Has de tenir en compte que la informaci\u00f3 realment important sempre ha d’estar a l’HTML, per aix\u00f2 aquesta t\u00e8cnica es fa servir per estilar amb finalitats purament decoratives.<\/p>\n\n\n\n
Quan apliquem :before i :after es crea en realitat un pseudo-element. No estem modificant un estat d’un element. Per aix\u00f2, a la \u00faltima revisi\u00f3 del CSS (CSS3) se li van afegir dos punts m\u00e9s (::before, ::after). Els navegadors llegiran correctament les dues variables (amb \u00ab:\u00bb al davant, i amb \u00ab::\u00bb al davant).<\/p>\n\n\n\n
Els pseudoelements tenen les propietats de caixa de qualsevol element. Per defecte seran del tipus de display \u00abinline\u00bb. Una propietat pr\u00f2pia \u00e9s \u00abcontent\u00bb, que per defecte no t\u00e9 cap valor. Quan content no est\u00e0 definit, el pseudoelement no \u00e9s visible. Per tant sempre haurem de definir el valor de content per fer visible els pseudoelements ::before i ::after.<\/p>\n\n\n\n
Si donem un text com a valor de la propietat content d’un pseudoelement, aquest text ser\u00e0 visible abans o despr\u00e9s, segons si el pseudoelement \u00e9s ::before (abans) o ::after (despr\u00e9s).<\/p>\n\n\n\n
ul li:before{\ncontent: \"opci\u00f3: \"; \n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Com podem fer servir el ::before o ::after per posar una imatge de fons?<\/strong><\/p>\n\n\n\n
En el disseny veiem que al peu del hero hi ha una onada que separa aquesta secci\u00f3 de la seg\u00fcent. Podem fer servir la pseudo-classe \u00ab::after\u00bb per posar el fons<\/p>\n\n\n\n
section.hero{\n    color:white;\n    background-color:#202249;\n}\nsection.hero::after{\n    content:\"\";\n    display:block;\n    height:10vw;\n    background-image:url(\"imatges\/fons-1.png\");\n    background-repeat:no-repeat;\n    background-size:100%;\n    background-position: left bottom; \n  }<\/code><\/pre>\n\n\n\n
Quan donem el valor \u00ab\u00bb a content, estem fent que l’element existeixi, tot i que sense text. Com que hem donat display-block la caixa va de banda a banda. Hem definit l’al\u00e7ada en relaci\u00f3 a l’amplada (vw, view width) per a que es mantinguin les proporcions indepenedement de l’amplada de la pantalla.<\/p>\n\n\n\n
(si per sota de la imatge encara veus part del color de fons \u00e9s perqu\u00e8 l’al\u00e7ada del pseudo-element que es genera \u00e9s massa alta, prova d’ajustar el valor de la propietat height fins que la proporci\u00f3 sigui correcta)<\/p>\n","protected":false},"excerpt":{"rendered":"
A l’exercici d’aquest mes tenim alguns reptes, com fer servir imatges que no s\u00f3n a l’HTML i haurem de posar per CSS. Per exemple aqu\u00ed: Aix\u00f2 a l’HTML \u00e9s aix\u00ed: Podem posar la icona com a fons del div o com a fons del h3. Decidim fer-ho com a imatge de fons del div. Tenim… Continueu llegint Posar imatges com imatges de fons<\/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-253","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/253","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=253"}],"version-history":[{"count":11,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}