CSS Transparency

headmaster @ 9:23 pm


CSS logoThis post contains useful code and related bits regarding transparency in CSS. Minimal Discussion, mostly CSS code and examples.

A Word About Browsers

This post applies to the following browsers: Mozilla Firefox and Google Chrome. To see how it’s dome in IE see this post.

How to make the background color transparent but not the text.

.transparent-background {
    border: thin double Silver;
    color: #FFEBCD;
    font-size: 28px;
    padding: 10px;
    background-color:rgba(255,0,0,0.5);
}

And here’s the proof!

A transparency example with rounded corners.

.transparent-background-round {
    border: thin double Silver;
    color: #FFEBCD;
    font-size: 28px;
    padding: 10px;
    background-color:rgba(255,0,0,0.5);
    border-radius: 45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
}

And here’s the proof!

An example of a transparent circle

.transparent-background-round {
    position: relative;
    left: 25%;
    width: 200px;
    height: 200px;
    border: thin double Silver;
    color: #FFEBCD;
    font-size: 28px;
    padding: 45px;
    background-color:rgba(255,0,0,0.5);
    border-radius: 150px;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
}

And here’s the proof!





Ajax CSS CSS gradients CSS rounded corners CSS Style Sheets CSS Transparency error Failed Evaluations footer header image gallery JavaScript javaScript JavaScript Errors jQuery jquery Lightbox light box links open source PHP PHP PHP scripts Pretty Photo prettyPhoto Programming Languages Script Evaluations Search Engine Optimization StatusNet StatusNet themes templates themes Useful CSS Code Useful WordPress Code Web Applications Web Design Web Development Webmaster Toolbelt WordPress wordpress Word Press WordPress 3.3.2 word press links WordPress Plugins wordpress theme
  • Digital Goodies