I want to know how can I fix the border of this play button. It has 1px of border and 50% border-radius, and it looks ugly. 2px looks ok but I need 1.
Same questions solved here by Guy.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
or try box-shadow: 0 0 1px 0px #yourBlueColor inset, 0 0 1px 0px #yourBlueColor;
this problem is correlated to resolution dpi of your screen device , you can fix this with
border: 2px solid rgba(42, 91, 195, 0.35);
use 2px but use also a rgba transparent effect for reduce the size of border
Not great, but looks quite a lot better by setting besides the border at 1px, an inset box-shadow with 1px blur-radius of the same color:
border: 1px solid #333;
box-shadow: inset 0 0 1px #333;
Related
I want to achieve this text style like so:
I want to wrap the text with color white like the image above I tried using
text-shadow: 0px 0px 5px #fff;
but it turns out that the shadow will get blurry. Is there any chance that I can do it using css (if so how)? or should I just convert it into image?
You can simulate it, doing like this:
CSS
span{
text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}
DEMO HERE
The effect you seek is called stroke and sadly not possible (yet) with CSS in a cross browser compatible way.
Faking it with shadows will not work for a stroke thicker than 1 or 2 pixels, or require a ton of layered shadows, slowing down rendering. Other faking techniques are possible but not quite fantastic.
For now the best bet remains to use images for the rare occasions where this is useful.
Ran into this today and at least for Webkit browsers, there's a better solution. You can follow this old article using the code
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
and also try using text shadows with it. It worked well for me after some pixel-pushing. I have some bigger letters, so I ended up using a text shadow like this
text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;
I hope that helps!
I am using CSS3 property
box-shadow: 2px 2px 2px 2px #CCCCCC;
Its giving this wierd effect on the right hand side and the bottom.
How to make the shadow to be equal on all the sides ?
Use
box-shadow: 0 0 2px 2px #CCCCCC;
instead
See this jsFiddle
The first two numeric values specify the relative x and y offset of the shadow. Hence your shadow was displaced/offset by a vector of (2px , 2px), or 2px right, and 2px down.
The third numeric value specifies the blur, and the fourth the shadow size/spread, and the fifth the colour (in HEX)
Use this:
box-shadow: 0px 0px 2px 2px #CCCCCC; /* Horizontal Length: px, Vertical Length: px, Blur Radius: px, Spread: px, Color */
You can test CSS3 here: http://css3generator.com/
box-shadow is defined as: horizontal offset - vertical offset - shadow spread - blur size - color
You could just do: box-shadow: 0 0 2px 2px #ccc;
You can do this by setting the first 2 values to 0px:
box-shadow: 0px 0px 2px 2px #CCCCCC;
See more: w3schools
Here's my source image:
And my source image zoomed in:
Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.
Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.
See Caniuse page for border-radius and box-shadow.
the best (and only) way to do this is to use multiple box-shadows:
element {
box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
border-radius: 20px;
}
box-shadow works like this:
box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];
border-radius works like this:
border-radius: [size];
/*or*/
border-radius: [topleft/bottomright size] [topright/bottomleft size];
/*or*/
border-radius: [topleft] [topright] [bottomright] [bottomleft];
you can specify the Height an length of the curve like this:
border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];
It's just using two box shadows, one inset and the other outset, i.e:
.box {
width: 100px;
height: 100px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
border: solid #ccc 1px;
border-radius: 10px;
margin: 50px 0 0 50px;
}
See it here: http://jsfiddle.net/WYLJv/
This is actually done with two CSS3 box-shadows.
CSS:
#fuzz
{
height: 100px;
width: 100px;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}
You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)
Obviously change the colors to your taste :)
Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.
I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.
.block {
border-radius:6px;
box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}
Try adding a border-radius and a text-shadow in your css.
.box {
border-radius:20px;
text-shadow:2px 2px black;
}
Hope this helps.
You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.
If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.
Regards,
Richard
Is it possible to have the shadow surround the entire DIV?
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
I know the order of attributes goes:
Horizontal offset
Vertical offset
Blur radius
Color
But I wonder if it's possible to make the shadow go all around it instead of showing up only on one edge or side.
You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle
Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle
You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle
The full property list is:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?
But even better, read through the spec.
Just use the below code. It will shadow surround the entire DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
Hope this will work
The CSS code would be:
box-shadow: 0 0 10px 5px white;
That will shadow the entire DIV no matter its shape!
Use this below code
border:2px soild #eee;
margin: 15px 15px;
-webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;
Explanation:-
box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.
box-shadow : inset/outset h-offset v-offset blur spread color;
Explanation of the values...
inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.
h-offset -- the horizontal offset of the shadow (required value)
v-offset -- the vertical offset of the shadow (required value)
blur -- as it says, the blur of the shadow
spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.
color -- as it says, the color of the shadow
Usage
box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html