I have a problem regarding the linear-gradient, IE11 and maybe calc() function.
This code snippet acts different on Chrome and IE11.
background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));
Chrome
IE11
I want it to look like Chrome version.
Does anyone have a solution?
Here is another idea where you don't need to know the size of the div but you won't have transparency:
.box {
background:
linear-gradient(to top right,transparent 49.8%,#fff 50%) top -1px right -1px,
linear-gradient(to bottom left,transparent 49.8%,#fff 50%) bottom -1px left -1px,
#ccc;
background-size:100% 100%;
background-repeat:no-repeat;
/* irrelevant styles */
width:150px;
height:150px;
display:inline-block;
vertical-align:top;
border:1px solid;
}
<div class="box">
</div>
<div class="box" style="width:200px">
</div>
<div class="box" style="height:200px">
</div>
Similar question with other ideas: linear-gradient border modify
I found the problem. IE11 doesn't like the calc() function. I used instead of calc(50% - 1px) and calc(50% + 1px) absolute values that were half of the div size +-1.
Related
I am trying to make some diamond form in pure CSS, trying to use mask-image and radial-gradient but I don't quite succeed.
The 2 form I like to do are :
I tried something to alter a block of color black like
width: 20px;
height: 20px;
background: #000;
-webkit-mask-image: radial-gradient(circle 7px at top, transparent 7px, black 50%);
I don't know how to solve my problem and even it is doable through only pure CSS :)
you don't really need mask here. Multiple radial-gradient() can do it
.box {
width:50px;
height:50px;
margin:10px;
--c:transparent 90%,#000 92% 98%,transparent; /* adjust this */
background:
radial-gradient(farthest-side at top left ,var(--c)) top left,
radial-gradient(farthest-side at top right ,var(--c)) top right,
radial-gradient(farthest-side at bottom left ,var(--c)) bottom left,
radial-gradient(farthest-side at bottom right,var(--c)) bottom right;
background-size:51% 51%; /* add this (each layer take half the height and width) */
background-repeat:no-repeat;
}
.alt {
--c:transparent 90%,#000 92%; /* we simply remove the last transparent for the full shape */
}
body {
background:pink;
}
<div class="box"></div>
<div class="box alt"></div>
Mask can be useful in case you want a fancy background:
.box {
width:50px;
height:50px;
margin:10px;
background:linear-gradient(45deg,red,blue);
--c:transparent 90%,#000 92% 98%,transparent; /* adjust this */
-webkit-mask:
radial-gradient(farthest-side at top left ,var(--c)) top left,
radial-gradient(farthest-side at top right ,var(--c)) top right,
radial-gradient(farthest-side at bottom left ,var(--c)) bottom left,
radial-gradient(farthest-side at bottom right,var(--c)) bottom right;
-webkit-mask-size:51% 51%; /* add this (each layer take half the height and width) */
-webkit-mask-repeat:no-repeat;
}
.alt {
--c:transparent 90%,#000 92%; /* we simply remove the last transparent for the full shape */
}
body {
background:pink;
}
<div class="box"></div>
<div class="box alt"></div>
I have a grid pattern that I have created using a linear-gradient.
#grid {
margin-left:80px;
margin-right:80px;
height:289px;
background-size: 48px 48px;
background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
}
The problem is that the right side of the grid cuts-off instead of showing the edge. How it looks.
How can I show the edge of the right side? Preferably, I would like to keep the margins the same.
Use a repeating-linear-gradient instead and you will have a better control over the grid and you can make it responsive.
You will have a fixed number of row/column that will grow shrink depending the element size:
.box {
--nc:10; /* Number of columns */
--nr:6; /* Number of rows */
width:80vw;
margin:auto;
height:60vh;
border-top:1px solid;
border-left:1px solid;
background:
repeating-linear-gradient(to right ,transparent 0px calc(100%/var(--nc) - 1px),#000 calc(100%/var(--nc) - 1px) calc(100%/var(--nc))),
repeating-linear-gradient(to bottom,transparent 0px calc(100%/var(--nr) - 1px),#000 calc(100%/var(--nr) - 1px) calc(100%/var(--nr)));
}
<div class="box">
</div>
Or you can keep the use of linear-gradient and consider the use of round as background-repeat. Resize the browser to see the effect:
.box {
width:80vw;
margin:auto;
height:80vh;
border-top:1px solid;
border-left:1px solid;
background:
linear-gradient(to right ,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%),
linear-gradient(to bottom,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%);
background-size:40px 100%,100% 60px;
background-repeat: round;
}
<div class="box">
</div>
Or space:
.box {
width:80vw;
margin:auto;
height:80vh;
border-top:1px solid;
border-left:1px solid;
background:
linear-gradient(to right ,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%),
linear-gradient(to bottom,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%);
background-size:40px 100%,100% 60px;
background-repeat: space;
}
<div class="box">
</div>
space
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.
round
The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.
Reference: https://drafts.csswg.org/css-backgrounds-3/#valdef-background-repeat-space
Kind of a hack but see this (View Full page):
#grid {
margin: 0 auto;
max-width: 1200px;
height: 289px;
background-size: 47.955555px 48px;
background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
}
<div id="grid"></div>
You will probably have to create media queries to control the width on smaller devices.
Try setting your grid margin so it's centered automatically instead of an absolute margin width, then most importantly give it a width that is a multiple of 48px plus 1 px (otherwise when it adds 48px for the last square it might push it outside the right edge of whatever sizing or margins you've set):
margin: 0 auto;
width: 1681px;
For instance, 1680 pixels gives you 35 grid squares, but the right edge will disappear if you don't make it 1681.
I'm looking to create this white arrow that goes inside the image with the HTML you can find in the snippet in a pure CSS way, not editing any HTML code.
.foto {
width: 100%;
float: left;
min-height: 215px;
background:
linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}
<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>
If you do not need to support Edge, you can get away with the clip-path. It's by far the easiest solution to your problem.
You can check the support on CanIUse
Also, amazingly helpful tool for this is Clippy, but don't forget to read about this technique on MDN - CSS clip-path.
.foto {
width: 100%;
float: left;
min-height: 215px;
-webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */
SOLUTION 2:
Old "trick" which has much much better support => CSS shapes.
You would basically need to create a new element (which is going to be your white triangle) and then put it on top of that image. Here's a sample code for a triangle that you need:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red; /* red is just for display puproses */
border-bottom: 50px solid transparent;
}
<div id="triangle-left"><div>
Btw, you have both background-image and img tag in your html. Decide which one you want to use, and if you have problem with cropping the image, you may want to look into background position and/or object-fit.
You can correct you gradient like below. You were almost good, simply switch the position of both making the bottom one on the top and the top on on the bottom:
.foto {
min-height: 200px;
background:
linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
background-repeat:no-repeat;
}
<div class="foto bg_fix" ></div>
I'm working on a HTML/CSS/JS project where the app is a fixed size and elements must be positioned precisely, based on the designs. Because the window size is fixed, I can easily work with pixel dimensions in CSS and not worry about resizing the browser. I also have the luxury of not worrying about IE or Opera: the app must work in webkit and firefox only.
In a few places, I need to have a gradient background going over specific number of pixels. This would be easily accomplished with something like
background-image: linear-gradient(to top, #666666, #000000 60px);
(and its -webkit- and -moz- counterparts.) This does the trick for most elements. However there are a couple where I need to have the top and bottom pixel positions for colour stops. If these were percentage points, then it could be done with something like:
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);
(from grey to black over 60px, then transparent and then black to grey over the last 10%). However I need to accomplish the same with pixels, as the element in question is sized differently at different times. I'd like to avoid having to use JS to re-apply the gradient at different dynamically calculated percentage points if needed.
So, my question: is there a way to specify a colour stop x pixels (not percentage) from the end?
I just came over this via search engine, i think the best solution was already given by vals with using multiple background images - but instead of using background-size and background-position i think it's a lot more flexible and stable to use alpha colors here (with rgba()), like in the example below:
background-image:
/* top gradient - pixels fixed */
linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px),
/* bottom gradient - pixels fixed */
linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),
/* background gradient - relative */
linear-gradient(to bottom, #eee 0%, #ccc 100%) ;
This gives me exactly the behaviour I was initially searching for. :)
Demo: http://codepen.io/Grilly86/pen/LVBxgQ
It works with calc(), but unfortunately not in MS browsers:
First row of each pairs has the solution with 2 background stacked, 2nd row has calc in use. Does not work with Internet Explorer and Edge browsers.
div {
margin-left: auto;
margin-right: 0;
width: 200px;
height: 20px;
animation: sweep 5s ease-in-out alternate infinite;
text-align: center;
color: white;
font-family: sans-serif;
font-weight: bold;
line-height: 20px;
will-change: width;
}
div:nth-child(odd) {
background-image: linear-gradient(to right, red, green 100px, transparent 101px), linear-gradient(to left, red, green 100px);
border-bottom: 1px solid gray;
}
div:nth-child(even) {
background-image: linear-gradient(to right, red, green 100px, green calc(100% - 100px), red);
margin-bottom: 10px;
}
div:nth-child(n+3) {
width: 300px;
}
div:nth-child(n+5) {
width: 400px;
}
div:nth-child(n+7) {
width: 500px;
}
div:nth-child(n+9) {
width: 600px;
}
#keyframes sweep {
100% {
width: 600px;
}
}
<div> 200 </div>
<div></div>
<div> 300 </div>
<div></div>
<div> 400 </div>
<div></div>
<div> 500 </div>
<div></div>
<div> 600 </div>
<div></div>
I don't think this is possible, but overlaying 2 objects, one with opaque pixels from bottom and the other with pixels from top, would still avoid using JS
.background {
position: absolute;
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
position: relative;
background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}
In the line of the previous answer from po228, but in the same element background.
Set 2 different gradients, one starting from top and the other from bottom
.test {
background: linear-gradient(to top, red 10px, white 10px),
linear-gradient(to bottom, blue 10px, white 10px);
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: bottom center, top center;
height: 150px;
width: 300px;
}
<div class="test"></div>
I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?
Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.
Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.
You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.