Menggunakan CSS untuk menetapkan teks di dalam bulatan

Mahu membuat paparan teks bulat menggunakan hanya HTML dan CSS? Ia boleh dicapai dengan harta benda shape-outside dan beberapa teknik CSS yang bijak. Walau bagaimanapun, pendekatan ini memerlukan pertimbangan yang teliti terhadap faktor -faktor seperti panjang teks, pilihan fon, dan respons.

Berikut adalah objektif: kami akan membenamkan petikan dan atribusi pengarang dalam bulatan, yang bertujuan untuk penyelesaian yang fleksibel dan bersih. Kaedah ini mengelakkan fail tambahan dan menyimpan ringkas HTML. Hasil akhir harus menyerupai ini:

(Nota: shape-outside tidak disokong oleh Internet Explorer atau versi lama Microsoft Edge.)

Struktur HTML

Kami akan menggunakan a<div> sebagai pembungkus luar dan semantik<code><blockquote></blockquote> Sebagai bekas dalaman:

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">Reka bentuk pengalaman adalah reka bentuk apa -apa, bebas daripada medium, atau di seluruh media, dengan pengalaman manusia sebagai hasil yang jelas, dan penglibatan manusia sebagai matlamat yang jelas.</p>
    <footer>- Jesse James Garrett</footer>
  </blockquote>
</div>

Petikannya ada di a<p> dengan kelas "teks", dan atribusi pengarang berada dalam a<code><footer></footer> . Kelas -kelas ini menyediakan cangkuk untuk gaya CSS.

Gaya CSS awal

Mari mulakan dengan pembungkus:

 .quote-wrapper {
  Ketinggian: 300px;
  Kedudukan: Relatif;
  lebar: 300px;
}

Ini menetapkan saiz minimum untuk responsif dan menetapkan kedudukan relatif untuk pelarasan kemudian.

Seterusnya, kami akan membuat penampilan bulat menggunakan kecerunan radial:

 .teks {
  Latar Belakang: Radial-Gradient (
    Ellipse di tengah,
    RGBA (0, 128, 172, 1) 0%,
    RGBA (0, 128, 172, 1) 70%,
    RGBA (0, 128, 172, 0) 70.3%
  );
  Ketinggian: 100%;
  Lebar: 100%;
  Warna: Putih;
  Kedudukan: Relatif;
  Margin: 0;
}

Nota: Nilai 70.3% memberikan kelebihan yang lebih lancar daripada 70% mudah.

Gaya teks dan definisi bentuk

Mari gaya perenggan:

 .Text P {
  saiz font: 21px;
  gaya font: italic;
  Ketinggian: 100%;
  Talian ketinggian: 1.25;
  Padding: 0;
  Teks-Align: Pusat;
  Teks-bayang-bayang: 0.5px 0.5px 1px RGBA (0, 0, 0, 0.3);
}

Untuk membentuk kawasan teks, kami akan menggunakan ::before Pseudo-Element dan harta benda shape-outside . Ini melibatkan menentukan poligon yang menghampiri bulatan:

 .Text :: Sebelum {
  Kandungan: "";
  Terapung: Kiri;
  Ketinggian: 100%;
  Lebar: 50%;
  Bentuk-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%
  );
  bentuk margin: 7%;
}

Yang serupa ::before pseudo-elemen boleh digunakan untuk<p> elemen untuk mencipta separuh lagi bulatan.</p> <h3 id="Gaya-footer"> Gaya footer</h3> <p> Untuk meletakkan atribusi pengarang dengan betul, kami akan menggunakan kedudukan mutlak:</p> <pre class="brush:php;toolbar:false"> . Quote-Wrapper Blockquote Footer { Bawah: 25px; saiz font: 17px; gaya font: italic; Kedudukan: Mutlak; Teks-Align: Pusat; Teks-bayang-bayang: 0.5px 0.5px 1px RGBA (0, 0, 0, 0.3); Lebar: 100%; }</pre> <p> Penalaan <code>font-size , shape-margin , line-height , dan sifat-sifat lain mungkin diperlukan untuk mencapai pemasangan teks yang optimum dalam bentuk.

Menambah tanda petikan

Tanda petikan yang besar boleh ditambah menggunakan ::before Pseudo-Element pada .quote-wrapper :

 .quote-wrapper :: sebelum {
  Kandungan: "\ 201c";
  Warna: #ccc;
  font-family: sans-serif, serif;
  saiz font: 270px;
  Ketinggian: 82px;
  Talian ketinggian: 1;
  opacity: .9;
  Kedudukan: Mutlak;
  Atas: -48px;
  Kiri: 0;
  Z-indeks: 1;
}

Reka bentuk responsif

Pertanyaan media boleh digunakan untuk menyesuaikan saiz untuk saiz skrin yang berbeza:

 @media (min-lebar: 850px) {
  .quote-wrapper {
    Ketinggian: 370px;
    lebar: 370px;
  }
  / * ... pelarasan lain untuk skrin yang lebih besar ... */
}

Pendekatan yang komprehensif ini membolehkan untuk mewujudkan paparan teks bulat yang menarik dengan hanya menggunakan HTML dan CSS. Ingatlah bahawa penalaan halus mungkin diperlukan berdasarkan teks khusus dan keutamaan reka bentuk anda.