Working on a clients site which they seem to have changed some code by accident. The slider content now seems to have a strange boxed border around it ! You can see this on www.happyorganic.org
I have checked the CSS which has been applied to it but there seems to be no border on it. The slider is created with the plugin for WP called wordpress slider plugin.
Any Ideas?
Remove box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); in .flexslider and remove box-shadow: 0 0 1px 1px #888888; in .ssp_no_chrome_slider_default
This question already has answers here:
Inner shadow to div in IE
(3 answers)
Closed 9 years ago.
Need help converting some css that I have working in the good browsers to now work for internet explorer. This is what I have right now
.headerLoginFooter
{
background-color:#f5f5f5;
padding:7px 10px 7px 10px;
margin:20px 0 0 0;
-moz-box-shadow:inset 0 8px 6px -6px #c4c4c4;
-webkit-box-shadow:inset 0 8px 6px -6px #c4c4c4;
box-shadow:inset 0 8px 6px -6px #c4c4c4;
}
The three attributes at the end are producing an inward glow within the footer section of the login box for that div that looks like this
I was able to get the code for this styling here CSS Tricks but I need to make this compatible for Internet Explorer. My first problem is I only have a mac so I don't have internet explorer to easily test my code. My second problem is I'm not getting how to convert the above code like he has in his code. Could someone help me convert my above code to work for internet explorer following the guidelines within the link. Thank you.
IE is very problematic with many CSS3 features, especially older versions.
I would recommend using CSSpie for use in your CSS stylesheet. This has been answered previously here.
Some things can prevent box-shadow from working in IE: (if they are applied to the same element)
rounded corners / border-radius
overflow:hidden
background-color
background gradients
To overcome this, I usually nest a container inside the one I want to style with a box-shadow.
<style>
.boxShadow {
behavior: url(PIE.htc);
-webkit-box-shadow: inset 0 8px 6px -6px #c4c4c4;
-moz-box-shadow: inset 0 8px 6px -6px #c4c4c4;
box-shadow: inset 0 8px 6px -6px #c4c4c4;
overflow:visible;
}
.otherStyles{
background-color:#f5f5f5;
border-radius:0px;/*or other value*/
/*gradients can be placed here too.*/
}
</style>
<div class="boxShadow">
<div class="otherStyles">
...content...
</div>
</div>
I needed to show color around the text in my HTML page, I tried border property but it is giving square box around the Text.
How to achieve below requirement
Thanks.
I would write the code here... But this link http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects explains it so well.
Example Demo : http://codepen.io/anon/pen/CDsFb
This is actually much better ...
text-shadow: 3px 3px 0 #000,
/* Simulated effect for Firefox and Opera and nice enhancement for WebKit */
-3px -3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
3px 3px 0 #000;
This will ensure it looks like a proper border you want and not a simple glow around your text.
You are looking for text-shadow CSS property
text-shadow: 0px 0px 3px orange;
http://jsfiddle.net/NGPhL/
http://www.quirksmode.org/css/textshadow.html
You may use
text-shadow: 0px 0px 4px #1d1dab;
filter: dropshadow(color=#1d1dab, offx=0, offy=0);
http://css3generator.com/
If browser don't support CSS3:
Use can use two text nodes with 17px and 18px font-size (for example) and positioning by CSS first under second (position:absolute, z-index:100, left, top, etc) with different colors.
Thanks For your suggestions, I found an example to get this requirement here
http://gazpo.com/2011/02/text-shadow/
7. Border Around the text
text-shadow: 0 -4px #00468C,4px 0 #00468C,0 4px #00468C,-4px 0 #00468C,4px -4px #00468C,-4px 4px #00468C,4px 4px #00468C,-4px -4px #00468C;
You can use the CSS3 text-shadow property. As long the browser supports webkit, this should surfice.
main-heading h2{
-webkit-text-stroke: 2px #42a6e1;
}
The text-shadow not working fine. So use text stroke instead of text-shadow. Text shadow also makes difficulties at different devices.
You can see in the screenshot given below
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.
I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers
ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!
Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);
Box shadow supported from IE 9 onwards.
CSS3pie is a tool that lets you use some css3 properties in IE.
What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.
As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows.
In that site there's also a very similar effect, you should be able to adapt it for your needs.
This should work in all browsers:
.allSidesShadow {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
/* For IE 5.5 - 7 */
/* for IE4 - IE7 */
filter:
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
-ms-filter: "
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
";
}
As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.
The answer posted by Sekar, needs a little editing,
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
this doesnot work on IE(I checked on IE8).
box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.
I cant see your picture now, but for all side shadows I use the below code:
box-shadow: 0 0 5px 0 #000;
Instead of the 5px use your size.
You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.
You can do this with three divs, assuming they are all the same (fixed) width:
<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>
.top{
background:url('top.png');
height:20px;
width:800px;
}
.middle{
background:url('middle.png') repeat-y;
width:800px;
}
.bottom{
background:url('bottom.png');
height:20px;
width:800px;
}
Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.
You can place the following code in the div in order to drop shadows on all four sides.
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);