Outline image with CSS text

Question

I am developing a website but without using any framework to this end;I would like to point out that I have only started in the studies of front, and that CSS is totally new to me.

I’m trying to fix an image in a certain region of a div (this ok) and allocate a text around it. However, it is not working as desired. Below the image of what I have so far:

What I need to do is make the text "flow" around the character, but I have no idea how to do it, and I’ve already cracked my head pretty hard with this problem. All help is welcome. Follow the code I’m using:

HTML:

<section class="welcome">
    <h1>Seja o Melhor</h1>
    <img class="featured  put-on-top-left" src="img/teemo.png" alt="Conquiste a vitória!">
    <a class="featured-link" href="">Criar nova <em>build</em></a>
    <p class="get-around-right">Crie e compare estratégias de <em>build</em>, analisando as estátiscas que são modificadas a cada novo item escolhido e obtenha o melhor conjunto de itens para o seu campeão!</p>
</section>

CSS:

.welcome {
    padding: 15px;
    text-align: center;
    width: 250px;
    border: 5px solid #c0c0c0;
    margin: auto;
    margin-top: 50px;
    background-color: #e9eaec
}

.welcome h1 {
    font-family: 'roman-grids-cap';
    font-size: 2em;
    text-transform: uppercase;
    color: #4d4d4d
}

.featured {
    max-width: 125px;
    position: absolute;
    margin-top: 27px;
    left: 0px
}

.featured-link {
    display: block
}

From now on, thank you for all and qqr help!

Answer 1

I will post a more current answer, but it is not completely crossbrowser, does not work in IE or Edge, and only works in the latest version of Firefox (version 62+)

The idea here is to use the property shap-outside with a .png transparent background or with a clip-path and uses it as a "mask" to float the text around the image. With this you get the effect of the text around the image. In the case of .png is the channel alpha that will cause the text to bypass the image, and in the case of clip-path is the very shap built that will take care of it. Detail you may need to margins or padding to move the text away from the image giving a breather between text and image.

• Here you can consult your browser support for shap-outside: https://caniuse.com/#feat=css-shapes
• You can consult your browser support for clip-path here: https://caniuse.com/#feat=css-clip-path

.box {
    box-sizing: border-box;
    padding: 1rem;
    width: 400px;
}
.imagem {
    width: 80px;
    height: 80px;
    float: left;
    shape-outside: url(https://vignette.wikia.nocookie.net/mario/images/0/0c/1000px-Mario_NSMB2.png/revision/latest?cb=20120920202215&path-prefix=pt-br);
    background-size: 80px 80px;
    padding-left: 15px;
    padding-right: -15px
}
.star {
    width: 80px;
    height: 80px;
    float: left;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
    shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background-color: red;
    background-size: 100px 100px;
    margin-right: 1em;
}
.svgs {
width: 100px;
height: 100px;
float: left;
shape-outside: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
background-size: 100px 100px;
}

<div class="box">
    <img class="imagem" src="https://vignette.wikia.nocookie.net/mario/images/0/0c/1000px-Mario_NSMB2.png/revision/latest?cb=20120920202215&path-prefix=pt-br" alt="">
    <b>Usando .PNG</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia?</p>
</div>

<div class="box">
    <div class="star"></div>
    <b>Usando clip-path</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia? </p>
</div>

<div class="box">
    <img class="svgs" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg" alt="">
    <b>SVG não funciona no shap-outside</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia? </p>
</div>

OBS: The effect using .png usually only works if the image is hosted on some server, even if locally. So to test in local environment I suggest you access the files by localhost using Wamp, Xamp, etc, or which you put into the FTP of some server.

Answer 2

Unfortunately I believe that what you want is not possible. The limits of HTML elements are all, by default, rectangles. You can even rotate them so that they become lozenges or other forms, but at the end of the day you will still have elements with limits defined by four sides. Note that this is because the HTML engine of browsers does not take into account things like image transparency.

It’s not possible, just with HTML, Javascript and CSS, make the text flow around a transparent image. You can try two alternatives:

• Punctual alternative: you can include the direct text in the image. The advantage is that this way you can make something really beautiful and that will have the same presentation in any browser. The downside is that this requires a specific job for each different image - it is not possible to reuse the solution easily between different images.

• Alternative Mcgyver: you can make the image float on the other components (i.e.: position: absolute (or fixed)), and place several div's without text, but with width, behind the image. Each div would have a different length according to your need. The advantage is that it is not necessary to edit the image. But beyond the same disadvantage of the previous method, you will need to test this in each browser and potentially have to develop a formatting for each different browser. Disclaimer: given the size of the gambiarra, this solution condemns your soul to an eternity of torments in hell after your disembodiment.

P s..:

I am developing a website, but without using any framework for it(...)

You can look at the code as pieces, and the frameworks as tools. It is completely possible to pin a nail to a wall or a screw on a board without the use of hammers or screwdrivers, but you will get hurt. Enough. And your friends will question your sanity. With programming is not much different.

Answer 3

Place your image in a span or div and the text. In the image you place float: left. Example:

<span>
    <img src="suaimagem.jpg" style="width:100px; height: 100px; float: left;">
    <h1>Olá Mundo!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
    </span>