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>
Related
This is gradient: linear-gradient(to bottom right, #294A77, #8986A5);
and $dot-color: #606685;
And i tried : https://codetea.com/a-simple-technique-to-create-a-dot-pattern-or-dot-grid-background/ but unsuccessful.
For dots, maybe a radial-gradient() would be more what ou look for .
background-blend-mode can also help to hide some of your dots and then blend colors with the main gradient from left to right drawing your background.
here is an example you could inspire yourself from :
html {/*for demo it can be here any block level html tag */
height: 100%;
/* your groups of dots */
background:
linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
to left,
#8382a2,
#2f4e79),
repeating-linear-gradient( /* horizontal white lines hidding a row of dots */
to bottom,
transparent 0,
transparent 32px,
white 32px,
white 40px,
transparent 40px
),
repeating-linear-gradient( /* vertical lines hidding a col of dots */
to right,
transparent 0,
transparent 32px,
white 32px,
white 40px,
transparent 40px
),
radial-gradient( /* dot repeated via background-size */
circle at 5px 5px,
#2f4e79 1px,
transparent 2px,
transparent 8px
)
0 0 / 8px 8px /*position + / background-size here */;
background-blend-mode:
multiply, /* only blend the first layer to keep dots hidden */
normal,
normal,
normal;
/* end dot group */
}
size and colors are yours to update .
Codepen to play with : https://codepen.io/gc-nomade/pen/Yzwowpg
See also :
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
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 this repeating linear gradient CSS design.
#div1{
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
I know what is meant by the color parameters but the percentage right after the color seems vague. What is it really meant for ? Is that identifies the position where the color must start? or what?
I already read the documentation, but I couldn't understand it. Can someone explain it to me in simpler words ?
Thank you.
OK, I'll give this a shot...but first the documentation is actual at w3.org...not W3Schools!
This is your code (assuming a div height of 100px):
#div1 {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
height: 100px;
}
<div id="div1"></div>
So your final % figure is 20%, which means, in the case of a repeating gradient, that the gradient itself will end at 20% of the height of the element and then repeat.
So 100% / 20% = 5 so the gradient repeats 5 times.
See what happens when the last number is changed
#div1 {
background: repeating-linear-gradient(red, yellow 10%, green 33.33%);
height: 100px;
}
<div id="div1"></div>
Now as for each percentage, lets try this will a standard left to right gradient
#div1 {
background: linear-gradient(to right, red, yellow 10%, green 20%);
height: 100px;
}
<div id="div1"></div>
Here the color stops work like this.
The gradient starts out red, and changes gradually until it's yellow at 10% of the width. The color will start changing again, this time to green, immediately until it's fully green at 20% of the width...and then stays that color as no other color is mentioned after wards.
For a solid band of color (say yellow) the color has to be stated twice at different values
#div1{
background: linear-gradient(to right, red, yellow 10%, yellow 20%, green 30%);
height: 100px;
}
<div id="div1"></div>
You can get a hard line change by repeating the percentage values when changing from one color to another
#div1 {
background: linear-gradient(to right, red 10%, yellow 10%, yellow 20%, green 20%);
height: 100px;
}
<div id="div1"></div>
I have two examples, both of which to my knowledge should be identical.
The percentages are calculated based on the width which is 960px;
Here's the pixel version, which seems to work great.
.pixel {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 40px, #444 20px );
background-size: 60px, 950px;
background-position: 10px, 10px;
}
However the identical percentage based gradient doesn't work:
.percentage {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 4.1666%, #444 2.08333%);
background-size: 6.25%, 98.95833%;
background-position: 1.04167%, 1.04167%;
}
I want to use percentages so that this gradient is fluid when the container shrinks size.
DEMO: http://jsfiddle.net/shannonhochkins/A3Z2L/3/
It looks like the percentages inside the linear-gradient are expected to add up to 100%.
Your second example is saying "within the 6.25% (60px) of the background-size, the first 4.1666% is transparent and the next 2.08333% is gray", but you're not specifying what color the remaining 93.75007% of that 60px should be. (It looks like it just uses the last color for the remaining space, so within your 60-px background-size, you've got 4.1666% transparent and the remaining 95.8334% gray.)
Given that your proportions are 66%/33% in your first example, your second example should be using linear-gradient(90deg, transparent 66.6667%, #444 33.3333%).
The percentage in background-image isn't based on 1000px. It's based on the background size. In this case you want 66.6% of 60px.
.percentage {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 66.6666%, #444 2.08333%);
background-size: 6.25%, 98.95833%;
background-position: 1.04167%, 1.04167%;
}
I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.
In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;
Method One
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
border-top: 5px solid #000;
margin: 40px auto;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent)
;
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent)
;
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent)
;
-moz-background-size:5px 100%;
background-size:5px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
Method 2
/* Using pseudo-elements and background gradients */
.two {
position: relative;
width: 400px;
padding: 20px;
border: 5px solid transparent;
border-top-color: #000;
margin: 40px auto;
}
.two:before,
.two:after {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
width: 5px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
}
.two:after {
left: auto;
right: -5px;
}
I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.
I would also like to know if this will work if the border is dashed or dotted?
Thank you for any help and/or advice in advanced.
Best Regards,
Tim
NOTE - Edited the CSS to have the gradient span across the width of the element, not just the border width.
This is what I've come up with, which is more or less what h3n is suggesting with more vendor-specific properties filled-in:
border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image:
-webkit-linear-gradient(180deg, #000, transparent),
-webkit-linear-gradient(180deg, #000, transparent)
;
background-image:
-moz-linear-gradient(180deg, #000, transparent),
-moz-linear-gradient(180deg, #000, transparent)
;
background-image:
-o-linear-gradient(180deg, #000, transparent),
-o-linear-gradient(180deg, #000, transparent)
;
background-image:
linear-gradient(90deg, #000, transparent),
linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;
http://jsfiddle.net/vqnk9/1548/
MDN has a reasonable tutorial on how to handle this cross-browser, as well.
Now, if you look closely, you may notice that the non-vendor background-image uses 90deg instead of 180deg. My original thought was -90deg, so of course that makes sense to me somehow (?), but as to why they are different, here is the W3 spec (see the last quote for the reasoning behind this difference):
4.1.1. linear-gradient() syntax
The linear gradient syntax is:
<linear-gradient> = linear-gradient(
[ [ <angle> | to <side-or-corner> ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.
The gradient line's direction may be specified in two ways:
using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.
using keywords
If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.
If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).
Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.
And from MDN, some administrivia on why the degrees differ (blame Apple?):
A last semantic curiosity still exists between the prefixed variants
and the unprefixed proposal. Following the initial Apple proposal, the
prefixed variants of the syntax all uses the an <angle> defined like
polar angles, that is with 0deg representing the East. To be coherent
with the rest of CSS, the specification defines an angle with 0deg
representing the North. To prevent sites using prefixed version of the
property to get suddenly broken, even when adapting to the otherwise
forward-compatible final syntax, they keep the original angle
definition (0deg = East). They will switch to the correct spec when
unprefixing the property. Also, as they aren't incompatible, Gecko
supports, prefixed, both the syntax with the to keyword and without.
Here again, the syntax without the keyword will be dropped when
unprefixing.
at least for webkit this sets the angle so its from right to left:
-webkit-linear-gradient(180deg, black, white)