Tip(z)

Det finns en webbkalender för dig som gillar webdesign, 24ways.org. Jag har nämnt den tidigare och där finns en hel del matnyttigt. När jag upptäckte kalendern med kemiexperiment dök denna upp i minnet.

Årets första avsnitt handlar om att använda ett nytt sätt att ange färg i CSS3, nämligen RGBA, där A-et står för Alpha (opacitet/transparens/genomskinlighet). Många av oss är vana att använda hexkod, som kan se ut så här: #c0022c. Skrivet i rgb blir det:  rgb(192,2,44).

Nu finns det möjlighet att lägga till ett värde och då får man möjlighet att välja opacitet. 1 är ogenomskinligt och o helt transparent. Nedan följer tre exempel där jag praktiserat på några olika sätt i en rubrik – h2:

1. Svart text, solid bakgrundsfärg, rgba(192,2,44,1)

2. Svart text, bakgrundsfärg rgba där a = 0.4, rgba(192,2,44,0.4)

3. Här använder jag ytterligare en egenskap i CSS3, opacity. När jag ställer den till 0.4 i H2 blir både rubrik och bakgrund transparenta.

1. Vi gör ett test – alpha 1 med rgba

2. Vi gör ett test – alpha 0.4 med rgba

3. Vi gör ett test – alpha 0.4 med egenskap opacity

Lo and behold! Detta fungerar i de flesta moderna webbläsare. Jag testar i Firefox, Chrome, Safari utan problem. Opera får jag uppgradera från 9.6 till 10.10 för att det ska funka.

Ett undantag? Jovisst. Internet Explorer har inte lärt sig detta än…