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.
Related
I have a container with a gradient mask adding transparency to the top of the view as follows :
.container{
position: fixed;
top: 0;
height: 100vh;
overflow: scroll;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
Is there any way in css to apply this 3d transform only to the top part of the container? Maybe with a 3D matrix?
transform: perspective(1000px) rotateX(10deg);
The objectif being to give a little star wars opening credits style to the fade-out, but only to the topmost part of the view.
Thanks for the help :)
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 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.
Was reading how to do it on https://css-tricks.com/tinted-images-multiple-backgrounds/
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
For me, though, it doesn't seem to work. Fiddle: https://jsfiddle.net/w6jnv67c/
Any idea what I'm doing wrong?
In this case, what you are doing wrong is not allowing for the size of the image.
The image is placed at the top left of the div which, in this case, means that there is nothing to see in that area of the image.
Just make the div a little larger and you will see.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 75px;
height: 75px;
}
<div class="tinted-image">
</div>
So if you want the image to fit in the div you have to use background-size.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 50px;
height: 50px;
background-size: cover;
}
<div class="tinted-image">
</div>
I have used css from following fiddle for my file upload.
http://jsfiddle.net/geniuscarrier/ccsGK/
I have successfully implement it. But I want to show "what image i am choose". Like below screenshot.
Is it achieve by css only??? Is it possible?? Please help.
I kindly try the below css.
.btn-primary
{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
Regards
M
You can't achieve this by using CSS, instead, try using jQuery for indexing the selected file.
Refer to this to solve this situation properly.