as you see there are two pictures.First, on chrome . There are Beğen and Yorumlar buttons on right side.Border is looking very well..
But second pictures shows that ; firefox and opera have problem with border radius.I try to do border-witdh:thin, border:1px solid etc.. But Its look like same.
How can handdle it ? Do you have any idea ?
sorry for my english.Thank you
image on chrome
image on ff and opera
This effect is commonly referred to as "background bleed", or "leaking". It can be fixed through some simple CSS:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
I first learned of this from Mike Harding's blog:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
And here's the W3C spec:
http://www.w3.org/TR/css3-background/#the-background-clip
... it almost looks like may get away without using border at all. There's enough contrast between the button and the background. Did you try using outer glow of 1px (blur-radius)?
-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];
To help with chome's border to border:1px double .... I know chrome has an issue with borders with a radius. Setting it to double rather than solid helps clean it up a bit. Kind of annoying.
Related
As the title suggests, I'm trying to add font borders to the text I have in a page I'm making. The background has a lot of reds, greens, yellows and blacks so a single colour really wouldn't suffice. Here is the code.
I know I can do something with webkit like this:
h1 { -webkit-text-stroke: 1px black; }
But since it's not supported on browsers I'm stuck on square one.
Can anyone help me?
For a 1 pixel stroke, text-shadow would do:
text-shadow: 0 0 1px black;
Using
You can only use text-stroke on webkit browsers (Chrome, safari, etc)
Source: caniuse.com
But like other poeple answered, you can use text-shadow instead
p {
text-shadow: 0 0 1px black;
}
FIDDLE
http://www.w3.org/Style/Examples/007/text-shadow.en.html
see this link may help
it adds text shadow to letters if you dont want feather then keep value to 0px will give you border around text
I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.
Here's the sample, what I am trying to achieve:
And what I did until now:
<div style="padding-left: 15px; position:absolute;">
<img src="avatar.png" alt="" />
<img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
</div>
It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?
If your images are going to be irregular sizes, an SVG as background-image is what you're looking for. Adobe Illustrator ($$$) or Inkscape (free) can be used to create the unusually shaped shadow as an SVG file. From there, all that should be necessary is this CSS:
.myImage {
background: url(myShadow.svg) no-repeat;
background-size: 100% 100%;
padding: ? ? ? ?; // the values will have to depend on your bg image
}
In depth explanation can be found here: http://designfestival.com/a-farewell-to-css3-gradients/
If your images are all the same size or you don't care about any graininess that might occur when it is resized, then a PNG as your background would work just as well.
You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.
This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.
Hope this helps.
This is because, that would not be supported by that particular browser. You might be missing vendor-prefix
Opera 10.50 (currently only available on Windows) is the first web
browser to have an implementation without a vendor-prefix, whereas
Firefox, Safari and Google Chrome all need it for now. So, this code
makes it work in all those web browsers
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
Further you can refer these links
Drop shadow with css for all web browser
Box shadow
This is a more generic solution, but may be useful to others. I added the following to the <head> section of the HTML:
<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>
and it worked great for adding shadows to all images.
I create this text effect:
.inset-text
{
background-color: #666666;
-moz-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0 3px 3px;
}
<p class="inset-text">Some Text</p>
Unfortunately If you try to run this example using Firefox you see a gray rectangle instead in Chrome everything works well.How can I resolve this issue?
Are you sure that background-clip can take the value text? In either w3schools or the Mozilla Developer Network I don't see this listed. By the way, Firefox now accepts just background-clip too.
background-clip: text;
Is only supported in webkit-based browsers right now (Chrome and Safari). It's non-standard so it's hard to say if the text attribute will ever become supported in the other browsers (Firefox, Opera, and Internet Explorer). What effect are you trying to accomplish? I can probably give you a good alternative without using it.
http://jsfiddle.net/pixelfreak/Eq246/
Notice the gray border on the white triangle. This only happens on FF 6 Windows (I did not test on older FF version)
Is there a fix to this? It looks like bad anti-aliasing or something.
Give it a try with this:
border-style: outset;
http://jsfiddle.net/KDREU/
edit
Looks like if you put outset on one of the 4 border styles you can use colors other than white and not have them lightened.
/* This works for an orange down arrow that I'm using. */
border-style: solid outset solid solid;
http://jsfiddle.net/fEKrE/1/
It happens on FF6 on Linux too. It's going to be an artifact from antialiasing the diagonal line. AFAIK, there isn't a way around this other than to use an image.
fixed with
border-style: solid dashed solid solid;
tested on firefox 19.0.2, opera 12.04, chromium 25.0.1359.0
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.