CSS를 사용하여 원 안에 텍스트를 설정합니다

HTML 및 CSS 만 사용하여 원형 텍스트 디스플레이를 만들고 싶으십니까? shape-outside 속성과 일부 영리한 CSS 기술로 달성 할 수 있습니다. 그러나이 접근법은 텍스트 길이, 글꼴 선택 및 응답 성과 같은 요소를 신중하게 고려해야합니다.

목표는 다음과 같습니다. 우리는 유연하고 깨끗한 솔루션을 목표로 서클 내에 인용문과 저자 속성을 포함시킬 것입니다. 이 방법은 추가 파일을 피하고 HTML을 간결하게 유지합니다. 최종 결과는 다음과 비슷해야합니다.

(참고 : shape-outside Internet Explorer 또는 오래된 버전의 Microsoft Edge에서 지원하지 않습니다.)

HTML 구조

우리는 사용할 것입니다<div> 외부 래퍼와 의미 론적<code><blockquote></blockquote> 내부 컨테이너로 :

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">Experience Design은 명백한 결과로 인간의 경험과 명백한 목표로 인간의 경험을 가진 중간 또는 미디어 전반에 걸쳐 무엇이든 디자인입니다.</p>
    <footer>- 제시 제임스 개렛</footer>
  </blockquote>
</div>

인용문은 a에 있습니다<p> 클래스 "텍스트"와 함께 저자 속성은<code><footer></footer> . 이 클래스는 CSS 스타일을위한 고리를 제공합니다.

초기 CSS 스타일

래퍼부터 시작하겠습니다.

 .Quote-Wrapper {
  높이 : 300px;
  위치 : 상대;
  너비 : 300px;
}

이는 응답 성을 위해 최소 크기를 설정하고 나중에 조정을위한 상대 위치를 설정합니다.

다음으로 방사형 구배를 사용하여 원형 외관을 만듭니다.

 .텍스트 {
  배경 : 방사형 그레이드 (
    중앙의 타원,
    RGBA (0, 128, 172, 1) 0%,
    RGBA (0, 128, 172, 1) 70%,
    RGBA (0, 128, 172, 0) 70.3%
  );
  높이 : 100%;
  너비 : 100%;
  색상 : 흰색;
  위치 : 상대;
  여백 : 0;
}

참고 : 70.3% 값은 단순한 70%보다 부드러운 가장자리를 제공합니다.

텍스트 스타일 및 모양 정의

단락을 스타일로 만들어 봅시다 :

 .text p {
  글꼴 크기 : 21px;
  글꼴 스타일 : 이탈리아;
  높이 : 100%;
  라인 높이 : 1.25;
  패딩 : 0;
  텍스트 정렬 : 센터;
  Text-Shadow : 0.5px 0.5px 1px rgba (0, 0, 0, 0.3);
}

텍스트 영역을 형성하기 위해 Pseudo Element와 shape-outside 속성 ::before 를 사용합니다. 여기에는 원에 대한 다각형을 정의하는 것이 포함됩니다.

 .text :: 이전 {
  콘텐츠: "";
  플로트 : 왼쪽;
  높이 : 100%;
  너비 : 50%;
  모양 외부 : 다각형 (
    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%
  );
  모양-마진 : 7%;
}

유사한 ::before pseudo element가 적용될 수 있습니다<p> 원의 나머지 절반을 생성하는 요소.</p> <h3 id="바닥-글-스타일"> 바닥 글 스타일</h3> <p> 저자 속성을 올바르게 배치하려면 절대 포지셔닝을 사용할 것입니다.</p> <pre class="brush:php;toolbar:false"> .Quote-Wrapper Blockquote 바닥 글 { 하단 : 25px; 글꼴 크기 : 17px; 글꼴 스타일 : 이탈리아; 위치 : 절대; 텍스트 정렬 : 센터; Text-Shadow : 0.5px 0.5px 1px rgba (0, 0, 0, 0.3); 너비 : 100%; }</pre> <p> <code>font-size , shape-margin , line-height 및 기타 특성의 미세 조정은 모양 내에서 최적의 텍스트 피팅을 달성하기 위해 필요할 수 있습니다.

견적 마크 추가

.quote-wrapper 에서 pseudo element : the ::before 큰 따옴표를 추가 할 수 있습니다.

 .quote-wrapper :: 이전 {
  내용 : "\ 201c";
  색상 : #CCC;
  Font-Family : Sans-Serif, Serif;
  글꼴 크기 : 270px;
  높이 : 82px;
  선-높이 : 1;
  불투명도 : .9;
  위치 : 절대;
  상단 : -48px;
  왼쪽 : 0;
  z- 인덱스 : 1;
}

반응 형 디자인

미디어 쿼리는 다양한 화면 크기의 크기를 조정하는 데 사용될 수 있습니다.

 @Media (min-width : 850px) {
  .Quote-Wrapper {
    높이 : 370px;
    너비 : 370px;
  }
  / * ... 더 큰 화면에 대한 기타 조정 ... */
}

이 포괄적 인 접근 방식을 사용하면 HTML 및 CSS 만 사용하여 시각적으로 매력적인 원형 텍스트 디스플레이를 생성 할 수 있습니다. 특정 텍스트 및 디자인 환경 설정에 따라 미세 조정이 필요할 수 있습니다.