Is it possible to have a gap between repeating images?
I have a 1px heigh solid horizontal black line SVG. I want to use this as a repeating background image. But with gaps (of 1.5em) between the vertical repeat. To create a lined paper look. The horizontal repeat should repeat with no gaps (to create the lined paper look on all width of screens).
I've tried using a repeating linear gradient, but at smaller window sizes it displays very faintly – a problem with sub-pixel rendering.
h1,
h2 {
font-size: clamp(6.4rem, 4vw, 8rem);
line-height: 1.5em;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0) calc(1.5em - 1px), rgb(0, 0, 0) calc(1.5em - 1px), rgb(0, 0, 0) 1.5em );
}
UPDATE
The work around I've done is:
h1,
h2 {
font-size: clamp(6.4rem, 4vw, 8rem);
line-height: 1.5em;
background-image: url("images/lines.svg");
background-size: 1.5em 1.5em;
}
I've made the SVG a square image 120px x 120px (8rem/80px x 1.5). The horizontal line has a stroke of 1px and is a non-scaling-stroke, so it should remain 1px even when the image is displayed very small.
<svg enable-background="new 0 0 120 120" viewBox="0 0 120 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="m0 119h120" fill="none" stroke="#000" stroke-width="1px" vector-effect="non-scaling-stroke"/>
</svg>
This is my solution. It appears to work.
h1,
h2 {
font-size: clamp(6.4rem, 4vw, 8rem);
line-height: 1.5em;
background-image: url("images/lines.svg");
background-size: 100% 1.5em;
}
I've made the SVG a square image 120px x 120px (8rem/80px x 1.5). The horizontal line has a stroke of 1px and is a non-scaling-stroke, so it should remain 1px even when the image is displayed very small.
<svg enable-background="new 0 0 120 120" viewBox="0 0 120 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="m0 119h120" fill="none" stroke="#000" stroke-width="1px" vector-effect="non-scaling-stroke"/>
</svg>
Related
While replacing some .png icons to .svg I'd run onto some problem, consider this:
<div class="container"></div>
.container {
width: 100px;
height: 100px;
background-image: url("some-image.png");
background-size: cover;
transition: 1s;
}
In this case I had applied CSS transition to container and change its size (enlarge). Image inside the container onenlarge scales from center point inline with the container.
But when I changed it to .svg code (bellow) it starts to scaling from the left top corner. Does it possible to make it scale from the center of the container with my current set up (or at all)?
<div class="container"> <svg></svg> </div>
.container {
width: 100px;
height: 100px;
transition: 1s;
}
// I already tried play with transform-origin all the way possible, applying it to the container/svg tag/and all elements inside it...
This is not an answer but I need to add some code. I don't see any difference. Please take a look. First I'm using two elements image.
.container {
position: absolute;
top: 0;
width: 100px;
height: 100px;
border: 1px solid;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
background-size: cover;
transition: 1s;
}
.svg {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg");
left: 250px;
}
.container:hover {
width: 200px;
height: 200px;
}
<div class="container"></div>
<div class="container svg"></div>
The second attempt: this time I'm using an svg element instead of a background image for the second div. No difference either.
.container {
position: absolute;
top: 0;
width: 100px;
height: 100px;
border: 1px solid;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
background-size: cover;
transition: 1s;
overflow:hidden;
}
.svg {
background:black;
left: 250px;
}
.container:hover {
width: 200px;
height: 200px;
}
<div class="container"></div>
<div class="container svg">
<svg viewBox="41 54 106 122">
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>
</div><div class="container"></div>
<div class="container svg">
<svg viewBox="41 54 106 122">
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>
</div>
Maybe you should edit your question and add more detail
I found the problem as well as the solution
All seems fine when animating only height and width, but some of my icons have top and left properties to animate to. And these ones are cousins the problem.
In my case it was looked like the svg is constantly "jumps" to the upper left corner while its container was resizing, but actually it was just snapping to the whole pixel value.
Animation of top/left properties are not subpixel, so in order to animate it smoothly it is better to animate X and Y, instead of manipulating them directly.
When I did so, the problem was gone.
Try to use the CSS attribute transform-origin see here
div {
transform-origin: 50% 50%;
}
transform-origin: 50% 50%; should center it.
I am trying to add dashed border top on a div using css. I have this:
https://jsfiddle.net/uexma4o6/74/
div {
display: inline-block;
width: 50px;
height: 50px;
border-top: 2px dashed #AAA;
}
The problem is that first and last dash are little longer than others. I think it's because actual borders on the left and right are included? How can I make all dashes same width? I am looking for solution without using border-image. Thanks.
Try this. you can adjust the size and width based on your requirement.
background-image: linear-gradient(to right, white 33%, rgba(255,255,255,0) 0%);
background-position: top;
background-size: 5px 3px;
background-repeat: repeat-x;
border-right-width: 2px;
You could use a SVG line within your div like -
<div>
<svg width="50" height="2" viewBox="0 0 50 2" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="50" y2="0" stroke-width="2" stroke="#AAA" stroke-dasharray="2" stroke-width="2"/>
</svg>
</div>
input {
border-radius: 5px;
border: none;
font: normal 13px "Trebuchet MS";
padding: 0 0 0 30px;
width: 220px;
height: 30px;
margin: 0 auto;
display: block;
background-color: #ccc;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>');
background-size: 19px;
background-position: center 10px;
background-repeat: no-repeat;
}
This code should display a input bar with the search icon to 10px from the left and centered vertically, instead it's in the center of the bar and offset vertically. When I change:
background-position: center 10px;
to:
background-position: center left;
It does what I want it to but is missing the 10px padding to the left. Any clue as to what's going on here? I just can't get this working properly.
background-position: 10px center should do it for you.
using center and left is using keywords only, which the browser somehow is able to get right because he can tell that left is not meant as a vertical unit.
I'm setting an svg as a background image for a div (set as a table-cell, but now it's not the point). It stretches to fit the space, and that's what I wanted, and I set some padding (IN % units) to keep the text inside the image. Now the problem is that scaling the viewport or just changing the height of the div padding and image height change differently so the text positioning is scrambled. Here is the css code:
#contenuto {
border: 0px solid;
width: 79%;
display: table-cell;
font-size: 1.0em;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 5%;
padding-left: 7%;
background: url(./pic/template.svg) no-repeat;
background-size: auto 100%;
background-position:center center;
background-origin: border-box;
}
the svg file is properly set I guess:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 640" preserveAspectRatio="none">
What can I do to fix?
I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:
Just to update this, it seems you can in multiple ways.
Lea Verou posted a solution
Here is mine using border-image
Using border image
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
Lea Verou's solution
html
<div class="inner-round"></div>
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}
In modern browsers, you can use mask-image:
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>
http://jsbin.com/eViJexO/1/
Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.
You can also use and inline svg with a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
In this example, I use a cubic bezier curve for the inverted round edge.
With this approach, you can also fill the shape with an image or gradient:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
This can be done with a radial gradient.
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>
Update: There are a plethora of options available now. Check out one of the other answers.
Original answer:
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
Bug 62458 - Feature Request: Inverse rounded corners
For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
What you need is a browser that understands :before/:after and box-shadow :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka
I made an online generator to easily get the code of any combination you want: https://css-generators.com/custom-corners/
A few examples:
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-color for each span.
If you want all 4 corners you would have to add a separate class for each span inside your div, and each class would simulate a corner, top left, top right etc.
No.
If you have solid background you can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.
actually there's one way, like this:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as #Domenic says you'll need a solid background, otherwise you'll get this:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>