Using CSS to Set Text Inside a Circle

Want to create a circular text display using just HTML and CSS? It's achievable with the shape-outside property and some clever CSS techniques. However, this approach requires careful consideration of factors like text length, font choices, and responsiveness.

Here's the objective: We'll embed a quote and author attribution within a circle, aiming for a flexible and clean solution. This method avoids extra files and keeps the HTML concise. The final result should resemble this:

(Note: shape-outside isn't supported by Internet Explorer or older versions of Microsoft Edge.)

HTML Structure

We'll use a <div> as the outer wrapper and a semantic <code><blockquote></blockquote> as the inner container:

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">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>

The quote is in a <p></p> with the class "text", and the author attribution is within a <footer></footer>. These classes provide hooks for CSS styling.

Initial CSS Styling

Let's start with the wrapper:

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

This sets a minimum size for responsiveness and establishes relative positioning for later adjustments.

Next, we'll create the circular appearance using a radial gradient:

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
  color: white;
  position: relative;
  margin: 0;
}

Note: The 70.3% value provides a smoother edge than a simple 70%.

Text Styling and Shape Definition

Let's style the paragraph:

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

To shape the text area, we'll utilize the ::before pseudo-element and the shape-outside property. This involves defining a polygon that approximates a circle:

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

A similar ::before pseudo-element can be applied to the <p></p> element to create the other half of the circle.

Footer Styling

To position the author attribution correctly, we'll use absolute positioning:

.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%;
}

Fine-tuning of font-size, shape-margin, line-height, and other properties may be necessary to achieve optimal text fitting within the shape.

Adding a Quote Mark

A large quotation mark can be added using the ::before pseudo-element on .quote-wrapper:

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

Responsive Design

Media queries can be used to adjust sizes for different screen sizes:

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  /* ... other adjustments for larger screens ... */
}

This comprehensive approach allows for creating a visually appealing circular text display using only HTML and CSS. Remember that fine-tuning might be needed based on your specific text and design preferences.

The above is the detailed content of Using CSS to Set Text Inside a Circle. For more information, please follow other related articles on the PHP Chinese website!