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 :)
Related
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.
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 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.
Hello friends i try to make gradient effect photo on the cover. but link is not working.
When you click on the picture i want to be redirected to another page.
This is my demo JSFiddle
HTML CODE:
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
Wrap the link around the container:
<a href="www.facebook.com"><div class="container">
<img src="http://lorempixel.com/1920/480/" />
</div></a>
Working Fiddle
Another solution is to change the image's z-index to a positive number:
img {
max-width: 100%;
position: relative;
z-index: 1;
}
When I put the following background image:
background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0.08) 1px, transparent 30px, transparent 100%) !important;
and the following background size:
background-size: 1000px 100px !important;
The background-size's width gets acknowledged, but the height does not, and the height just stays the same, no matter WHAT value I put in. It could be 999999px, it could be 50%, it could be 0px, all of those would result in the height still being 100%. Please help.
Try this CSS, This has been tested in firefox and height works as expected...
#yourid
{
width:200px;
height:300px;
background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0.08) 1px, transparent 30px, transparent 100%) !important;
-moz-background-size:200px 100px;
background-size:200px 100px;
background-repeat:no-repeat;
}