Related
So my page is working absolutely fine on FireFox and Google Chrome: http://www.cis130.net/bluehdoj/aboutresponsive
However, the styles I apply to my main tag simply aren't happening in IE11. I tried adding -ms- for the linear gradient but it didn't seem to change anything. If anyone could help me figure this out, I would be very appreciative.
Here's the code:
main {
margin: 0 auto;
padding-top: 5em;
max-width: 1000px;
background-image: linear-gradient(to right, #6E6E6E 50%, #F90 50%);
background-image: -ms-linear-gradient(to right, #6E6E6E 50%, #F90 50%);
min-height: 100%;
overflow: auto;
zoom: 1;
}
and the html:
<main>
<div class="leftCol">
<h2>Color Scheme Changer</h2>
<div class="button" id="changeScheme"></div>
<p>Whatever you do, don't click this button. It's seriously wicked evil. Like the Dirty Bubble, Man-Ray, and Barnacle Boy AKA Every Villian is Lemons evil.</p>
</div><!--Ends left column-->
<div class="rightCol">
<h2>Mirror Mode Button</h2>
<div class="button" id="mirrorMode"></div>
<p>This button, however, is pure good. It once saved a bunch of puppies from a burning building. I would highly suggest pressing it.</p>
</div><!--Ends right column-->
</main>
P.S. this is just a little assignment I've been working on for my into to web dev class and is fine to submit as is but I am a perfectionist plus I would like to know how to avoid the problem in the future.
It s Not supported in IE SOURCE
try HTML5 shiv
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Here is a sample of a fully browser compatible gradient. You can modify this as an example to create your gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
I would also like to add that you should not use background-image but rather just background.
If you want the gradient then using stops at 50% 50% wont work ! because the color stop 1 stops at 50% and stop 2 starts at 50% right in the middle so you see two boxes of orange and grey, however changing it to 0% and 100% will give you exactly balanced gradient.Check the image here.
To visually verify it please check this link from Microsoft itself, where you can generate gradient http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html or check the code below:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Opera */
background-image: -o-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(, #6E6E6E), color-stop(1, #FF9900));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #6E6E6E 0%, #FF9900 100%);
I currently have this
<div id="grad1"></div>
with the css
#grad1 {
height: 300px;
background: linear-gradient(0deg, grey, white);
}
http://jsfiddle.net/9g2zrqse/
im trying to make it just so there is more white then there is grey
You add stops in modern CSS by using % and the color for that stop (I've also included older versions, e.g. webkit-gradient which used the non-standard "color-stop"):
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* W3C */
You will also notice I used rgba colors instead of "grey" or "white". Using the preset names for colors is a bad idea. It's vague and could be different in every browser.
Have a look HERE (at the Using Multiple Color Stops section)
You could add another grey to your code
I want to make a decent but professional looking attractive body background for my website.
It should look like Twitter's background:
Can you see the blue shaded background? That's exactly what I want to make.
I don't have a good experience in web development and I'm pretty new to it. Please help me to create this background.
You can use this generator here
Example markup using those colors:
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #A3CEF2), color-stop(1, #5D95CC));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #A3CEF2 0%, #5D95CC 100%);
The css they use are as follows:
.mobile-callout {
background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
}
.front-page {
background-color: #292929;
}
So I guess the code you are looking for is:
'...': radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
When I add a background color gradient to my web page, it works fine up until the end of the last container in my body element. After that, the gradient stops working and you see a distinct contrast between the end of the container and the rest of the empty page.
To see for yourself:
Download the default web page from layoutit.com and edit css/style.css with:
body {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 30%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(30%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
The css was generated by http://www.colorzilla.com/gradient-editor/ , so I'm fairly certain it works because it seems to be the popular choice for making a gradient and it works on a non bootstrap page.
Any ideas on how to get the gradient to render through the whole page?
Edit
View an example at http://theshachar.com/so/
Thanks!
Based on your edit, the issue is that the background wasn't extending to the window height.
To solve this, simply add:
html, body {
height:100%;
}
Alternatively, you could also use viewport-percentage units like vw:
body {
height: 100vh;
}
you can also set a min-height:
body {
min-height: 100vh;
}
I'm working on a website from a PSD. In a section, I've seen that there are a mixed background color. I think It'll be a best way to match the color if I can use CSS3 gradient. But, I can't use CSS3 gradient. So, I took a help of "online CSS3 gradient background generator from image". Look, I want code for this background image:
But, from the online generator I've got this:
Look, the two images aren't same. There are a huge white color on the 1st image at the almost left to right which is absent in the 2nd image. Take a look please, the first image again:
I've used this online generator by uploading image and copy-paste the CSS code which it provided:
You can check the result at this link test link too: http://abidhasan.zxq.net/test/
So, how can I get the perfect CSS3 and cross-browser compatible code for the first image of this question?
The actual section of the PSD is:
Isn't the CSS3 gradient best and shortest way to make the background of that section?
I used ColorZilla's Gradient Editor and the ColorZilla Chrome extension in order to find the upper and lower bounds of the gradients you posted. Then I used the CSS rule sets generated by the gradient editor to make two div elements. I nested one inside of the other, and gave the inner div opacity: .5.
HTML:
<div class="gradient" style="width: 400px; height: 100px;">
<div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div>
</div>
CSS:
.topGradient {
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient {
background: rgb(224,224,224); /* Old browsers */
background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
The end result was this:
Here's a JSFiddle.