I have a div that has transparent background-color. I want to blur its background color so the transparent color is blurred and the text on the div is more easy to see.
I appreciate your help.
You can't blur a color. That wouldn't do anything.
What I think you'd want to do is add a text-shadow enough that the text is blurred and maybe darken the background. Try this:
#not-selected {
text-shadow: 1px 1px 2px #<slightly darker text color>;
}
#text-background {
background-color: #<a little darker>;
}
CSS doesn't have the ability to blur, you can however, simulate the effect using background images.
Also, you may want to look into filters, but these only work in IE.
Related
I'm new to CSS so I don't know a whole lot, but I'm trying to make my header text a gradient. I've made the background gradient, made the text transparent, and still, the background just will not clip to the text like it's supposed to. I can't find anyone else with this problem. (originally my background was a gradient, but for simplicity I changed it to red)
h1 {
color: transparent;
background-clip: text;
background: red;
}
is there a way to set background-color in safari to transparent? Currently my png is displayed with a white background instead of transparent.
I've tried:
background-color: transparent;
background-color: rgba(255,255,255,0);
appearance: none;
and even
-khtml-background-color: transparent;
Nothing wrong with your CSS, but if you've saved your image with a colored background (e.g. red/white/yellow) it's not possible to "overwrite" this color using CSS. Therefore you need to make sure the background of the image is transparent.
Take a look at the following page to get an idea of what I described.
https://www.causevox.com/blog/using-the-right-logo-image-transparent-png/
I have a background image and below that I want to have a color.
I have this CSS:
body {
background: url('/images/background.jpg');
background-color: #000;
}
But the image appears with no color. I've also tried this:
body {
background: #000 url('/images/background.jpg');
}
But that doesn't work either. What am I doing wrong?
What do you really want? The background color around the image background or in the back of the image? If it's in the back of the image you have to use an .png (transparent) image and the background: #000 url('/images/background.png');
background: #000 url('/images/background.jpg');
Your background color is actually working but it is being overlapped by declaring a background-image. Unless your image supports transparency like .png and opacity was declared. You would be able to view your bg-color.
It will help if you provide us your exact image and the output you want to achieve.
Use in this way background: #657b78 url('../images/background.jpg') repeat top left;. Do not forget to check if the URL of such image is correct.
Can someone take a look at my background shadow? Here is the link:
link text
I'm trying to find the best solution for having a background shadow for a card in the front (layered).
Is it possible to make the sides of shadow cave in with CSS?
I'm currently using a PNG with transparency and I can't get the shadow to match with the background!
Any suggestions would be helpful.
To get your image to line up you can do it in css:
#card_main {
background:url("/img/shadow.png") no-repeat scroll 0 0 transparent;
margin:0 auto;
min-height:800px;
position:relative;
top:-1px;
width:980px;
}
Though your background gray color seems to be different in the image than the background.
you can also make your shadow.png only be the text shadow, not including the background-color for the header and content area in the png.
or, you can simply use the box-shadow css declaration for webkit and FF. and a filter for IE. if you're interested in this solution i can post some sample code.
Can someone help me understand a way of adding rounded corners top left and top right of the current page link below? I have used jQuery corners but this doesnt work in IE very well... I was looking to use PNG. The space between the corners should be white. The PNG would be transparent letting whatever image was below to show through.
<ul>
<li class="current"><span>Home</span></li>
<li><span>Create Account</span></li>
<li><span>Order a Catalogue</span></li>
<li><span>Distributors</span></li>
<li><span>About Us</span></li>
<li><span>Contact Us</span></li>
<li><span>Login</span></li>
</ul>
Any help would be greatly appreciated.
Draw your rounded rectangle in something like Paint.NET (make sure you have a transparent background!) and make it the exact width of the LI. Give it more than enough height so that you can cut off the button rounded corners and it will still be tall enough to fill the LI. Cut off the bottom rounded corners, crop accordingly, and save it as a PNG. Set it as a background image on the element with CSS...
ul li.current {
background:url(../images/nav-current.png) no-repeat;
}
Note: if you use a background color on the LI, it will bleed through the transparent part of the rounded corners, which is not good.
Moving forward... you can just use the CSS3 border-top-left-radius and border-top-right-radius along with background-color (no images!), but these are not supported in IE8 and older.
Hey friend to apply border radius that works in IE also you have to apply border-radius.htc file and you can apply it to your CSS like this one. In my project i am using it on Div tag but you can use it whereever you want.
div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
you will find border-radius.htc file on google also. If you can provide your emailid then i can mail it to you if you want