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.
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.
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.
Is there a way I can get the styling of the second example down from:
http://css-tricks.com/examples/hrs/
That has the CSS:
/* Gradient transparent - color - transparent */
hr.style-two {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
on a div or p element? Or really any element that can hold content? I tried a bunch of variations of -webkit-border-image and the above code but wasn't able to make anything work.
Thanks,
Justin
So I twiddled around the example on this site: http://css-tricks.com/examples/GradientBorder and got the following to achieve the effect I want:
div {
border-width: 1px;
-webkit-border-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)) 0 0 100% 0;
}
<div></div>
Granted, this is just for webkit, but I suspect the other -o-* and -moz-* would work as well.
I have a problem with a property background-image in the footer tag . I use a double background: the first layer is a stripe pattern , the second gradient generated through property -linear-gradient-. In the section the header and body works fine ( I'm using the same mechanism ). I'm using the bootstrap framework.
My HTML:
<footer class="text-center">Baron ™ New Website Menager Platform</footer>
My CSS code :
footer {
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
background-color:#111111;
background:url(../images/stripe-pattern-footer.png) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -webkit-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -moz-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -ms-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -o-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -khtml-linear-gradient(top, #2B2A2B 0%, #111111 100%);
border: 1px solid #000000;
-moz-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
-webkit-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
}
Please help or provide clarification.
Ok i find solution of this problem - it was wrong url construct.
I think it may be an issue with the footer.png you are using. You may be not including it or have a spelling error when naming it or the path may be incorrect.
I created a jsfiddle with the code you provided and used a css pattern - it works fine.
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);
JSFIDDLE
http://jsfiddle.net/LWDT5/
I'm trying to use multiple gradient in one of my projects. My Objective is to have a fading shadow from the border of a section element.
From different sources this is what I've come up with till now
.section2 {
border-radius: 10px;
border: 2px solid #E1E1E1;
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%), -moz-linear-gradient(left, #E1E1E1 0%, #FFFFFF 5%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left, right bottom, color-stop(0, #E1E1E1), color-stop(.05, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 95%, #E1E1E1 100%), -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
}
But the problem is this is showing only the first gradient, the subsequent once are ignored.
You can see this in action here.
box-shadow is much more appropriate for what you're wanting to do. It's simpler, more predictable and neater than your gradient approach.
All it needs is a single property; play with the values to achieve the nicest result (read up on what they do so you're not playing blindly). This is what I did, which achieves a similar effect to your gradients:
box-shadow: inset 0 0 30px 10px #E1E1E1;
Demo: http://jsfiddle.net/EDcGP/6/
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FF0000 95%, #E1E1E1 100%);
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
Tried the above css in firefox and Chrome, both works. Could not try in Safari.
You have to remove the second gradient style. having one gradient will work.
I've almost solved by using opacity along with the background color as given below.
background-image: -moz-linear-gradient(to right, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to left, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to bottom, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to top, #E1E1E1 0, rgba(255, 255, 255, 0) 50px);
A working sample can be found here.