로고 이미지

고정 헤더 영역

글 제목

메뉴 레이어

로고 이미지

메뉴 리스트

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록
  • DESIGN LOG (2475)
    • Design News (855)
      • Design Trend (348)
      • Identity Design (54)
      • Brand Marketing (136)
      • Public Design (30)
      • Advertising Design (19)
      • Interior Design (5)
      • Design Column (44)
      • Design Exhibition (115)
      • CF and Media Ads (88)
      • Infographic (14)
    • Design Lecture (107)
      • Adobe Photoshop (80)
      • Adobe Illustrator (17)
      • Adobe Lightroom (5)
      • 3D Graphics (5)
    • Design Information (295)
      • Design Resources (146)
      • Design Fonts (57)
      • HTML5 and CSS3 (17)
      • Design Term (55)
      • Designer Portfolio (14)
      • Designer Interview (6)
    • Marketing News (70)
      • Marketing Trend (44)
      • SEO (26)
    • Digital News (993)
      • IT Trend (309)
      • Review and Column (250)
      • Gadget and Apps (122)
      • Smartwork and OA (60)
      • Blogging Guide (30)
      • Blog Story (214)
      • Google Street View (8)
    • Life Essay (155)
      • Life Story (64)
      • Commentary on Issue (91)

검색 레이어

로고 이미지

검색 영역

컨텐츠 검색

shape-outside

  • CSS Shape 와 Clip을 이용한 흥미로운 레이아웃 구현하는 방법

    2018.09.01 by 김현욱 a.k.a. 마루

CSS Shape 와 Clip을 이용한 흥미로운 레이아웃 구현하는 방법

최근 흥미롭고 특이한 텍스트 및 레이아웃 효과를 만들기 위해 'shape-outside' CSS 속성을 사용하는 데모가 부각되고 있다. 참고할 만한 사례로는 Mandy Michael 구현한 예제( https://codepen.io/mandymichael/pen/xzyrGa )를 통해서 살펴 볼 수 있다. CSS Shapes 모듈의 일부인 'shape-outside' 속성을 사용하면 객체의 모양을 중심으로 텍스트를 줄 바꿈 할 수 있다. 아래 CdoePen 링크를 통해 필요한 간단한 코드 구현을 이해하고 다양한 속성 변경을 통해 흥미로운 텍스트 레이아웃을 웹페이지에 구현해 볼 수 있다.참고 링크: http://bit.ly/2N8RejR

Design Information/HTML5 and CSS3 2018. 9. 1. 19:18

추가 정보

인기글

최신글

페이징

이전
1
다음
About US RSS
푸터 로고 © designlog.org
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바