What I want to do is fade only left side of the image, and the whole bottom. Currently I have:
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 100%);
Which works perfectly for the left side of the image, but how can I apply the same to fade the bottom of the image (top to bottom)?
Use multiple mask layers:
img {
--f :40px; /* control the fading */
-webkit-mask:
radial-gradient(at 0 0,#000,#0000 70%) 100% 100%/var(--f) var(--f),
linear-gradient( 90deg,#000,#0000) 100% 0/var(--f) calc(100% - var(--f)),
linear-gradient(180deg,#000,#0000) 0 100%/calc(100% - var(--f)) var(--f),
linear-gradient(#000 0 0) 0 0/calc(100% - var(--f)) calc(100% - var(--f));
-webkit-mask-repeat: no-repeat;
}
<img src="https://picsum.photos/id/1069/200/200" >
Related
body>div {
background-color: red;
}
<div>Need more here</div>
Can someone help with creating the same background as on the bootstrap main page?
I tried with the gradient, but it doesn't work.
I can't get the 4 colors that come together in white in the middle.
.bs {
aspect-ratio: 1/1;
background-image: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1) 85%), radial-gradient(ellipse at top left, rgba(13,110,253,0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132,0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846,0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132,0.5), transparent 50%);
}
<div class="bs"></div>
I'm trying to make a gradient that, for branding purposes, must be (1) at a specific angle, and (2) the top of it must be inset by a specific amount:
The rest of the proportions don't matter. I created this gradient like this:
background: linear-gradient(75deg, white 0%, black 30%, blue 30%, white 100%);
This only produces the correct top inset at specific client area height/widths. At other sizes, offset can be different:
Again, for branding reasons, this is unacceptable. That top of that slope must be inset by a specific amount.
I tried use a pixel value for the inset, e.g.
background: linear-gradient(75deg, white 0%, black 125px, blue 30%, white 100%);
This works... for the bottom of the slope. The bottom will be offset by 125px at any shape/size:
I'd like to do the same thing but have the top offset fixed to 125px.
You can approximate it using pseudo element and rotation. You consider a straight gradient (90deg) then you rotate it by adjusting the transform-origin to have the distance you want on the top:
.box {
height:300px;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
/* a random big value for top bottom and left*/
top:-500px;
bottom:-500px;
right:0;
left:-500px;
/**/
/* in the below 625px = 125px + 500px and adjust the 350px to get close to the gradient you wnat*/
background: linear-gradient(90deg, white 350px , black 625px, blue 0, white);
transform:rotate(-15deg);
transform-origin:625px 500px;
}
<div class="box">
</div>
I am trying to add a gradient as a bottom border to my site's header using border-image CSS. The gradient needs to fill up 100% of the width across.
I can get the gradient to fill up the majority of the bottom border using border-image-width and border-image-slice, but for some reason it excludes the two bottom corners as white space. How can I get the gradient to span ALL of the bottom in one flow?
I have tried removing border-image-slice altogether and that fills in the two bottom corners but omits the rest of the bottom border.
{
border-image-width: 0 0 10px 0 auto;
-moz-border-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 0 0 1 0;
}
It seems that setting both border-image-width and border-image-slice to "0 0 X 0" should only show the bottom. Good so far. However, this also removes the two bottom corners so there are a couple pixels of white space preventing the gradient to flow from one edge of the site to the other. Strangely, when I remove the bottom-image-slice altogether, only the two bottom corners show up with the gradient. I need the gradient to start with the bottom left corner and go all the way across the bottom through the bottom right corner.
Consider a background that will cover a transparent border and it will be easier to handle:
.box {
height: 50px;
border-bottom:10px solid transparent;
background:
linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) bottom/100% 10px border-box no-repeat,
red;
}
<div class="box"></div>
The issue with slices is that if you want for example the bottom/left corner you also need the bottom and left edge, not only the bottom edge.
Related to better understand the logic behind border-image-slice: border-image-slice for gradient border image
I have the diagonal lines working as per draw diagonal lines in div background with CSS and set as % to be responsive.
Trying to place letter's on the white spaces on each side of intersection of lines. i.e
above, below, left, right of intersection / centre
I can't get it to work.
I then want to set a full page image background slider with text overlay.
I figured a solution according to your requirement.
HTML:
<div class="crossed">
<div style="text-align:center;">A</div>
<div style="float:left;margin-top:1em;">B</div>
<div style="float:right;margin-top:1em;">C</div>
<div style="text-align:center;margin-top:4em;">D</div>
</div>
CSS:
.crossed
{
width: 100px;
height: 100px;
background:linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
Demo is here : DEMO
How would you make a radial gradient occupy the entire body?
At the moment i can make the gradient just fine, but the problem is that the gradient only occupies roughly 100px by 100px. The body background is set to 100%, but still no luck.
Any ideas? Below, is the CSS i'm using at the moment.
body {
background-color: #2b616d;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(99%, #568b93), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
background-image: radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
}
Edit1:
It seems Firefox is working just fine with the above code, and rather it is Webkit who is having the actual problems.
Any help would be much appreciated!
Edit2:
According to this link: http://webkit.org/blog/175/introducing-css-gradients/
My use of webkit's "point" is screwed up.. specifically, the radius after each point. The problem is though, that this seems to be an integer only value, as percentages do not seem to work.. Eg, i am trying to make the radius 100%, but only pixel values seem to apply.. any ideas?
For the Mozilla-ish syntax, try this:
[-moz-]radial-gradient(center center, circle cover, #568b93 99%, rgba(0, 0, 0, 0) 100%)
^^^^^
I don't know what the Webkit equivalent is. If 'cover' doesn't work, try 'farthest-corner'.