En HTML els colors es poden anomenar per noms propis ja creats (yellow, black, orange...) o es poden identificar mitjançant codis hexadecimals, (#ffff00, #000000, #ffa500...). En la pàgina HTML Color Groups de la web w3schools.com, podeu trobar els colors més utilitzats.
A l'EBAP, normalment, feim servir els colors següents:
- Al títol de la plataforma utilitzam el color corporatiu del Govern de les Illes Balears (background-color: #c40037):
- Als diferents quadres de text creats a Moodle per fer ressaltar:
Quadre de text amb fons de color verd (background-color: #e9ffd9; border: 2px solid #a6ca8a;)
Quadre de text amb fons de color groc (background-color: #fff8c4; border: 2px solid #f2c779;)
Quadre de text amb fons de color blau (background-color: #e3f7fc; border: 2px solid #8ed9f6;)
Quadre de text amb fons de color vermell (background-color: #ffecec; border: 2px solid #f5aca6;)
Quadre de text amb fons de color gris (background-color: #dcdcdc; border: 2px solid #a9a9a9;)
Quadre de text amb fons de color negre i text de color blanc (background-color: #3a3a3a; border: 2px solid #3a3a3a; color: white;)
En HTML, el color del text per defecte és el negre. Per tant, fixau-vos que en el darrer quadre hi ha un valor nou color, que es fa servir per donar color al text.
Vegem-ho amb més detall en els exemples següents:
Quadre de text amb fons color verd
|
<p style="text-align: justify;"><span style="background-color: #e9ffd9; border: 2px solid #a6ca8a; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
| Quadre de text amb fons color groc |
<p style="text-align: justify;"><span style="background-color: #fff8c4; border: 2px solid #f2c779; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
| Quadre de text amb fons color blau |
<p style="text-align: justify;"><span style="background-color: #e3f7fc; border: 2px solid #8ed9f6; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
| Quadre de text amb fons color vermell |
<p style="text-align: justify;"><span style="background-color: #ffecec; border: 2px solid #f5aca6; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
| Quadre de text amb fons color gris |
<p style="text-align: justify;"><span style="background-color: #dcdcdc; border: 2px solid #a9a9a9; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
| Quadre de text amb fons color negre i text color blanc |
<p style="text-align: justify;"><span style="background-color: #3a3a3a; border: 2px solid #3a3a3a; color: white; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>
| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.