Verwenden Sie CSS, um den Text in einem Kreis einzustellen

Möchten Sie eine kreisförmige Textanzeige mit nur HTML und CSS erstellen? Es ist mit der shape-outside Eigenschaft und einigen cleveren CSS-Techniken erreichbar. Dieser Ansatz erfordert jedoch eine sorgfältige Berücksichtigung von Faktoren wie Textlänge, Schriftauswahl und Reaktionsfähigkeit.

Hier ist das Ziel: Wir werden eine Zitat und Autor -Zuordnung innerhalb eines Kreises einbetten, um eine flexible und saubere Lösung anzustreben. Diese Methode vermeidet zusätzliche Dateien und hält die HTML präzise. Das Endergebnis sollte Folgendes ähneln:

(Hinweis: shape-outside wird nicht von Internet Explorer oder älteren Versionen von Microsoft Edge unterstützt.)

HTML -Struktur

Wir werden a verwenden<div> als äußere Wrapper und eine semantische<code><blockquote></blockquote> als innerer Behälter:

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">Experience Design ist das Design von irgendetwas, unabhängig von Medium oder Medien, mit menschlichen Erfahrung als explizites Ergebnis und menschliches Engagement als explizites Ziel.</p>
    <footer>- Jesse James Garrett</footer>
  </blockquote>
</div>

Das Zitat ist in a<p> mit der Klasse "Text" und die Zuordnung der Autors liegt innerhalb von a<code><footer></footer> . Diese Klassen bieten Haken für das CSS -Styling.

Erstes CSS -Styling

Beginnen wir mit der Wrapper:

 .quote-wrapper {
  Höhe: 300px;
  Position: Relativ;
  Breite: 300px;
}

Dies legt eine Mindestgröße für die Reaktionsfähigkeit fest und legt relative Positionierung für spätere Anpassungen fest.

Als nächstes werden wir das kreisförmige Erscheinungsbild mit einem radialen Gradienten erstellen:

 .Text {
  Hintergrund: Radialgradient (
    Ellipse im Zentrum,
    RGBA (0, 128, 172, 1) 0%,
    RGBA (0, 128, 172, 1) 70%,
    RGBA (0, 128, 172, 0) 70,3%
  );
  Höhe: 100%;
  Breite: 100%;
  Farbe: weiß;
  Position: Relativ;
  Rand: 0;
}

HINWEIS: Der Wert von 70,3% bietet eine glattere Kante als eine einfache 70%.

Textstyling und Formdefinition

Stylen wir den Absatz:

 .Text P {
  Schriftgröße: 21px;
  Schriftstil: kursiv;
  Höhe: 100%;
  Linienhöhe: 1,25;
  Polsterung: 0;
  Text-Align: Mitte;
  Text-Shadow: 0,5PX 0,5PX 1PX RGBA (0, 0, 0, 0,3);
}

Um den Textbereich zu formen, verwenden wir das ::before Pseudoelement und die shape-outside Eigenschaft. Dies beinhaltet die Definition eines Polygons, das sich einem Kreis annähert:

 .Text :: vor {
  Inhalt: "";
  float: links;
  Höhe: 100%;
  Breite: 50%;
  Form-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%
  );
  Form-Margin: 7%;
}

Ein ähnliches ::before Pseudoelement auf die angewendet werden kann<p> Element, um die andere Hälfte des Kreises zu erstellen.</p> <h3 id="Fußzeile-Styling"> Fußzeile Styling</h3> <p> Um die Zuschreibung der Autor korrekt zu positionieren, verwenden wir die absolute Positionierung:</p> <pre class="brush:php;toolbar:false"> .quote-wrapper Blockquote-Fußzeile { unten: 25px; Schriftgröße: 17px; Schriftstil: kursiv; Position: absolut; Text-Align: Mitte; Text-Shadow: 0,5PX 0,5PX 1PX RGBA (0, 0, 0, 0,3); Breite: 100%; }</pre> <p> Eine Feinabstimmung von <code>font-size , shape-margin , line-height und anderen Eigenschaften kann erforderlich sein, um eine optimale Textanpassung innerhalb der Form zu erreichen.

Hinzufügen einer Zitatmarke

Ein großes Anführungszeichen kann mit dem ::before Pseudo-Element auf .quote-wrapper hinzugefügt werden:

 .quote-wrapper :: vor {
  Inhalt: "\ 201c";
  Farbe: #CCC;
  Schriftfamilie: sans-serif, serif;
  Schriftgröße: 270px;
  Höhe: 82px;
  Linienhöhe: 1;
  Deckkraft: .9;
  Position: absolut;
  Oben: -48px;
  links: 0;
  Z-Index: 1;
}

Responsive Design

Medienabfragen können verwendet werden, um die Größen für verschiedene Bildschirmgrößen anzupassen:

 @media (Min-Width: 850px) {
  .quote-wrapper {
    Höhe: 370px;
    Breite: 370px;
  }
  / * ... andere Anpassungen für größere Bildschirme ... */
}

Dieser umfassende Ansatz ermöglicht das Erstellen einer visuell ansprechenden kreisförmigen Textanzeige mit nur HTML und CSS. Denken Sie daran, dass eine Feinabstimmung basierend auf Ihren spezifischen Text- und Designeinstellungen erforderlich ist.