웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] CSS3를 이용하여 점선 라인 만들기 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] CSS3를 이용하여 점선 라인 만들기

해피CGI윤실장 2017. 3. 24. 09:26

이미지료 표현해야했던 좀 더 디자인스러움이 가미된 점선라인을 CSS3에서 dashed 스타일을 보강하여 사용할 수 있습니다.


데모사이트로 이동하면, 해당 효과에 관한 HTML소스와 CSS3소스를 확인할 수 있습니다.


[html]

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="container">
      <div class="dashed-borders">
        <p>Horrible Dashes</p>
      </div>
    </div>
  </body>
</html>



[css]

.dashed-borders {
  background: #1d4a91;
}
.dashed-borders:before {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  margin-top: 40px;
  
  background-color: #2356a1;
  
  border-top: 2px dashed #091f5c;
  
  border-bottom: 2px solid #091f5c;
  box-shadow: 0 7px 0 0 #183f84;
}
.dashed-borders:after {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  margin-bottom: 40px;
  
  background-color: #2356a1;
  
  border-bottom: 2px dashed #091f5c;
  
  border-top: 2px solid #091f5c;
  box-shadow: 0 -7px 0 0 #183f84;
}
 
 
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: <span class="crayon-cn" style="box-sizing: border-box; font-fam

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] 웹프로그래밍 디자인 참고할만한 사이트! basicuse  (0) 2017.03.28
[해피CGI][cgimall] 홈페이지 기본틀 html5소스 창고! freehtml5templates  (0) 2017.03.27
[해피CGI][cgimall] css 레이아웃 강좌  (0) 2017.03.23
[해피CGI][cgimall] Multiple Background Images  (0) 2017.03.22
[해피CGI][cgimall] 팝업효과에서 탭메뉴까지 다양한 CSS 애니메이션효과  (0) 2017.03.21
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments