soulgrind r's Library tagged css →  View Popular

• h1 {
• background: transparent url(black50.png);
• background: rgba(0, 0, 0, 0.5) none;
• }

And there you have it-- spaces opening up where none have ever been seen before. It gets even worse with small images, like ones that are one pixel tall, as illustrated in Figure 7.

So how do we go about specifying the encoding? The proper way to do it is to send this information in the Content-Type HTTP header:

Content-Type: text/html; charset=utf-8

The HTTP headers are sent by our web server, so we must tweak the server to change the encoding information. How we achieve that will depend on which web server we use. For Apache, it can be specified in the global configuration file (httpd.conf) or in local .htaccess files. But if we're using a shared host, we may not have sufficient privileges to tweak the configuration. In that case, we need a server-side scripting language to send our own HTTP header; here's an example for PHP:

header('Content-Type: text/html; charset=utf-8');

Here
are simple guidelines for choosing an
X-UA-Compatible HTTP header or meta tag for a new text/html document that already has a doctype that triggers the standards mode or almost standards mode in other browsers:

Your domain is not on Microsoft’s blacklist and you care more about not having to have browser-specific cruft than about making sure users can’t regress the rendering to IE7 behavior

You don’t need to include an X-UA-Compatible HTTP header or meta tag.

	  -moz-border-radius-topleft: 20px;
          -moz-border-radius-topright: 20px;
          -moz-border-radius-bottomleft: 10px;
          -moz-border-radius-bottomright: 10px;
          -webkit-border-top-right-radius: 20px;
          -webkit-border-top-left-radius: 20px;
          -webkit-border-bottom-left-radius: 10px;
          -webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.

rgba(200, 54, 54, 0.5);
        /* example: */
        background: rgba(200, 54, 54, 0.5);
        /* or */
        color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

          color: #000;
          opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

@font-face {
        font-family:'Anivers';
        src: url('/images/Anivers.otf') format('opentype');
        }

The rest of the font family, containing secondary options, is then called as usual:

        h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: