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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> <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.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den Text in einem Kreis einzustellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!