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.