HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 45. ADVANCED EYE CANDY 333


45.4 Translucent Background


By “translucent” we mean partially transparent. You can see it, and you
can also see through it.


You have a layer of text, and you want to be able to see through it to the
background image. Opacity does not work because it changes background
and text both. To change just the background, do this:


Tint (whiten) the background, and make it partly transparent.


background-color: rgba(255,255,255,0.5);


Shade (darken) the background, and make it partly transparent.


background-color: rgba(0,0,0,0.5);


The last number, in these examples 0.5, is the opacity. It ranges from 0.0
(totally transparent) to 1.0 (totally opaque).


This works well with adivthat surrounds everything. For example:




Put your content here.



45.5 First Letter Different Style


Say you want the first letter of the first paragraph to be a fancy letter from
a whole different font, like Old English. How can you do that?


We can use pseudo-classes to achieve that result.


todo: add more


45.6 Fancy Characters (Glyphs)


Besides the normal A to Z, 0 to 9, and punctuation, there are many other
characters that can be used to dress up your webpage.

Free download pdf