Issue
I have an image of a heart that is square image and I'd like the text to wrap around the heart in a heart shape/pattern so it hugs close to the heart in the image. The issue I think is that the heart is heart shaped (how I want the text to wrap around on one side) and the image itself is square/square-ish so when I use border-radius: 35%;
and shape-outside: margin-box;
for example, the text wraps to a circle around the image, not the heart in the image or in a heart pattern. (Difficult to explain, but basically I want it to look professional with text outlining the heart, not the image necessarily.)
Possible solution: modifying the image so it is/is more heart-shaped, but I use this image a lot so I'd like to not do that because it might mess up some other stuff.
Here is what it looks like now at the top of this website: confluenceinfinite.org. It's not terrible, but not professional enough for me. The text outlines a circle, not a heart shape on the right side. I think it would be much cooler looking if it were tighter to the heart.
What am I missing?
* {
padding: 0;
box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
text-align: left;
font-size: 14px;
}
p {
margin: 30px 30px 30px 30px;
}
#black_heart_globe_top {
border-radius: 35%;
max-width: 15vw;
min-width: 100px;
margin: 0px 30px 30px 30px;
float: left; /* this keeps the text wrapping around the heart as a cirlce */
shape-outside: margin-box;
}
<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text </p>
Edit: I am not a css/html/markup expert at all.
Solution
Use shape-outside: polygon(...)` to have a custom shape for your text to wrap around.
EG:
* {
padding: 0;
box-sizing: border-box;
font-family: Arial;
text-align: left;
font-size: 14px;
}
p {
margin: 30px 30px 30px 30px;
}
#black_heart_globe_top {
max-width: 15vw;
min-width: 100px;
margin: 0px 10px 5px 10px;
float: left; /* this keeps the text wrapping around the heart as a cirlce */
shape-outside: polygon(50% 100%, 0% 35%, 10% 10%, 40% 0%, 60% 0%, 90% 10%, 100% 35%);
}
<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text </p>
Tip: Basic shapes + a tool for creating your own polygon here: https://bennettfeely.com/clippy/
Alternatively you could use shape-outside: url(...);
to use the alpha channel of the image itself as path. It won't work in this demo because of CORs but the code you need is
shape-outside: url("https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png");
shape-outside:polygon()
and shape-outside:<image>
are supported in all modern browsers and many old ones.
Answered By - Moob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.