css transparency code example
Example 1: css transition opacity
/* Answer to: "css transition opacity" */
/*
CSS transitions allows you to change property values smoothly,
over a given duration.
*/
.myClass {
vertical-align: top;
transition: opacity 0.3s; /* Transition should take 0.3s */
-webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
opacity: 1; /* Set opacity to 1 */
}
.myClass:hover {
opacity: 0.5; /* On hover, set opacity to 2 */
}
/*
From `opacity: 1;` to `opacity: 0.5;`, the transition time should
take 0.3 seconds as soon as the client starts to hover over the
element.
*/
Example 2: css opacity background color
background: rgba(255, 255, 255, 0.25);
Example 3: css opacity example
.opacity30 {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Example 4: css opacity
.div{
opacity: 0.8; /* 1 means fully visible, 0 means invisible */
}
Example 5: background color with opacity
h1 {background-color:rgba(255,0,0,0.3);}
Example 6: opacity css
div {
background-color: yellow;
}
.light {
opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
}
.medium {
opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
}
.heavy {
opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
}