So how can I do this, using css3, mabe box-shadow? http://screencast.com/t/48LooBwz
Can someone help me?
I need to apply that styling to an element?
Best Regards,
You could use box-shadow, and hack it for IE:
.shadow {
zoom:1; /* This enables hasLayout, which is required for older IE browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
-moz-box-shadow:2px 2px 2px #b0b0b0;
-webkit-box-shadow:2px 2px 2px #b0b0b0;
box-shadow:2px 2px 2px #b0b0b0;
}
Here's an example: http://www.splashdust.net/2010/05/ie-hack-css-dropshadow/
What do you mean, a 1px drop shadow? Yep, 'box-shadow' would do (except for IE of course).
/* horizontal offset, vertical offset, blur radius, color */
box-shadow: 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
Do you mean this : box-shadow: 0px 10px 5px #888; ?
info : http://www.css3.info/preview/box-shadow/
Doesn't work in all browser.
Related
Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.
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;
I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.
It looks like the border around the text "Link2" of the following image.
The border around the text "Link" is what I did. The code is visible from this link.
jsfiddle.
Can someone help me to write the css code to reproduce the border of Link2?
Thanks
You'll need to use box-shadows, like this:
http://jsfiddle.net/GolezTrol/AEDsY/
.cl3 {
-webkit-box-shadow: 0 0 3px 3px lightblue;
-moz-box-shadow: 0 0 3px 3px lightblue;
box-shadow: 0 0 3px 3px lightblue;
}
That effect is achieved using the box-shadow css property.
To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.
To get your desired effect, use:
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
You would use something like this:
-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.
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
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