I'd like to make gradient opacity from 100% to 0% only on borders of image.
I can for example make gradient opacity on one direction of image like here( bottom has gradient)
.opacitygradient{
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<img src="http://placehold.it/300x300" class="opacitygradient">
But i'd like to have 10px gradient going on each side (all borders), not just one direction like in snippet above.
Any ideas?
To mask off an image, you can do this.
The trick is to use two linear-gradients for the background of the container of the image, one horizontal and one vertical, that are transparent in the middle and fully white at the edges.
(Note that you will have to use another value than 255,255,255 for the rgbas if the background of the page is not white.)
.container {
display: inline-block;
background:
linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0) 5%,
rgba(255,255,255,0) 95%, rgba(255,255,255,1)),
linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0) 5%,
rgba(255,255,255,0) 95%, rgba(255,255,255,1));
}
.opacitygradient {
vertical-align: top;
position: relative;
z-index: -1;
}
<div class="container">
<img src="http://placehold.it/300x300" class="opacitygradient">
</div>
As a bonus, it works in all browsers, not just the ones that understand mask-image.
Related
What I would like to achieve is basically have a gradient appear on the text as opposed to the background of an image. I have created an example here:
https://codepen.io/BenSagiStuff/pen/BaYKbNj
body{
background: black;
}
img{
padding: 30px;
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188 100%);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png" >
As you can see, currently the background of the image has the gradient, but, what I would like is for the text "Google" to have the gradient and the background of the png should stay as black.
Ultimately the goal would be to have the gradient transition underneath the image as well, so the gradient slides horizontally under the image as well.
Use the image as a mask on a common element
body{
background: black;
}
.box{
--img:url(https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png);
width:300px;
aspect-ratio:3;
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188 100%);
-webkit-mask: var(--img) 50%/cover;
mask: var(--img) 50%/cover;
}
<div class="box"></div>
There's a little problem with your implementation.
PNG is transparent, but it's a square piece of image. You might be successful using a svg image or just applying this gradient background in a text tag.
on your HTML you make this way:
<div>
<h1>Google</h1>
</div>
Your CSS this way
body{
background: black;
font-family:helvetica;
}
h1{
background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188 100%);
font-size: 160px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
div {
display:flex;
}
It's also better for performance.
Also, you can animate easily.
Such as the example in this codepen https://codepen.io/shshaw/pen/YpERQQ
:)
I'm trying to create a gradient based sunset effect on my website's background.
Example Link (with sunset effect, in the background) https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/
Try to scroll down on the example link & you will notice the "sunset" effect.
This is what I've achieved so far: https://sirsakisan101.provenreviews.com/
I was able to display the two palm images, side-by-side, by using the following code.
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment: fixed, fixed;
background-position: left top, right top, bottom;
}
Now, I'm trying to use the following code (mentioned below) for achieving the sunset effect on my background images, but it is not working. I've also tried removing the "before" element & adding the background images, along with gradients but then, it is appearing above the background images.
body:before {
background: linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -o-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -moz-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -ms-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012c57', endColorstr='#ffcb70');
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,203,112)), color-stop(0.3, rgb(107,138,169)), color-stop(1, rgb(205,217,230)) ) !important;
}
I want to display this code behind my background images, to achieve the sunset effect from the example website. I can't understand why it is not working. I will be grateful for any help.
Thank You.
You can do it with another html element inside the background image one.
<div> // has your background image
<div class="gradient"> // will have the gradiant style
</div>
</div>
css
.gradient {
background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}
Here is an example fiddle
Note i just simplified the gradient css. Keep your own styling.
Consider the way you use the body tag like you currently do. You need to make sure the div inside (with the gradient) spans directly on top of the other div. Maybe you have to do something like
.parent {
// The element with the image
position: relative;
}
.child {
// the element with the gradient
position absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You can directly add the gradient to the other background-images (since the gradient property is considered a background image) like this:
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}
That worked for me and it's much easier than adding additional elements ;)
On a wordpress website, i would like to make a header with a gradient which covers the menu in 100% but then in the breadcrumbs i would like it to be white triangle shape.
I have create a fiddle as it is quite hard to explain.
https://jsfiddle.net/hoststage/o04qfpr9/
The body CSS and the CSS class triangle header is what i'm currently running to make it work but with negative margin which I really don't like.
body {
background-color: #F4F4F4;
background-image: -moz-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
background-image: -webkit-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
background-image: -ms-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
position: absolute;
z-index: 270;
background-repeat: no-repeat !important;
background-size:1920px 270px;
background-position: center top;
}
.triangle-header {
width:1920px !important;
height:195px;
background: linear-gradient(to top left, white 50%, transparent 0%),
transparent 0%;
margin-top: -170px
}
SO basically, i would like to start the triangle at 46% of the body gradient and merge the 2 CSS codes into the body class.
The onecodebody is my current attempt at merging the 2 properties but it doesn't work as I suspect i can't pass the argument to the bottom left inside an already defined linear.
Is there a way to define one gradient property for the body tag which would make it look like what I have in my fiddle?
Great day to you all!
Use multiple gradient like this to have transparency:
body {
height:200px;
background:
linear-gradient(rgb(145,79,145),rgb(145,79,145)) top/100% 46% no-repeat,
linear-gradient(to bottom right,rgb(145,79,145) 50%,transparent 50.5%) bottom/100% 55% no-repeat;
}
Or like this if you want to keep both colors and have the white part above to create the triangle shape:
body {
height:200px;
background:
linear-gradient(to bottom right,transparent 50%,white 50.5%) bottom/100% 55% no-repeat,
linear-gradient(97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%) top/100% 100% no-repeat;
}
I've got a background image where the top row of pixels is a solid colour (it's a photo of a landscape). The idea would be to have this at the bottom of the page and then a CSS gradient above it that will stretch from the top of the page, stopping at the height of the image. There are lots of tutorials showing how to overlay/underlay the gradient, but they all assume that you want a full page gradient or the gradient overlaid on top of the background image.
What I have now is:
background: rgba(30, 53, 192, 1);
background: url("myimage.jpg") no-repeat center bottom, -moz-linear-gradient(top, #000 0%, #1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -webkit-gradient(linear, 0% 0%,0% 100%, from(#000), to(#1E35C0));
background: url("myimage.jpg") no-repeat center bottom, -webkit-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -o-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -ms-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, linear-gradient(top, #000 0%, #1E35C0 100%);
background-size: contain;
This has almost the desired effect. The CSS gradient is fine and the image is in the right place, but I don't know how to make the gradient stop above the image in a way that's nice and responsive. I can play with the percentages, but again, that only works if I know how tall the image is.
I know this is probably fairly easy in javascript, but I was hoping there's a clean CSS way to do it.
Assuming that your image has an aspect ratio of 4:1 (i.e. height is 25% of width), you can do this:
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #ccc;
background-image: url("http://ima.gs/transparent/000/000/200%C3%9750-200x50.png")
, linear-gradient(to top, transparent 25vw, #fff 25vw, #00f 100%);
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
The vw unit there in the gradient means percent of viewport width. So if the background image will stretch the full width of the viewport, and its height is 25% of its width, then its height will be equal to 25vw and you can start the gradient at 25vw from the bottom, and end at the page top.
http://jsfiddle.net/8a5L20h4/
I have a container with scrolling content (white text, black background).
Like it is possible to apply fading out opacity to the background of a div, I would like to apply opacity only to the bottom of the text within the container, so that it looks like the text is fading out when you scroll down.
Usually, you apply opacity to text like so:
color: rgba(255,255,255,0.8);
How do you add a gradient to this, i.e. changing levels of opacity from top (opacity 100%) to bottom (opacity 0%) of the container?
I unsuccessfully tried this:
color: linear-gradient( bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
You need an element to simulate the gradient.
Check out this fiddle: http://jsfiddle.net/T5pd7/
.gradient{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
}