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.
Related
I would like to achieve the following effect in a div box. What CSS would do the trick? Thank you in advance for your answers!
Using the linear-gradient function in CSS3, the code will be +- like this:
.box{
height: 100px;
width: 100px;
background: linear-gradient(to top, blue, white, blue)
}
as stated in the first answer, use css gradients, and combine with border-radius for your rounded corners.
.box{
height: 200px;
width: 150px;
background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
border-radius:15px 0px 0px 15px;
}
<div class="box"></div>
You can use CSS3 with linear gradient. Something like this:
.demo {
width: 150px;
height: 150px;
}
.gradient {
background: #508cf4; /* Old browsers for fallback */
background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%);
}
<div class="gradient demo"></div>
You could also google for "css3 gradient generator" to have a GUI. For example cssgradient.io
You might test run a few css gradient tools like ColorZilla and GradientFinder to work with gradient colors.
Also, by combining a low opacity radial gradient with a linear gradient you can get a more rich look that might get closer to your original image.
.box {
display: block;
width: 182px;
height: 229px;
background:
radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%),
linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
border-radius: 16px 0 0 16px;
}
<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>
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.
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.
Is it possible to create a textfield like this with just pure CSS?
I'm at this point (SASS Code):
input[type="text"]
:background url(../../img/input_text_bg.png) repeat-x
:border-color light-grey
:width 210px
:height 30px
:-moz-border-radius 4px
:-webkit-border-radius 4px
:margin-top 20px
:margin-left 40px
:color $dark-grey
as you can see i still use a background-image, is it to replace it with some gradient?
Try this CSS for gradient background.
background-image: linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -o-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -moz-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -webkit-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -ms-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -webkit-gradient(
linear,
right top,
right bottom,
color-stop(0.1, rgb(240,240,240)),
color-stop(0.58, rgb(255,255,255))
);
You should try Webkits it will allow you to round the border radius and create gradients from a range of colors using basic CSS/CSS3.
You can use CSS3's box-shadow, and inset. e.g
input[type=text] {
box-shadow: inset 2px 2px 2px 2px black;
}