I am trying to do a vertical two tone background (using css gradient) for my site using twitter bootstrap, such that the gradient ends in the center of the gutter between the spans in a row fluid. I already have the gradient code (shown below) and am trying to figure out what to put for the x's so that the background changes where I want it to. Here is a visual example:
<----------color 1----------><------------------color 2----------------->
<-----span 4--------><-gutter-><------------span 8 ---------------->
What should go in the x's below?
background: #333333; /* Old browsers */
background: -moz-linear-gradient(left, #333333 0%, #333333 x, #ffffff x, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(x,#333333), color-stop(x,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* IE10+ */
background: linear-gradient(to right, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
Also relevant: I am not using responsive bootstrap for large monitors and mobile devices, which changes the gutter size.
Turns out there is a simple solution. For my case, with span4 and span8, setting "x" to 33.333% (1/3) did the trick. The beauty of fluid boostrap is that it maintains the ratios of the spans for the entire page.
Drop a comment if you think of any cases where this doesn't work.
Related
Here's a link to my page: http://mobile.sheridanc.on.ca/~vecanski/
The problem that I am having is that height is set to 100% and yet i can still scroll down and see the light blue, even though there is nothing on the page except floating bubbles. Does anyone knows as to why I am able to scroll down? Also I have a gradient effect, here is the code:
background: #4094d1; /* Old browsers */
background: #4a97ce; /* Old browsers */
background: -moz-linear-gradient(top, #4a97ce 0%, #2687cc 22%, #1080cc 48%, #0c0c02 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a97ce), color-stop(22%,#2687cc), color-stop(48%,#1080cc), color-stop(99%,#0c0c02)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* IE10+ */
background: linear-gradient(to bottom, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a97ce', endColorstr='#0c0c02',GradientType=0 ); /* IE6-9 */
What I don't understand is why does the gradient not go all the way, even if it is scrollable, why does it restart at the end of the page?
So 2 questions really:
How do I remove the scroll-able part of the page?
If I were to leave the scroll-able part of the page in, how do I force the gradient to extend to the very end and not restart?
you can figure out the problems like this by using browser inspect element
by the way, to fix this:
Remove #bubbles padding:100px 0
OR
Add overflow:hidden to the #container
I know that this can easily be done in any image editing program, I was just curious if there was a way just using css.
Example:
body {background-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}
Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?
It is possible - in CSS3 you can set multiple values for background
body {
background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}
However, it will work only in modern browser that supports CSS3
(code generated via http://www.colorzilla.com/gradient-editor/)
Yes it's possible with CSS using the linear-gradient() function with multiple background images:
body {
background-color: #837960;
background-image: linear-gradient(
to bottom, transparent, #837960
), url("Images/background.jpg");
background-repeat: no-repeat;
}
Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparent at the top to the opaque background-color at the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.
Ideally, you should just edit the image so as to have a consistent look across browsers.
While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:
body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
<body>
<div class="content">Example</div>
</body>
Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/
The problem is hard do describe without a screenshot...
I've styled the column view headers of views in xpages using this css just to get an gradient in all browsers:
.xspPanelViewColumnHeader {
background: #58a8cd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4YThjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBjODNiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBmNmM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjdkYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #58a8cd 0%, #0c83b2 50%, #0f6c95 51%, #127daa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58a8cd), color-stop(50%,#0c83b2), color-stop(51%,#0f6c95), color-stop(100%,#127daa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* IE10+ */
background: linear-gradient(to bottom, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* W3C */
background-position: left top;
color: #FFFFFF;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
Works fine so far. But if the column view header does not have a label there's a problem with the gradient in IE9 (not in Firefox).
In IE9 the gradient does not fill the full size of the header - i can see two blocks (one horizontal and on vertical) but both only a few pixels wide. But the rest of the column header stays white.
As soon as I enter a label (and even if it is only a ".") the header will be displayed as usual (full height and full width with the gradient).
This way works:
<xp:viewColumnHeader id="viewColumnHeader1" value="."></xp:viewColumnHeader>
This doesn't:
<xp:viewColumnHeader id="viewColumnHeader1"></xp:viewColumnHeader>
So the question is (if anybody could follow my description): How can I edit the css to prevent the column header to shrink with no defined label?
I am having some problems converting a linear gradient for viewing in Chrome. It would be a bonus to see this gradient for full cross-browser too if you're willing, I'm developing a theme and it would help tremendously.
Here's the Mozilla version here:
background:
-moz-linear-gradient(center bottom , #401746 0%, rgb(255, 255, 255) 250%) repeat scroll 0% 0% #6e2778;
Go to http://www.colorzilla.com/gradient-editor/, import gradient, this is what you get. I do wonder how that %250 stop location would be handled cross browser, though. It might not strictly be valid across browsers.
background: #401746; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMTc0NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #401746 0%, #ffffff 250%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#401746), color-stop(250%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #401746 0%,#ffffff 250%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #401746 0%,#ffffff 250%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #401746 0%,#ffffff 250%); /* IE10+ */
background: linear-gradient(to bottom, #401746 0%,#ffffff 250%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#401746', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
Edit: Nevermind about my color stop worries (see http://dev.w3.org/csswg/css3-images/, section 4.1.1. linear-gradient() syntax, second to last paragraph):
The gradient's color stops are typically placed between the starting point and ending point on the gradient line, but this isn't required - the gradient line extends infinitely in both directions. The starting point and ending point are merely arbitrary location markers - the starting point defines where 0%, 0px, etc are located when specifying color-stops, and the ending point defines where 100% is located. Color-stops are allowed to have positions before 0% or after 100%.
Emphasis, my own.
Is there a way to create a color gradient in CSS without using an image file?
I am trying to give a DIV a background with a color gradient so that it looks glossy.
Safari (Webkit) supports it:
http://webkit.org/blog/175/introducing-css-gradients/
Firefox 3.6+ supports it:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
W3 spec defines support for it:
http://dev.w3.org/csswg/css3-images/#gradients-
And you can use Modernizr to detect support and fall back on an image:
http://www.modernizr.com/docs/#cssgradients
Try this if you are using or can use PHP
http://snipplr.com/view/26070/multicolor-gradient-generator/
http://www.designdetector.com/2005/09/css-gradients-demo.php
See javascript solutions here
jQuery gradient plugin?
http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
Some gradient image generator
http://www.roundedcornr.com/
http://gradient-maker.com/
http://www.grsites.com/generate/group/4000/
http://tools.dynamicdrive.com/gradient/
http://www.allcrunchy.com/Web_Stuff/Gradient_Generator/
71 Gradient Resources for Web Design
http://vandelaydesign.com/blog/tools/gradient-resources/
Sure Is (using color: Royal Blue, Hex Code: #002366 as an example (example taken from: http://www.99colors.net/name/royal-blue):
<div class="gradient">[Your DIV text and what not]</div>
/* CSS Background Gradient */
.gradient
{
background-color: #628AD9;
/* For WebKit (Safari, Chrome, etc) */
background: #628AD9 -webkit-gradient(linear, left top, left bottom, from(#001640), to(#628AD9)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #628AD9 -moz-linear-gradient(top, #001640, #628AD9) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#628AD9) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#001640)" no-repeat;
}
Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.
Go to http://www.colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D
You will see it generates the following code for the displayed glossy gradient there. You can change the gradient and copy the new code.
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */