Related
I did linear 115deg for doing 2 colors, but for the rest, I can't make them be nested gradient from top to bottom, here is my result gradient , the colors are : white and #F5F5F5 ( grey )
I want the grey that has linear also from bottom to top to be white
is that possible?
the result might like this
i did my own linear like the expected but with rgba to opacity it, using like this
background: linear-gradient(115deg, #ffffff 68vw, rgba(245, 245, 245, 0.5) 30vw);
i did this gradient for background color so i can put content inside the div
here is what i did => https://codepen.io/lpllplp222/pen/vYWPdBe
You can use clip-path to cut out the part of the gradient you want to be visible.
body {
background: black;
}
#do-linear {
width: 100%;
height: 300px;
background: linear-gradient(15deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.25));
clip-path: polygon(50% 100%, 70% 0%, 100% 0%, 100% 100%);
}
<div id="do-linear"></div>
I need progress bars on this tool I'm building, but indeterminate ones are giving me trouble. To create the usual one, I followed this guide: https://css-tricks.com/html5-progress-element/.
The default looks like this in my view:
This doesn't work with the styles of the rest, so I wanted to change it. The guide suggests to use progress:not([value]) {} to target indeterminate progress bars, but it doesn't really work. The container gets styled, but the moving bit just disappears:
What's the proper way to do this?
This is what I tried to apply:
progress:not([value]) {
-webkit-appearance: none;
appearance: none;
}
progress:not([value])::-webkit-progress-bar {
background-color: #EEEEEE;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress:not([value])::-webkit-progress-value {
background-image: -webkit-linear-gradient(
-45deg, transparent 33%,
rgba(0, 0, 0, 0.1) 33%,
rgba(0, 0, 0, 0.1) 66%,
transparent 66%),
-webkit-linear-gradient(
top,
rgba(255, 255, 255, 0.25),
rgba(0, 0, 0, 0.25)),
-webkit-linear-gradient(left, #09C, #F44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100%, 100%;
}
I found this question and there's an answer, but the bit for indeterminate progress bars looks the same as what I tried to do.
I would like to achieve the following effect in a div box. What CSS would do the trick? Thank you in advance for your answers!
Using the linear-gradient function in CSS3, the code will be +- like this:
.box{
height: 100px;
width: 100px;
background: linear-gradient(to top, blue, white, blue)
}
as stated in the first answer, use css gradients, and combine with border-radius for your rounded corners.
.box{
height: 200px;
width: 150px;
background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
border-radius:15px 0px 0px 15px;
}
<div class="box"></div>
You can use CSS3 with linear gradient. Something like this:
.demo {
width: 150px;
height: 150px;
}
.gradient {
background: #508cf4; /* Old browsers for fallback */
background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%);
}
<div class="gradient demo"></div>
You could also google for "css3 gradient generator" to have a GUI. For example cssgradient.io
You might test run a few css gradient tools like ColorZilla and GradientFinder to work with gradient colors.
Also, by combining a low opacity radial gradient with a linear gradient you can get a more rich look that might get closer to your original image.
.box {
display: block;
width: 182px;
height: 229px;
background:
radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%),
linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
border-radius: 16px 0 0 16px;
}
<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>
I have a div containing text placed over a semi-transparent background.
I would like the bottom of this div to gradually disappear.
I used a gradient to achieve this. Over a non-semi-transparent background it works without any problem.
#fadeout {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
pointer-events: none;
}
I made this fiddler showing what I want to do: https://jsfiddle.net/ytuxn9Lu/6/ (link edited to add random background image, see edit)
The problem is that the gradiant overlay adds with the background and so the result is not what I want.
What can I do to achieve this ?
Thanks !
EDIT: To add more information, in the real application, the body has an image background. The #parent div has a semi-transparent background and the #fadeout-parent div contains the text and the fadeout div.
The solution sould then work no matter the background color/image (if possible).
There is a solution here
https://jsfiddle.net/hgtdwbrL/1/
I just changed the values of the gradient (used a color picker to get the color from below the content and added 0.9 transparency):
background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(179, 179, 179, 0.9) 95%);
I think the perfect way to achieve this does not currently exist..
So, there's Yet Another Tricky Solution : mine
https://jsfiddle.net/ytuxn9Lu/9/
(code seems to be mandatory when posting jsfiddle link)
I found something that can work:
body {
background: url(https://unsplash.it/900/600?random);
padding: 50px;
}
#parent {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
}
#fadeout-parent {
position: relative;
-webkit-mask: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.65, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0)));
}
<body>
<div id="parent">
<div id="fadeout-parent">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are written like so.</p>
<p>They can span multiple paragraphs, if you like.</p>
</blockquote>
</div>
</div>
</body>
It has a downside, browser compatibility. I works in Chrome and Opera.
If im barking up the wrong tree please forgive me.
If you are just trying to fade the text out within the div you could just change to:
#parent {
background-color: white;
padding: 20px;
}
If you want the background div to fade out also you could try putting a gradient color on that div. Maybe remove the
<div id="fadeout"></div>
altogether.
The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:
while this picture is for a different page (using the same CSS) which is about 800 pixels tall:
and here is the code:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.
Interestingly, I was previously using -webkit-gradient('linear'...) instead and that did not have the same problem; I only swapped over to -webkit-linear-gradient so it would fall in line with my -moz and -o gradients.
I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.
Has anyone else seen this before?
Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari.
1/3 the size is still noticeable, but not quite so jarring. The actual page is at http://www.techcreation.sg/page/web/Intro%20to%20XTags/, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.
Looks like a webkit bug. I came up with the work-around below, tested on the latest Chrome and FF. In short, you'll position a div containing the background behind your main content. I also added a few styles to make IE happier.
Given this HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
Combined with this stylesheet:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
It should come out looking like this, regardless of window size:
Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:
body, html {
width:100%;
height:100%;
}
Demo
You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
HTML
<div class="header">
content
</div>
Demo
Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/
Seems like Chrome has some bugs when using the rgba() values. I tried with normal hex values and it seems to fix the problem for me.
Look here if it fix it for you also.
Edit
Looks like the problem is in the 250px limit because it only appears when that is set.
I didn't manage to come up with a better solution than this one.
Overlapping a div with the gradient you like, 250px tall. Then you can have the page as tall as you want because the div will always be 250px tall.
Webkit render -webkit-gradient('linear'...) and webkit-linear-gradient in the same way. The problem is with your multiple backgrounds. I had same issue and I was ended with two different elements on top of each other and then giving a background to each of them. Something like:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
I think this happens because the image have fixed amount of pixels
instead of using background-image, try using this(background) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.
Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.
When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.
So, you example would look like http://jsfiddle.net/kizu/phPSb/ (blindcoded, couldn't reproduce the problem though).
In any strange situation try to use:
transform: translateZ(10px);
In my case was the height of the body. Try the following:
body {
width:100vw;
height:100vh;
...
}