There is a wonderful hr gradient here in the answer (the jsfiddle he links to shows an updated css) - Create a beautiful horizontal line with CSS only. It is exactly what I am after but I would like the gradient to appear below then line instead of above it.
The html is very simple -
hr.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
/* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content: '';
height: 0.5em;
/* half the height of :before */
top: 1px;
/* height of hr*/
}
hr.fancy-line:before,
hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
background: #f4f4f4;
}
<hr class="fancy-line"></hr>
I have tried various different things but cannot get it to work, plus whenever I change it, the line itself disappears.
Please can someone help... thank you
hr.fancy-line:after {
content:'';
height: 0.5em;
top: -8px; /*change or bottom:0; */
}
hr.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content: '';
height: 0.5em;
top: -8px; /*or bottom:0; */
}
hr.fancy-line:before,
hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
background: #f4f4f4;
}
<hr class="fancy-line"></hr>
Related
I have CSS command
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);}
but i have problem. How i can add layer for next layer?
My idea from this command add next layer where is:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);
I wanted circle with linear tranparency.
You can use two gradients together.
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: linear-gradient(to bottom, #f69d3c, #f69d3c, transparent, #f69d3c, #f69d3c),
radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
<div class="overlay-menu"></div>
Yes it is solution, but i want replace orange color as transparency.
My solution i am adding:
.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
-webkit-mask-image:
-webkit-gradient(linear, center bottom, center top,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(0.15, rgba(0, 0, 0, 0.6)),
color-stop(0.5, rgba(0, 0, 0, 0.8)),
color-stop(0.75, rgba(0, 0, 0, 0.6)),
color-stop(0.85, rgba(0, 0, 0, 0.5)),
color-stop(0.95, rgba(0, 0, 0, 0)));
}
<div class="overlay-menu"></div>
I need a box with all clipped corners. Here's what I have so far:
body {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
#block {
width: 330px;
height: 200px;
margin-left: 20%;
background-color: #222;
-webkit-clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%)
}
<div id="block"></div>
Unfortunately there is no Edge support and I can't use box-shadow. Is there another way to accomplish this?
Could we do something using overflow hidden and a rotated pseudo element?
.box{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
.box:after{
content: '';
width:120px;
height:120px;
position:absolute;
background:#465;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%) rotateZ(45deg);
}
<div class="box"></div>
How can I align the text in the button to the bottom?
I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.
UPDATE:
Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.
Code:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>
For some reason bootstrap is not working in the code snippet
You can create a child element in your button (here a span) that you position to the bottom of the button.
Because the button is position: relative, the span with position: absolute will be position according to the button.
We also create a child element to display the background, via the ::before pseudo-element selector.
To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top.
You also can force the stacking order with the z-index property.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
}
.img-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}
.img-panel > span {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span>Hello</span>
</button>
You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.
Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html
Try adding this:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
And in html markup add:
<span>Hello</span>
Try this
.img-panel {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
If your button's height is 300px, you can try with a padding-top property :
CSS:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
padding-top:250px;
}
Bootply : http://www.bootply.com/AHSl2MVDIy
Place your button text in a span, give it absolute positioning and set bottom to 0:
See the .img-panel span.button-title rule.
Update:
To place the text above the background, just add a higher z-index for the button text. A low number will do it.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
.img-panel span.button-title {
position: absolute;
bottom: 0;
z-index: 10;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span class="button-title">Hello</span>
</button>
</div>
</div>
I'm trying to add a gradient to my CSS background image. I've found a bunch of other post relating to having a gradient background, with an image sitting on top, but I would like the image itself to be a gradient. I tried this:
body {
margin: 0;
width: 100%;
height: 100%;
font-family: rexlia;
background-size: cover;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(cubes.jpg) no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;
}
All this does however is display the unmodified image. This snippit actually came from another post, in which apparently it worked. Doesn't for me though. Can anybody shed some light on this? Thanks.
I'm guess that is this is the only code you are using then you've omitted to make the html element 100% tall so that the body can also be 100% tall.
html {
height: 100%;
}
body {
margin: 0;
width: 100%;
min-height: 100%;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5) 0%, rgba(255, 0, 0, .5) 59%, rgba(0, 0, 255, 0.65) 100%), url(http://lorempixel.com/image_output/technics-q-c-640-480-2.jpg);
}
JSfiddle Demo
if you remove margin:0; it works and gradient strippes image(because of that defaut margin body starts to fill html), or add html{height:100%;} it works.
html or body background mixe together if not set in both tags
some test so you can see and understand behavior
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
html:hover body {
margin: 4em;
/* gradient is repeated and takes margin value as reference to repeat itself in html background */
}
if body has content or a valid height fixed, it works the same way
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
html:hover body {
margin: 4em;
/* gradient is repeated body's height and keeps being repetead in html background*/
height: 100px;
if you add html, body {height:100%;} then body has a valid height.
html, body {height:100%;}
body {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
and finally, if you give a background value to html, body will hold its own background within itself.
html{background:lime;}
body {
padding:2em;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat;
background-size: cover, cover;
}
I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?
I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.
Thanks in advance!
HTML:
<div class="profileBox">
...
</div>
CSS:
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
}
Try this solution, no modification of your HTML is required and not JS.
Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.
http://jsfiddle.net/0kj8t1zq/6/
<div class="profileBox"></div>
.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;
You have already answers to fade it to black.
If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
border: solid 2px white;
}
body {
background-color: blue;
}
<div class="profileBox"></div>
Changed body background to blue to see it is really transparent
For the fade effect, you can use rgba in webkit-gradient.
To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).
.profileBox {
width: 300px;
height: 300px;
display: block;
position: relative;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Opera 11.10+ */
background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}
.profileBox::after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg);
}
<div class="profileBox">
</div>