Related
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>
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 show svg element with just style tag inside another svg element as below.
<svg class="root-svg" width="500" height="200">
<svg class="card-background" width="100%" height="100%" style="opacity: 0.79; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 15px; background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeaeGue0HlHLYRj5wYeUdYO1_geor9C3EvRh-nRzell6MbifcKrg") center center no-repeat;">
</svg>
</svg>
Codepen
But content of inside svg is not showing up. But when I just show inside svg independently it shows up as excepted.
How do I show svg with just style tag inside another svg?
Have you tried to add the namespace for the inner svg ?
<svg class="root-svg" width="500" height="200" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card-background" width="100%" height="100%" style="opacity: 0.79; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 15px; background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeaeGue0HlHLYRj5wYeUdYO1_geor9C3EvRh-nRzell6MbifcKrg") center center no-repeat;">
</svg>
</svg>
So I have heart on CSS.
But now I want to modify it and add inside dynamic image.
Here is what I have:
.heart {
position: relative;
width: 100px;
height: 90px;
float: left;
width: 100px;
height: 90px;
overflow: hidden;
}
.heart.right {
left: auto;
right: 0;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
Here is my fiddle: https://jsfiddle.net/9g1qswdd/
All the existing answers help you to place an image on top of a heart shape but not crop or cut it into a heart shape. The only existing answer that would help you achieve the latter is the clip-path model but that code produces a different output shape (its probably more a sample on how to do than a direct answer to your question).
For inserting an image in to the heart shape (I assume you mean cutting the image into a heart shape), don't use your existing approach. It is very tough because you that CSS method creates the shape by using two rotated elements. So, you'd have to go through the pain of - (a) split the image into two bits (b) place each half on each side (c) reverse rotate the images to nullify the effect the initial rotation that was set on the element (d) set background-position for each half of the image such that they match accurately etc. Even after going through all these troubles, you'd still face problems when the image is dynamic because setting background-position via percentage value work a lot more differently than what we think.
Use SVG: SVG is the recommended tool for creating such complex shapes with a background that is not a solid color.
With SVG, we can easily create complex shapes using the path element and also add an image as background or fill. SVGs are scalable and so are highly useful in responsive design. Using SVGs also allow us greater control over the shape itself.
Below is a heart shape that is created using SVG and having an image inserted into it as background.
svg {
height: 200px;
width: 200px;
}
path {
fill: url(#bg-image);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 100 100'>
<defs>
<pattern id='bg-image' width='1' height='1' patternUnits='objectBoundingBox'>
<image xlink:href='https://placeimg.com/100/100/nature/7' width='100' height='100' />
</pattern>
</defs>
<path d='M50,90 L20,60
A15,15 0 0,1 50,30
A15,15 0 0,1 80,60 z' />
</svg>
Below is a very short explanation of what the commands used in the path element's d attribute do. A more detailed explanation can be found in this MDN page:
M - Moves pen to the point specified by the coordinate given immediately after the command.
A - Draw an arc with the specified X and Y radius, ending at the point specified after command.
L - Draw a straight line from one specified point to another.
z - Close the path by drawing a straight line from path's last point to its first point.
You can also use a SVG based clip-path definition to clip the image like in the below snippet but the browser support for clip-path is lower.
img {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 100 100' height='0' width='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M.50,.90 L.20,.60
A.15,.15 0 0,1 .50,.30
A.15,.15 0 0,1 .80,.60 z' />
</clipPath>
</defs>
</svg>
<img src='https://placeimg.com/100/100/nature/7' />
<img src='https://placeimg.com/200/200/nature/7' />
Assuming that the heart is to be placed on a solid background, you can hide selectively the image with several gradients placed on the pseudo elements.
This has the advantage of enabling the use of cover or contain on the background image size:
.heart2 {
width: 300px;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
position: relative;
border: solid 1px red;
}
.heart2:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
left: -75px;
top: 75px;
transform: rotate(45deg);
background-image: linear-gradient(white, white), linear-gradient(white, white);
background-size: 50%;
background-repeat: no-repeat;
background-position: right top, left bottom;
}
.heart2:after {
position: absolute;
width: 114%;
height: 114%;
content: '';
left: -21px;
bottom: 70px;
transform: rotate(45deg);
background-image: radial-gradient(circle at center 170px, transparent 85px, white 70px), radial-gradient(circle at 170px center, transparent 85px, white 75px), linear-gradient(white, white);
background-size: 50%;
background-repeat: no-repeat;
background-position: right top, left bottom, left top;
}
<div class="heart2"></div>
your css should be
.heart-img{
position:absolute;
width:40px;
height:40px;
top:20px;
left:30px;
z-index:1000;
}
html
<div class="heart">
<img src="http://lorempixel.com/400/200/sports/1" class="heart-img">
</div>
https://jsfiddle.net/9g1qswdd/3/
If you want to add a dynamic image inside of the heart something like this should do the trick:
https://jsfiddle.net/kn1m081z/
I've added some simple CSS to set the size of the image like this:
.heart img
{
position:relative;
z-index:3;
left:34px;
top:20px;
width:30px;
height:30px;
background:#ff5500
}
I've given the image a background colour so you can see where the image is - once you dynamically add an image src to the image tag I have added you will see the dynamic image inside of the heart - this should be what you're after!
You can add background image on .heart and shift 5px bottom to the heart
.heart {
background-image: url('');
}
.heart:before,
.heart:after {
top: 5px;
}
I would suggest to make use of clip-path property of CSS. I tried making a dialog box:
.clip-path {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
https://jsfiddle.net/9g1qswdd/5/
similarly you can try making a heart with clip-path property. To make life easier, you can use this tool to do that for you: http://bennettfeely.com/clippy/
you have to make img class "relative" and heart class "absolute"
<style>
.img
{
position:relative;
background-image: url('');
}
.heart{position:absolute; top:50; left:50%;}
</style>
<div class="img"><div class="heart"></div></div>
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>