A l’exercici d’aquest mes tenim alguns reptes, com fer servir imatges que no són a l’HTML i haurem de posar per CSS. Per exemple aquí:
Això a l’HTML és així:
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 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 «targeta».
Com que a la pàgina hi haurà més divs com aquest que compartiran propietats, podem donar-li una segona classe, per poder fer una regla amb les propietats que compartirà amb altres elements i una classe per allò més específic.
Amb CSS farem una regla per aquesta classe més genèrica, i una altra per la classe targeta, més específica. La classe més genèrica es podria dir «caracteristiques»*, perquè cadascun d’aquests divs parlen de característiques del producte.
*atenció: a classe n’hem dit «caracteristica», en singular.
Per tant, haurem de modificar l’HTML per afegir aquestes classes:
Ara que ja hem afegit les classes a l’HTML les podem referenciar al CSS
Començarem per les propietats comunes
.caracteristiques{
padding-top:40px;
background-repeat:no-repeat;
}I després, en una altra regla, definirem les propietats que té l’element amb la classe «targeta»
.targeta{
background-image:url("imatges/sell.png");
}
El que hem fet és crear un espai en la part superior del div, jugant amb la propietat padding-top. En aquesta àrea tenim espai per a la imatge (30px) i per el marge entre la imatge i el títol (10px), per això l’hem fet de 40px.
Ús de les pseudo-classes :before i :after
A la majoria d’elements HTML els podem afegir contingut abans i després mitjançant CSS. Per fer-ho, fem servir les pseudo-classes :before i :after.
Aquesta opció es fa servir molt amb finalitats estètiques, ja que pemet afegir informació que no està a l’HTML. Has de tenir en compte que la informació realment important sempre ha d’estar a l’HTML, per això aquesta tècnica es fa servir per estilar amb finalitats purament decoratives.
Quan apliquem :before i :after es crea en realitat un pseudo-element. No estem modificant un estat d’un element. Per això, a la última revisió del CSS (CSS3) se li van afegir dos punts més (::before, ::after). Els navegadors llegiran correctament les dues variables (amb «:» al davant, i amb «::» al davant).
Els pseudoelements tenen les propietats de caixa de qualsevol element. Per defecte seran del tipus de display «inline». Una propietat pròpia és «content», que per defecte no té cap valor. Quan content no està definit, el pseudoelement no és visible. Per tant sempre haurem de definir el valor de content per fer visible els pseudoelements ::before i ::after.
Si donem un text com a valor de la propietat content d’un pseudoelement, aquest text serà visible abans o després, segons si el pseudoelement és ::before (abans) o ::after (després).
ul li:before{
content: "opció: ";
}
Com podem fer servir el ::before o ::after per posar una imatge de fons?
En el disseny veiem que al peu del hero hi ha una onada que separa aquesta secció de la següent. Podem fer servir la pseudo-classe «::after» per posar el fons
section.hero{
color:white;
background-color:#202249;
}
section.hero::after{
content:"";
display:block;
height:10vw;
background-image:url("imatges/fons-1.png");
background-repeat:no-repeat;
background-size:100%;
background-position: left bottom;
}Quan donem el valor «» 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çada en relació a l’amplada (vw, view width) per a que es mantinguin les proporcions indepenedement de l’amplada de la pantalla.
(si per sota de la imatge encara veus part del color de fons és perquè l’alçada del pseudo-element que es genera és massa alta, prova d’ajustar el valor de la propietat height fins que la proporció sigui correcta)