You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself. Demo .blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: … Read more
Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* … Read more
Method 1: If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren’t supported either, but this is exactly the kind of thing they were made for. CSS #test p { margin-top: 25px; font-size: 21px; text-align: center; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein … Read more
Children inherit opacity. It’d be weird and inconvenient if they didn’t. You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color. Example, 50% faded black background: <div style=”background-color:rgba(0, 0, 0, 0.5);”> <div> Text added. </div> </div>
It sounds like you want to use a transparent background, in which case you could try using the rgba() function: rgba(R, G, B, A) R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or … Read more
Either use a semi-transparent PNG or SVG image or use CSS: background-color: rgba(255, 0, 0, 0.5); Here’s an article from css3.info, Opacity, RGBA and compromise (2007-06-03). Beware that the text still needs sufficient contrast with the background, once the underlying background shines through. <p style=”background-color: rgba(255, 0, 0, 0.5);”> <span>Hello, World!</span> </p>