I am trying to put gradient mask on image but it's not working
<div className="first-section">
<img src={BgPic} alt="Bg-pic" className="bg-pic" />
</div>
.bg-pic{
width:100%;
mask-image:linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
}
What's the correct way to use mask:
To understand how to correctly use mask you need to first refer to the mask-mode as detailed in the specification
The mask-mode property indicates whether the <mask-reference> is treated as luminance mask or alpha mask. (See Mask processing.)
<masking-mode> = alpha | luminance | match-source
The default value is match-source and when using gradient you will have:
If the <mask-reference> of the mask-image property is of type <image> the alpha values of the mask layer image should be used as the mask values.
gradients are images: https://drafts.csswg.org/css-images-3/#typedef-image
Then if you refer to the mask processing you will read:
The first and simplest method of calculating the mask values is to use the alpha channel of the mask image. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.
So using your gradient you will have nothing since the alpha channel of your colors are equal to 1
Either consider transparent (or semi-transparent) colors
img{
-webkit-mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
}
<img src="https://picsum.photos/id/1/300/200" >
Or change the mode (will only work on Firefox)
img{
-webkit-mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask-mode:luminance;
}
<img src="https://picsum.photos/id/1/300/200" >
Note that I am using mask and not mask-image which is what you need here since you are considering other values like mask-repeat, mask-position, mask-clip so the longhand property is the one needed here.
Related
I want to add radial gradient to a photo, starting from the top right part of the image. I have tried a lot of combinations, here is what I managed to do:
background: radial-gradient(circle at top right, #ffffff 0%, #000000 100%), url("../images/banner-image.png");
My problem is: it doesn't show my photo. Any ideas what could be wrong?
You're using solid colors rather than colors with transparency in order to see the image below.
Use rgba colors instead
body {
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), blue), url(http://www.fillmurray.com/284/196);
height: 100vh;
}
is it possible to set the shape of an image not just with either straight or rounded shapes but with a mix of both?
I want my image in a emblem shape like this:
Image
Is this possible just with css or do i need further svg/canvas?
Thanks in advance
You can use the css clip-path or mask properties with an svg. Here are some examples:
Clip Path:
.element-clip-path {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
Mask:
.element-mask {
-webkit-mask: url(/path/to/mask.svg);
-moz-mask: url(/path/to/mask.svg);
-ms-mask: url(/path/to/mask.svg);
-o-mask: url(/path/to/mask.svg);
mask: url(/path/to/mask.svg);
}
Here is a great online tool you can use to create clip paths:
https://bennettfeely.com/clippy/
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 3 years ago.
I know how to create triangles with CSS with borders and using images, but in my case, I'd like to use background color.
I want something like this image.
Can anyone help me?
An alternative is to use background linear gradient.
The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.
In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.
.triangle {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}
<div class="triangle"></div>
Please note that this property is supported only by modern browsers (IE 11+, FF 49+)
The problem with creating triangles using CSS borders is their inflexibility when it comes to styling. As such, you can use a relatively fully pseudo fledged element instead, providing many more styling options:
Sure, you can do, e.g.:
Demo Fiddle
div{
height:50px;
width:50px;
position:relative;
overflow:hidden;
}
div:after{
height:100%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
left:-75%;
background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
background-size:cover;
}
Try this tool to generate the shape you want: https://bennettfeely.com/clippy/. Then tweak the code according to your needs. For example, this is how you can get a triangle:
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Support, however, is not the best as it's only fully supported in Firefox and non-existant in Edge/IE and therefore discouraged to use on production websites Clip path support
I have created a SCSS mixin based on the Bootstrap LESS mixin that will create a diagonally striped background. However, no matter how big I make the "tile" for the stripe, there always seems to be a 1px mis-alignment. I'm guessing that it has something to do with sub-pixel calculations, but I'm wondering if someone can point me in the right direction.
http://codepen.io/allicarn/pen/ncHod
Here's a screenshot of the codepen (Chrome) with one repetition of the background highlighted. Basically the 1px artifact originates from either edge not matching up to the next "tile"
Another goal would be to modify the angle and have it work, but that's just bonus points ;)
Not sure about support in older browsers, but an easier solution is
background-image: repeating-linear-gradient(45deg, gray 0px, gray 25px, transparent 25px, transparent 50px, gray 50px);
Anyway, I can see still artifacts at pixel level
At least this way you get the bonus about working at any angle ...
Also, looking at the codepen seems solved by increasing the size of the body:
body {
#include diagonalStripes(#aaa, 50px);
height: 1000px;
}
updated codepen
if this is the case, that would mean that the problem arises from the background extending beyond the element ?
Here's another type of LESS mixin for diagonal striped background:
.stripes(#angle: -45deg, #color: rgba(0, 0, 0, 1), #size: 4px /* size must be an even number */) {
background-image: -webkit-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -moz-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -ms-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -o-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
.background-size(#size #size);
}
Hope it helps...