The Menu for my site is acting odd in IE now, where it was fine before. I moved the files for the site to a company network share and now it will not display the CSS properly. The CSS should add border radius/rounded edges, it z-indexes so it goes on top other divs, etc, and after the move it does not do this anymore. If I hit f12 in IE and select IE10 - not IE10 compatibility - it does load fine.
Is there something I need to fix in my CSS?
height:41px;
background: #fff;
background-color: #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
IE10 compatibility mode emulates IE7, which supports almost none of the used css3 properties. Unless you start using IE hacks like this one for border-radius, they will not render. (Both box-shadow and border-radius are IE9+)
This is why your site should follow the ideals of graceful-degradation. You should debug so positioning and stacking (z-index) work as they are designed, but minor eye candy may go out the window.
Related
I have a wordpress theme css override. I wanted to have linear gradients under the widget titles.
I used the following code:
.widget-title {
border-bottom: 3px solid;
border-image: linear-gradient(to right, green 10%, orange 25%, yellow 50%,purple 50%, indigo 75%, indigo 75%) 5;
padding-left: 0px;
padding-right: 0px;
On chrome and firefox it underlines the title just like I want.
On Safari it creates a border all the way around the title.
Safari
Chrome
Try using below:
border-width: 0 3px 3px 3px;
border-top: none;
I am not good at css but have created css button looks pretty good.
But it does not give shining like buttons in Yahoo mail or button # http://www.alchemyapi.com/products/demo/
Here is my fiddle demo:
http://jsfiddle.net/karimkhan/y6XGg/
I appreciate if some can help me to beautify it!
<input type="submit" class="button" onclick="GetSentiment()" id="GetSentiment" value="Get Sentiment" />
Does it css or css3? what's different
It looks like the gradient on your demo is going from one colour, to the same colour, therefore, not really producing a gradient at all !
Look at this: http://jsfiddle.net/y6XGg/1/
background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%);
Useful link : http://www.colorzilla.com/gradient-editor/
They are using a gradient, which can be done by using an image or css3 like this:
background-image: linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -o-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -moz-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -ms-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.43, rgb(150,150,150)),
color-stop(0.72, rgb(179,179,179))
);
There are many gradient generators online like:
http://gradients.glrzad.com/
In your css
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
display:inline-block; /* IE is so silly */
}
Your your gradient goes from #F70247 to #F70247 so no gradient you have to change one of these color values to another that please you
Your current background has a gradient which goes from one colour to the exact same colour (meaning no gradient is even applied).
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
/* Etc... */
Is absolutely no different to:
background: #F70247;
Your start and end colours are both #F70247. If we change one of your colours to something different, we can generate a gradient (JSFiddle demo):
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#EEE));
background: -moz-linear-gradient(top, #F70247, #EEE);
/* Etc... */
Here we're going from #F70247 to #EEE.
Colorzilla's Ultimate CSS Gradient Generator is a WYSIWYG for generating CSS gradient backgrounds which are compatible with old and new browsers. I'd strongly suggest using that if you wish to create a gradient similar to the one you linked.
You can use multiple inset shadows to get some of the effects you're looking for, see:
http://jsfiddle.net/y6XGg/2/
-webkit-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
-moz-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
Your background gradient can be tweaked too to make a stronger effect.
You could simply go to http://cssgradientbutton.com/# and generate a button from there. You can edit the button and increase the border radius size to change the rounding of the corners to match your jsfiddle. It also generates css for when you hover over the button, giving it the feel of being pushed in slightly.
You can also add inset shadows, which can give a nice look:
Before hover:
On hover:
Is it possible to have the same effect that this image has with pure CSS? It doesn't have to be a perfect match, but something that is close enough so I don't have to depend on such images...
thanks. It looks like the lightness of the gradient angles cut in towards the edges...and the same light gradient drops down a couple pixels from the top...
With no css gradients, here's something that's embossed, but not the bevel in your example:
<div style="background:#1d1d88;width:200px;height:50px;border-radius:10px;box-shadow: inset 0px -5px 20px 8px #060618;"></div>
It works best with a little border radius. If you want to add a gradient, I recommend http://www.colorzilla.com/gradient-editor/
Here's a quick class with a gradient:
.bevelish {
width: 200px;
height: 50px;
box-shadow: inset 0px -5px 30px 3px #000052;
background: #2f2e59;
background: -moz-linear-gradient(top, #2f2e59 40%, #00003d 60%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#2f2e59), color-stop(60%,#00003d));
background: -webkit-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: -o-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: -ms-linear-gradient(top, #2f2e59 40%,#00003d 60%);
background: linear-gradient(to bottom, #2f2e59 40%,#00003d 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2e59', endColorstr='#00003d',GradientType=0 );
}
The key is the inset in the box-shadow, and there's also I believe a 5th parameter you can add, a pixel value, for strength of the shadow, so you can play with the values and try to approach something beveled, but I'm not sure you can make it a "sharp" bevel.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
af http://dl.dropboxusercontent.com/u/62862049/Screenshots/pf.png
I've managed to replicate it partially: I've got a bottom with rounded, solid border, solid colored background. I'm stuck on the effects: the highlight on top - the way the background color is not uniform - and the text and the bottom itself seems to have a shadow. So, I've used so far: border, border-radius, background-color. How are those done?
Something like : http://jsfiddle.net/rEHSL/
Have a look at the CSS3 box-shadow property.
The CSS for the background gradient is from - http://www.colorzilla.com/gradient-editor/
CSS:
#test { color:#fff; font-size:18px; text-align:center; width:300px; height:100px; background:orange;
/* Inner and Outer shadows */
-webkit-box-shadow: inset 0px 0px 2px 2px rgba(255, 255, 255, 0.8),
0px 0px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 2px 2px rgba(255, 255, 255, 0.8),
0px 0px 2px 2px rgba(0, 0, 0, 0.2);
/* rounded corners */
-webkit-border-radius: 15px;
border-radius: 15px;
/* graident bg */
background: rgb(255,175,75); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
I'm trying to wrap my website differently so that the background is divided in 2. The gray part which is the main background but also a white part which is smaller and wrap the main-content.
Basically I'd like this to look like this.
I'm not quite sure how to add the images to create that shadow effect and I also don't know how to create that white wrapper.
Right taken a look. Let me know the outcome.
.main-content{
background:#FFFFFF;
width:90%;
margin:0% 4% 0% 5%;
}
easy solve method:
.main-content{
-webkit-box-shadow:0px 0px 3px 5px #000000;
-moz-box-shadow:0px 0px 3px 5px #000000;
-o-box-shadow:0px 0px 3px 5px #000000;
box-shadow:0px 0px 3px 5px #0000000;
}
Or the gradient you asked for:
.main-content:before{
background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
content:'';
z-index:98;
position:relative;
width:105%;
height:400px;
left:-2%;
}
But this gradient method only really works for browsers that support the 'webkits' and their updated counter parts. But I haven't really tested it so you might want to play around with it etc. And if you don't like it try the box-shadow method :)
You'll need to adjust the element div.bann to correct some positioning errors. theres a in the element because the element is taller than the image.
.bann{
width:90%;
height:auto;/*probably can remove this*/
margin:0% 4% 0% 5%;
padding:0px;
}
.bann>img{/*not required if you haven't adjusted the image. You can remove this completely.*/
width:100%;
height:auto;
}
I wouldn't recommend using an image. Too large. Heres two methods. Don't forget that rgba() doesn't work in [lte ie 8] (I think?). Also I've used the :before pseudo so that it's placed before the element but you may find this wouldn't be necessary. But using the pseudo element you can then position your effect.
#element:before{
background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
content:'';
}
#element{
background:#CCCCCC;
}
And for ie (I would really recommend it. To be honest I wouldn't bother with ie lol) use only hex colours using your background colour for the body.
#element{
background:linear-gradient(top,#000000 0%, #CCCCCC 100%);
}
Besides lte ie 9 can't use the linear-gradient property anyway!
Another method is to use box-shadow but this wouldn't achieve the transparent gradient you're looking for.
#element{
box-shadow:0px 0px 3px #000000;
}