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;
}
Related
I'm trying to make a gradient which would be faded on the left and right, but solid in the middle. Is this possible? I've made my research, but couldn't find any tutorial online.
P.S. This is for Internet Explroer
You question is a little vague but it's just a matter of applying color stops as and when required.
If you apply two color stops at different points but the color is the same at both...you get solid color in the middle.
JSFiddle Demo
CSS (unprefixed)
.box {
width:25%;
height:200px;
border:1px solid lightgrey;
display: inline-block;
}
.one {
background: linear-gradient(to right,
rgba(255,255,255,1) 0%,
rgba(0,0,255,1) 25%, /* intermediate color stop */
rgba(0,0,255,1) 75%, /* second intermediate stop */
rgba(255,255,255,1) 100%)
; /* W3C */
}
Use the Gradient Editor for this
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.
I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?
Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.
Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.
You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.
I have an input type=button with a background color set and a different one on :hover - see http://jsfiddle.net/hc2Eu/3/
In IE (all versions) - when I mouse down on the button, move off the button, then mouseup - the background color stays in the :hover setting until you mouse over it again.
Is there some workaround for this? Preferably not with js? (IE6 not necessary)
There might be a fix to <input type="button"> - but if there is, I don't know it.
Otherwise, a good option seems to be to replace it with a carefully styled a element.
Example: http://jsfiddle.net/Uka5v/
.button {
background-color: #E3E1B8;
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
border-color: #aaa #444 #444 #aaa;
color: #000
}
Upsides include that the a element will style consistently between different (older) versions of Internet Explorer without any extra work, and I think my link looks nicer than that button :)
Try using the type attribute selector to find buttons (maybe this'll fix it too):
input[type=button]
{
background-color: #E3E1B8;
}
input[type=button]:hover
{
background-color: #46000D
}
You need to make sure images come first and put in a comma after the background image call. then it actually does work:
background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */