Radial gradient background - html

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;

Related

<main> CSS not applying in IE11

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%);

CSS Control gradient stops

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

CSS linear gradient from center

I am wondering if it is possible to do something like this with css gradients alone:
http://postimg.org/image/nxciwsv4f/
In this example the center orange would fade into grey in all directions.
The black rectangle represents a div.
I couldn't find this on w3 schools, although there were various other gradient-related
capabilities.
Isn't that exactly what radial gradient is all about?
background: #eded2f; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #eded2f 0%, #474919 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eded2f), color-stop(100%,#474919)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #eded2f 0%,#474919 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #eded2f 0%,#474919 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #eded2f 0%,#474919 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #eded2f 0%,#474919 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eded2f', endColorstr='#474919',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
See fiddle: http://jsfiddle.net/fLKuH/

Technique to achieve gradient which can be full height or header only

I'm looking at the heroku website: https://www.heroku.com/
I was curious how they have achieved the ability to have a full page gradient on the home page with content under it, and then on the next page, seemingly with very similar markup, they have been able to keep the exact same section of gradient but applied only to the navigation bar at the top.
How might I get that kind of technique?
Apply the gradient to the body, and then having a transparent div on the front page?
Apply the gradient to a full height div, then have a transparent header div on top of it with a white coloured body.
Demo Header gradient as heroku
Demo Background gradient as heroku
Demo Background gradient in general with all cross browser styles and support
html {
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(61%, #207cca), color-stop(100%, #7db9e8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
min-height: 100%;
}
You can use your inspect tool to see their css:
background-image:
-webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
This is just a bit complicated, but not too much:
1) You can have multiple backgrounds, which is often useful as a fallback or for more complex gradients
2) You can set the origin and "destination" of a gradient using percentages or just names like "top right" "bottom" and such, thus avoing having to give an angle - so it's always the same thing, independent of the aspect ratio.
Worth noting is, that they specifically only support webkit (Chrome, Safari), even though I'm pretty sure this could easily be done on any modern browser.
Hope this clears it up a bit.
Read about "parallax" technology on the web

How to generate CSS3 gradient background

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.