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.
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 to underline some words in a heading. I have the following code from this excellent article: https://css-tricks.com/styling-underlines-web/
I'm using two box-shadows to create a 1px underline.
.underline {
box-shadow:
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}
<h1>I can help you <span class="underline">create positive impact.</span></h1>
It works fine. Apart from on an iPhone there is sub-pixel grey border around the edge of the white inset box shadow. As if the white box is not quite covering the black box. See screen grab:
I note that the code provided on CSS Tricks website includes
.underline {
background-size: 1px 1em;
display: inline;
}
I've also tried with this additional code, but it doesn't make any difference. (I think this code is superflous. It doesn't do anything?).
So... how do I stop this grey outline from displaying?
I've tried adding a shadow to the outside bottom edge of the box. To 'mask' the grey line, but it has not worked:
.underline {
box-shadow:
0 2px rgb(255, 255, 255),
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}
It's a known bug in iOS.
For workaround, you can simply put an mask as overlay:
-webkit-mask-image: -webkit-radial-gradient(white, black);
.underline {
-webkit-mask-image: -webkit-radial-gradient(white, black);
box-shadow:
inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
inset 0 -0.2em rgb(0, 0, 0);
}
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 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.
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;
}