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
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've been researching on drop-shadow-effect technique for web design.
So, I would like to apply the technique to use implementing a top header bar for my website.
From my findings, the one that people out there use the most is box-shadow css property.
I'd like to know if this is the most effective yet simple way to achieve the desired outcome or not. any other options available for me to implement the same as well as their pros and cons?
any advice would be very much appreciated?
Simplest way is Photoshop :)
Otherwise, read on: http://www.css3.info/preview/box-shadow/
box-shadow is a CSS3 property, meaning it's not available in < IE9, and not natively available in most browsers, hence the proprietary prefixes:
Sample CSS code for IE drop shadow:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');
CSS3 version:
element {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The only other option to the CSS3 box-shadow property is to use images. CSS3 box shadows are easier to apply and require less page weight (kb) to use. However, not all browsers will support CSS3 box-shadows.
If using the box-shadow property be certain to set all the various properties for different browsers.
box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
-o-box-shadow: 1px 2px 3px #000;
-khtml-box-shadow: 1px 2px 3px #000;
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
Is it possible to remove a style in the case that browser specific CSS 3 items (drop shadows, rounded corners, etc.)? For example:
.fancy
{
/* only display if no drop shadow support */
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
It's better if you don't remove style rules, but only apply them when CSS3 is enabled. You could use this fancy piece of Javascript for it, called Modernizr.
Let me give you a quick example of how you could use it in your stylesheet:
.boxshadow .fancy {
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
Modernizr adds classes to the HTML element, which tells you what browser functionalities are enabled.
CSS doesn't do conditionals. In any version.
What you can do is dynamically serve up different stylesheets for browsers that support CSS3.
Since CSS3 is style-markup, and not a programming language, you can't do true "if-else"--however you could design your CSS3 styles to override the CSS2 styles, and the end result would be CSS3 where supported with CSS2 as a fallback.
In terms of practicality however, this approach will likely be more painful than dynamically serving CSS3 stylesheets to supported browsers.
One means -though given the patchy nature of css adoption/implementation it might/will not work exhaustively- is to use:
.fancy
{
border: thin solid #888;
}
.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
border: 0 none transparent;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
This is a bit messy in that the selector has to explicitly target all the odd and even .fancy elements, I'd prefer a neater solution but it does work (certainly in Chrome/Linux). Demo at: http://jsbin.com/ezako3