I want my website background to have the top 55% be one color and the bottom 45% to be another color. Based on the tutorial here (I am using green, 80% and 20% to make the size difference easier to spot)
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background-color: green;
But it's a bit hard to follow and I am unable to get the functionality I want. Right now, it repeats the gradient all the way down the screen but I do not know why. Removing the second rgba() entries breaks it entirely and that was the only trail I thought to follow.
If you apply this background to the body, make sure to add this css :
html {height: 100%;}
Otherwise, the body won't take the entire page height.
See this Fiddle
Related
I am having issues with cross browser rendering of CSS3 gradients. This is happening when I am trying to create a gradient from transparent colour to white.
The file I am using to test with is:
http://f.cl.ly/items/0E2C062x3O161b09261i/test.html
CSS used is:
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
Rending looks like what I want in Safari 6 (mac):
Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):
Any ideas or suggestions on why this odd rendering might be?
I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);
Instead of giving Chrome a "transparent" value, give it something very, very close to transparent.
Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).
The CSS I pasted in here was wrong, I was editing the wrong file DOH!
Original CSS not working
background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
CSS that fixed the problem
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
Problem being transparent isn't a colour, it is black with 0 alpha, setting to specifically white with 0 alpha fixes the issue. (thanks #carisenda)
This still points on inconsistencies with how browser vendors are dealing with alpha transparency in CSS3 gradients.
The trick with a color besides white (and with white actually) is to rgba the actual color that is fading.
background-image: linear-gradient(to right,
rgba(111,174,249, 0) 0%,
rgba(111,174,249, 0) 80%,
rgb (111,174,249) 100%);
In case the color being used is hex (like #6faef9) use a hex to rgba converter to convert the color.
The same problem is encountered on native IOS as well:
iOS White to Transparent Gradient Layer is Gray
https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray
I notice that on CSS the solution is to use white color instead of black and then add 0 transparency
rgb(255 255 255/0)
I've recently encountered the same issue regarding transparency on safari. What worked for me was substituting the css into the compiled safari css.
This didn't work for me
background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)
This did work for me
background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)
Is it possible to get a similar result with CSS Gradients? Can you use 2 gradients on one div and can the radial one have a center outside the div?
It is definitely possible to add more than one gradient to an element (even a combination of linear and radial gradients) by providing them in comma separated format like in the below snippet. The gradient that is specified first (from the right side) forms the bottom most layer while that which is specified last comes on top. Key thing to note is that the gradient (on top) must have colors with alpha less than 1 to be able to show the colors in the lower layers.
Coming to the second part of the question, radial gradients can be created such that their center point is outside the div. This can be done by specifying negative values for the position.
The gradient in the below snippet does not tally 100% with the image provided in question but you can get the idea.
div{
height: 200px;
width: 150px;
border: 1px solid;
border-radius: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
background-size: 180% 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>
Try this
.color background: rgba(249,124,102,1);
background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1)));
background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1 );
}
.rounded_rec {
width: 150px;
height: 150px;
border-radius: 5px;
border: 1px solid red;
background-color: black;
}
Html
<div class="rounded_rec color">
</div>
Kindly check this link
Check this link also
Check this link and let me know is this what you want
I'm trying to achieve the following using CSS: (focus on the middle part of the photo)
My first attempt was something like:
<div style="background:blue;height:200px"></div>
<div style="background: linear-gradient(blue 50%, #ffffff 50%);>
<img...><img...><img...>
</div>
But then I have no way to create the colored line in the middle.
(Correct me if I'm wrong?)
I assume a better way would be to create a 50% height div, and then creating a floating div for the photos.
I use bootstrap which is not great for vertical align, so I tried using this FlexBox.
Any help would be very appreciated, thanks.
You can specify more than one background image (including gradients) for one element, e.g.
html, body {
height: 100%;
min-height: 350px;
margin: 0;
}
body {
background-color: #006;
background-image:
linear-gradient(to right, #f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f),
linear-gradient(to top, #fff, #fff),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%);
background-size: 100% 4px, 100% 50%, 62.5% auto, 62.5% auto;
background-repeat: no-repeat;
background-position: 50% 50%, 50% 100%, 0 50%, 100% 50%;
}
I'm trying to overlay 2 different gradients, without using any image:
one repeatable gradient (6px by 6px) that makes an hash-like image.
one vertically transparent gradient all over the page (100% to 0%).
Here is the code I tried unsuccefully:
html{
background: -moz-linear-gradient(top, transparent 0%, #FFFFFF 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body{
background: -moz-linear-gradient(45deg, #C6C6C6 0%, #C6C6C6 25%, #FFFFFF 25%, #FFFFFF 50%, #C6C6C6 50%, #C6C6C6 75%, #FFFFFF 75%, #FFFFFF 100%);
background-size: 6px 6px;
}
Any idea is this is possible ?
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/