Utilisation de CSS pour définir du texte à l'intérieur d'un cercle

Vous voulez créer un affichage de texte circulaire en utilisant juste HTML et CSS? Il est réalisable avec la propriété shape-outside et certaines techniques CSS intelligentes. Cependant, cette approche nécessite un examen attentif de facteurs tels que la longueur du texte, les choix de polices et la réactivité.

Voici l'objectif: nous allons intégrer un devis et l'attribution d'auteur dans un cercle, visant une solution flexible et propre. Cette méthode évite les fichiers supplémentaires et maintient le HTML concis. Le résultat final devrait ressembler à ceci:

(Remarque: shape-outside n'est pas prise en charge par Internet Explorer ou des versions plus anciennes de Microsoft Edge.)

Structure HTML

Nous utiliserons un<div> Comme l'emballage extérieur et un sémantique<code><blockquote></blockquote> Comme le conteneur intérieur:

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">La conception de l'expérience est la conception de tout, indépendamment du médium ou entre les médias, avec l'expérience humaine comme résultat explicite et l'engagement humain comme un objectif explicite.</p>
    <footer>- Jesse James Garrett</footer>
  </blockquote>
</div>

La citation est dans un<p> avec la classe "texte", et l'attribution de l'auteur est dans un<code><footer></footer> . Ces cours fournissent des crochets pour le style CSS.

Style CSS initial

Commençons par l'emballage:

 .quote-wrapper {
  hauteur: 300px;
  Position: relative;
  Largeur: 300px;
}

Cela définit une taille minimale pour la réactivité et établit un positionnement relatif pour les ajustements ultérieurs.

Ensuite, nous allons créer l'apparence circulaire en utilisant un gradient radial:

 .texte {
  Contexte: gradient radial (
    Ellipse au centre,
    RGBA (0, 128, 172, 1) 0%,
    RGBA (0, 128, 172, 1) 70%,
    RGBA (0, 128, 172, 0) 70,3%
  ));
  hauteur: 100%;
  Largeur: 100%;
  Couleur: blanc;
  Position: relative;
  marge: 0;
}

Remarque: la valeur de 70,3% fournit un bord plus fluide qu'un simple 70%.

Style de texte et définition de forme

Style le paragraphe:

 .Text p {
  taille de police: 21px;
  Style de police: italique;
  hauteur: 100%;
  hauteur de ligne: 1,25;
  rembourrage: 0;
  Texte-aligne: Centre;
  Text-shadow: 0,5px 0,5px 1px RGBA (0, 0, 0, 0,3);
}

Pour façonner la zone de texte, nous utiliserons le ::before le pseudo-élément et la propriété shape-outside . Cela implique de définir un polygone qui se rapproche d'un cercle:

 .Text :: avant {
  contenu: "";
  flottant: à gauche;
  hauteur: 100%;
  Largeur: 50%;
  Forme-Out-Out: Polygone (
    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%
  ));
  marge de forme: 7%;
}

Un similaire ::before le pseudo-élément ne puisse être appliqué au<p> élément pour créer l'autre moitié du cercle.</p> <h3 id="Style-de-pied-de-page"> Style de pied de page</h3> <p> Pour positionner correctement l'attribution de l'auteur, nous utiliserons le positionnement absolu:</p> <pre class="brush:php;toolbar:false"> .quote-wrapper Blockquote Footer { En bas: 25px; taille de police: 17px; Style de police: italique; Position: absolue; Texte-aligne: Centre; Text-shadow: 0,5px 0,5px 1px RGBA (0, 0, 0, 0,3); Largeur: 100%; }</pre> <p> Un réglage fin de <code>font-size , shape-margin , line-height et d'autres propriétés peut être nécessaire pour obtenir un ajustement de texte optimal dans la forme.

Ajout d'une marque de devis

Un grand devis peut être ajouté en utilisant le ::before pseudo-élément sur .quote-wrapper :

 .quote-wrapper :: avant {
  Contenu: "\ 201c";
  Couleur: #ccc;
  Font-Family: Sans-Serif, Serif;
  taille de police: 270px;
  hauteur: 82px;
  hauteur de ligne: 1;
  Opacité: .9;
  Position: absolue;
  en haut: -48px;
  à gauche: 0;
  Z-Index: 1;
}

Conception réactive

Les requêtes multimédias peuvent être utilisées pour ajuster les tailles pour différentes tailles d'écran:

 @Media (Min-Width: 850px) {
  .quote-wrapper {
    hauteur: 370px;
    Largeur: 370px;
  }
  / * ... autres ajustements pour les écrans plus grands ... * /
}

Cette approche complète permet de créer un affichage de texte circulaire visuellement attrayant en utilisant uniquement HTML et CSS. N'oubliez pas que le réglage fin peut être nécessaire en fonction de vos préférences de texte et de conception spécifiques.