Draw a Circle Around Initials in Css

You want to fix some text within the shape of a circle with HTML and CSS? That'south crazy talk, right?

Not actually! Thanks to shape-outside and some pure CSS trickery it is possible to exercise exactly that.

However, this can be a fiddly layout option. We take to take lots of dissimilar things into consideration, similar grapheme count, word count, typeface variations, font sizing, font formatting, and responsive requirements to name a few. 1 size, does not fit all hither. Merely hey, let'south do it anyway.

Here's the goal: we want to brandish a <blockquote> and author attribution (proper noun) within a circumvolve shape. We also want to make the layout equally flexible equally we can. This layout won't require whatever additional files and keeps the HTML markup squeaky make clean.

This is what nosotros're striving for:

The shape-outside characteristic is not supported in Internet Explorer or Microsoft Edge 18 and below at the time of this writing.

First upwards, the HTML

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

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

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

Adjacent, some baseline CSS

Let's start with the div wrapper. First, we'll set the minimum (responsive) square size at 300px so it fits on smaller screens. so, nosotros'll add relative positioning (because nosotros will need information technology after).

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

Now we'll make the blockquote fill the whole wrapper and simulated a circumvolve shape with a radial gradient background. (That's right, we are not using border-radius in this case).

          .text {   background: radial-gradient(     ellipse at eye,     rgba(0, 128, 172, ane) 0%,     rgba(0, 128, 172, 1) seventy%,     rgba(0, 128, 172, 0) seventy.3%   );   superlative: 100%;   width: 100%; }        

One thing to notation is that 70% displays a much rougher edge. I manually added very small percent increments and institute that 70.3% looks the smoothest.

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

Now we take our base of operations circle in place. Add these additional manner rules to .text.

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

Hither's what we accept so far:

Giving text the CSS handling

Allow's style the paragraph first:

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

Since posting this commodity, others have commented beneath almost an alternate technique using radial-gradient equally 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-outside property comes into play. We plot out the polygon() coordinates and float it to the left then the text wraps inside the shape.

          .text::before {   content: "";   float: left;   height: 100%;   width: 50%;   shape-outside: polygon(     0 0,     98% 0,     50% half dozen%,     23.four% 17.3%,     6% 32.6%,     0 50%,     half-dozen% 65.half-dozen%,     23.4% 82.7%,     50% 94%,     98% 100%,     0 100%   );   shape-margin: 7%; }        

Permit's change the radial groundwork color to ruby. The path editor polygon points and connecting lines are besides blue. We are changing this colour temporarily for greater contrast with the editor tool.

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

I like Firefox's programmer tools because information technology has super handy features like a shape-outside path editor.  Click on the polygon shape in the inspector to see the agile shape in the browser window. Big thumbs upwardly to the Mozilla dev squad for creating a very absurd interface!

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

Here's what we take at this point:

Those points forth the shape are from Firefox'due south editing tool.

Nosotros can do the same sort of thing for the paragraph's ::before pseudo-element. We utilize the shape-outside to make the same polygon, in reverse, and then float information technology to the correct.

          .text p::before {   content: "";   bladder: correct;   height: 100%;   width: 50%;   shape-outside: polygon(     two% 0%,     100% 0%,     100% 100%,     2% 100%,     fifty% 94%,     76.6% 82.seven%,     94% 65.6%,     100% 50%,     94% 32.half-dozen%,     76.6% 17.3%,     50% 6%     );   shape-margin: 7%; }        

Looking good, only where did the footer go? Information technology overflowed the <blockquote> (where the circular colored background is), so we're unable to see that white text on a white background.

Styling the footer

At present we can style the <footer> and give it an absolute position to bring it back on top of the circle.

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

Once again, experience gratis to modify the background color to adapt your needs.

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

• font-size
• shape-margin (we have two exclusion areas to accommodate)
• line-height
• letter-spacing
• font-weight
• font-style
• min-width and min-height (to size of the .quote-wrapper container)

Adding the quote mark for some flourish

Did you lot see the behemothic quotation marking in the original demo? That's what we want to make side by side.

We'll take advantage of the ::before pseudo-element for .quote-wrapper. Withal again, this will take a fair corporeality of fiddling to brand information technology look correct. I found line-height has a huge issue on the marking's vertical position.

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

There's actually a divergence between curly ("smart") quote marks and straight (dumb) ones. I'd suggest using curly quote marks for dialogue and straight quote marks for coding.

Handling responsive styles

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

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

In that location we have information technology!

We set HTML text inside a circular shape using a combination of old and new CSS techniques to brand an appealing <blockquote> that commands attending. And we achieved our display goal without any additional dependencies, while still keeping the HTML markup make clean and semantic.

I promise this article encourages you to explore new layout possibilities with shape-outside. Stay tuned for shape-inside.

baierpusting.blogspot.com

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

Share this post