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.
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 have a gradient background that surrounds the navigation menu of my site. For some reason this is aligned different in Chrome and Firefox.
I used WordPress to build the site.
Here are two snippets showing the difference:
Chrome_example
Firefox_example
Here's the CSS used:
.nav-gradient {
width: 650px;
padding-top: 7%;
margin-top: -7%;
float: right;
margin-right: -90px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
}
Any help would be greatly appreciated.
Many thanks!
add this to your div
margin: 0 auto; /*this will centralize the div, horizontal. so that it is nice looking in the middle on different computer screens. */
I am using this code to add a gradient behind my menus to make them pop more.
-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
I need the background of my web page to be transparent (so I can see stuff behind it). How do I use this to keep the emphasis around my menus, but make it so I can still see content behind it?
The current syntaxes are:
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
EG.
html {
height: 100%;
background: lightblue;
}
body {
margin: 0;
min-height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}
The rest of your question isn't quite as...ahem, clear.
I'm trying to create a bootstrap navbar that has the top half in a certain color with 0.9 opacity and a background-image behind it, and the bottom half with complete transparency (opacity 0) just showing the body's color/background-image.
I've been playing for hours now with linear gradients trying to achieve the effect, but the closest I've got is...
html, body {
height: 100%;
background-image: url("/someBackgroundTexture.png");
}
.theNavBar {
background-image:
linear-gradient(
to bottom,
rgba(127, 180, 220, 0.9) 0%, /*opacity 0.9*/
rgba(127, 180, 220, 0.9) 50%, /*opacity 0.9*/
rgba(0, 0, 0, 0) 50%, /*transparent*/
rgba(0, 0, 0, 0) 100% /*transparent*/
)
,url("/someNavbarTexture.png");
height: 100%;
width: 100%;
}
It works well in terms of dividing the navbar into 2 pieces with different colors, but the problem is that "someNavbarTexture.png" is applied in the wrong half (the bottom half of the navbar), and is effectively just doing the same job that the background-image of html,body is.
What I want to do is somehow assign the ",url("/someNavbarTexture.png");" to the first 2 rows of the linear-gradient (which seems impossible).
Is there any easier way to achieve this effect with CSS? (I really don't care if I end up using linear-gradients or not!) Thanks for any thoughts at all.
--------EDIT---------
Here's a link explaining what I'm talking about...
http://codepen.io/d3wannabe/pen/gPPmOv
The only way I can see of doing this is with a pseudo-element (or div if you wish) that is absolutely positioned and is 50% of the container height.
/* Pen-specific styles */
html,
body {
height: 100%;
margin: 0;
}
/* Pattern styles */
.container {
background-image: linear-gradient(to bottom, rgba(127, 180, 220, 0.9) 0%, rgba(127, 180, 220, 0.9) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
height: 100%;
width: 100%;
position: relative;
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
z-index: -1;
}
<section class="container">
</div>