Css Draw a Circle Around Text

Y'all want to set some text inside the shape of a circle with HTML and CSS? That's crazy talk, correct?

Not really! Thank you to shape-outside and some pure CSS trickery information technology is possible to do exactly that.

Withal, this can be a fiddly layout option. We have to accept lots of different things into consideration, similar character count, word count, typeface variations, font sizing, font formatting, and responsive requirements to proper noun a few. One size, does not fit all hither. But hey, let's practice it anyway.

Here's the goal: nosotros want to display a <blockquote> and writer attribution (proper name) inside a circle shape. We likewise desire to brand the layout as flexible as we can. This layout won't crave whatever boosted files and keeps the HTML markup squeaky clean.

This is what nosotros're striving for:

The shape-outside feature is not supported in Internet Explorer or Microsoft Border 18 and below at the fourth dimension of this writing.

First up, the HTML

We're going to finish upwards needing a wrapper element to pull this off, then let's use the semantic <blockquote> equally the inner element. The outside wrapper can be a div:

          <div form="quote-wrapper">   <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">     <p>Experience blueprint is the design of annihilation, independent of medium, or across media, with human experience as an explicit outcome, and human date as an explicit goal.</p>     <footer>– Jesse James Garrett</footer>   </blockquote> </div>        

If you lot're interested in a deep-dive on the HTML of quotes, you lot're in luck. Nosotros're going to set the quote itself in a <p> and the name of the writer inside a <footer>. We've got class names for the CSS styling hooks we'll demand.

Side by side, some baseline CSS

Allow'south beginning with the div wrapper. Kickoff, we'll set the minimum (responsive) square size at 300px so it fits on smaller screens. and then, nosotros'll add together relative positioning (because we will need it subsequently).

          .quote-wrapper {   height: 300px;   position: relative;   width: 300px; }        

Now we'll brand the blockquote fill the whole wrapper and fake a circle shape with a radial gradient groundwork. (That's right, we are not using border-radius in this example).

          .text {   groundwork: radial-slope(     ellipse at eye,     rgba(0, 128, 172, one) 0%,     rgba(0, 128, 172, 1) 70%,     rgba(0, 128, 172, 0) 70.3%   );   summit: 100%;   width: 100%; }        

One affair to note is that seventy% displays a much rougher border. I manually added very small percentage increments and found that 70.3% looks the smoothest.

Discover the edge on the right is much smoother than the edge on the left.

Now we have our base circle in place. Add these additional manner rules to .text.

          .text {   color: white;   position: relative;   margin: 0; }        

Here'south what we accept so far:

Giving text the CSS treatment

Allow'south mode the paragraph outset:

          .text p {   font-size: 21px;   font-manner: italic;   acme: 100%;   line-height: 1.25;   padding: 0;   text-align: center;   text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); }        

Since posting this article, others accept commented below most an alternate technique using radial-slope every bit the shape-outside. This yields a smoother semicircular curve over polygons.

Let's use the blockquote's ::before pseudo-chemical element to create our shaping. This is where the shape-exterior holding comes into play. We plot out the polygon() coordinates and float it to the left so the text wraps inside the shape.

          .text::before {   content: "";   bladder: left;   pinnacle: 100%;   width: l%;   shape-outside: polygon(     0 0,     98% 0,     50% 6%,     23.4% 17.3%,     6% 32.half-dozen%,     0 50%,     vi% 65.6%,     23.iv% 82.7%,     fifty% 94%,     98% 100%,     0 100%   );   shape-margin: seven%; }        

Let's modify the radial groundwork color to red. The path editor polygon points and connecting lines are also blue. We are changing this color temporarily for greater dissimilarity with the editor tool.

          groundwork: radial-gradient(   ellipse at center,   rgba(210, 20, twenty, 1) 0%,   rgba(210, 20, 20, 1) 70%,   rgba(210, 20, xx, 0) 70.3% );        

I like Firefox's developer tools because information technology has super handy features similar a shape-outside path editor.  Click on the polygon shape in the inspector to encounter the active shape in the browser window. Large thumbs up to the Mozilla dev team for creating a very cool interface!

The Firefox shape editor tool also works forclip-path and <bones-shape> values.

Here's what we have at this indicate:

Those points along the shape are from Firefox's editing tool.

We can practise the same sort of matter for the paragraph's ::before pseudo-element. We employ the shape-outside to make the same polygon, in reverse, then bladder it to the correct.

          .text p::before {   content: "";   bladder: correct;   peak: 100%;   width: 50%;   shape-outside: polygon(     2% 0%,     100% 0%,     100% 100%,     2% 100%,     50% 94%,     76.vi% 82.7%,     94% 65.6%,     100% 50%,     94% 32.6%,     76.vi% 17.iii%,     fifty% half-dozen%     );   shape-margin: 7%; }        

Looking skilful, but where did the footer go? It overflowed the <blockquote> (where the circular colored groundwork is), and then we're unable to come across that white text on a white background.

Styling the footer

At present nosotros can fashion the <footer> and give it an accented position to bring information technology back on elevation of the circumvolve.

          .quote-wrapper blockquote footer {   bottom: 25px;   font-size: 17px;   font-style: italic;   position: absolute;   text-align: centre;   text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);   width: 100%; }        

Over again, feel gratis to alter the background color to suit your needs.

This is where the fiddly part comes in. The text itself needs to be styled in such a style that the number of words and characters work inside the shape. I used these CSS rules to help make information technology fit nicely:

• font-size
• shape-margin (we have two exclusion areas to adjust)
• line-height
• alphabetic character-spacing
• font-weight
• font-way
• min-width and min-height (to size of the .quote-wrapper container)

Calculation the quote mark for some flourish

Did you lot see the giant quotation mark in the original demo? That's what nosotros want to make next.

We'll have advantage of the ::before pseudo-element for .quote-wrapper. Still once more, this will take a fair corporeality of fiddling to make it await right. I found line-tiptop has a huge effect on the marking'south vertical position.

          .quote-wrapper::before {   content: "\201C";   colour: #ccc;   font-family: sans-serif, serif;   font-size: 270px;   elevation: 82px;   line-height: 1;   opacity: .ix;   position: accented;   top: -48px;   left: 0;   z-index: 1; }        

In that location's actually a difference between curly ("smart") quote marks and straight (dumb) ones. I'd suggest using curly quote marks for dialogue and direct quote marks for coding.

Handling responsive styles

Nosotros should probably brand our quote bigger on larger screens. I'm setting a breakpoint at 850px, but yous may want to use something unlike.

          @media (min-width: 850px) {   .quote-wrapper {     top: 370px;     width: 370px;   }   .quote-wrapper::before {     font-size: 300px;   }   .text p {     font-size: 26px;   }   .quote-wrapper blockquote footer {     bottom: 32px;   } }        

There nosotros accept it!

We set HTML text inside a round shape using a combination of old and new CSS techniques to make an appealing <blockquote> that commands attention. And nosotros achieved our display goal without any boosted dependencies, while nevertheless keeping the HTML markup clean and semantic.

I hope this commodity encourages you lot to explore new layout possibilities with shape-exterior. Stay tuned for shape-within.

daltonbacte1939.blogspot.com

Source: https://css-tricks.com/using-css-to-set-text-inside-a-circle/