디자인에 사용할 CSS 여러가지

쉐도우텍스트

흰색 + 밝은 색의 그림자. CSS로 text-shadow를 이용하여 표현할 수 있습니다. 포인트는 문자를 흰색으로 설정하고 그림자의 가로 · 세로 모두 제로를 지정하여 텍스트의 위치에 맞출 것. 

<h1>안녕하세요、<br>반갑습니다.</h1>

h1 {

  text-align: center;

  color: #fff;

  text-shadow: 0 0 15px #FF6694;

  font-size: 58px;

  font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;

}

마커 라인

굵은 선을 텍스트에 조금 씌워 보려면 linear-gradient을 사용합니다. 값을 선택하면 선의 굵기를 조정할 수 있습니다.

<p>

  디자인의 종류는 대체로 다음과 같이 3종류로 크게 나눌 수 있다.<strong>첫째,</strong>인간생활에 필요한 정보와 지식을 넓히고 보다 신속 ·정확하게 전달하기 위한, 시각을 중심으로 하는 시각디자인(visual design),<strong>둘째</strong>인간생활의 발전에 필요한 제품 및 도구를 보다 다량으로, 보다 완전하게 생산하기 위한 제품디자인(product design), <br>

  인간생활에 필요한 환경 및 공간을 보다 적합하게 하기 위한 환경디자인(environment design) 등이다.

</p>

strong {

  background: linear-gradient(transparent 30%, #fbd 30%);

}

채우기 색상뿐만 아니라 배경 이미지를 설정하려면 이미지의 위치를 ​​지정하면 OK. 무늬를 고안하여 마스킹 테이프 트위스트 수 있군요!

<h1>If our love's insanity, why are you my clarity?</h1>

@import url(http://fonts.googleapis.com/css?family=Amatic+SC);

h1 {

  font-family: 'Amatic SC', cursive;

  font-size: 40px;

  background: url(http://webcreatorbox.com/sample/images/check.png) repeat-x 0 25px;

  display: inline-block;

  padding: 0 10px

}

스티치

상자 주위를 실로 수 놓은듯한 장식입니다. 상자 주위에 점선 더욱 그 외측에 흐림이 걸리지 않은 상자 그림자를 추가하여 이러한 표현이 가능! background와 box-shadow색상을 맞추는 것을 잊지 않고!

<p class="stitch">

 의장(意匠) ·도안을 말하며, 디자인이라는 용어는 지시하다·표현하다·성취하다의 뜻을 가지고 있는 라틴어의 데시그나레(designare)에서 유래한다. 

</p>

.stitch {

   color: #fff;

   padding: 20px;

   font-size: 22px;

   background: #FEA993;

   border: 2px dashed #F7F9CC;

   border-radius: 10px;

   box-shadow: 0 0 0 7px #FEA993;

}

body {

  padding: 5px 20px;

  font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;

}

리본

존재감이 있기 때문에 색상과 글꼴을 약간 사용자 정의하면 디자인의 주요 될 수도있다 귀여운 리본. 이것은 요소에 :before, :after을 사용하여 빈 의사 요소를 추가하여 리본의 끝 부분을 표현하고 있습니다. 폭과 각도를 변경할 때 동시에 여러 개소의 수치도 변경해야한다고 생각하기 때문에 사용자가 조금 힘든 것이 단점.

<h1 class="ribbon">

   <span class="ribbon-content">I will be all that you want</span>

</h1>

@import url(http://fonts.googleapis.com/css?family=Nixie+One);

.ribbon {

  font-family: 'Nixie One', cursive;

  font-size: 20px;

 width: 50%;

    

 position: relative;

 background: #93DFB8;

 color: #fff;

 text-align: center;

 padding: 1em 2em; /* Adjust to suit */

 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */

}

.ribbon:before, .ribbon:after {

 content: "";

 position: absolute;

 display: block;

 bottom: -1em;

 border: 1.5em solid #7AC69F;

 z-index: -1;

}

.ribbon:before {

 left: -2em;

 border-right-width: 1.5em;

 border-left-color: transparent;

}

.ribbon:after {

 right: -2em;

 border-left-width: 1.5em;

 border-right-color: transparent;

}

.ribbon-content:before, .ribbon-content:after {

 content: "";

 position: absolute;

 display: block;

 border-style: solid;

 border-color: #60AC85 transparent transparent transparent;

 bottom: -1em;

}

.ribbon-content:before {

 left: 0;

 border-width: 1em 0 0 1em;

}

.ribbon-content:after {

 right: 0;

 border-width: 1em 1em 0 0;

}

이미지를 하트 모양으로 자르기

<img class="mask" src="http://webcreatorbox.com/sample/images/rose.jpg" alt="Rose">

<svg class="shape" version="1.1" x="0px" y="0px" viewBox="0 0 340.2 306.6">

<clipPath id="svgPath">

    <path d="M170.3,89.5c10.3-33,35.8-48.9,64.4-48.9c34.2,0,60.4,28.6,60.4,63.2c0,41.7-22.7,71.6-46,99.9c-22.4,27.1-79,62.2-79,62.2

        s-51.9-30.7-74.3-57.8c-23.3-28.3-50.7-62.5-50.7-104.3c0-35.2,27.1-63.2,60.7-63.2c28.3,0,53.6,15.9,63.8,48.9h0.3H170.3z"/>

</clipPath>

</svg>

.mask {

  -webkit-clip-path: url(#svgPath);

  clip-path: url(#svgPath);

}

.shape {

  height:0;

}

하트의 고동

CSS3의 animation를 사용하여 심장의 두근 거림을 표현! Safari와 Chrome 용으로 -webkit-추가하는 것을 잊지 마세요. 사용 도코로은 어려울까 생각 합니다만 w 사이트의 악센트 바랍니다. 

<div class="heart">&#9829;</div>

<h1>My heart beats for you!</h1>

@import url(http://fonts.googleapis.com/css?family=Chewy);

.heart {

    font-size: 80px;

    color: #FF3D67;

    -webkit-animation: heart-beats .3s infinite alternate;

  animation: heart-beats .3s infinite alternate;

    transform-origin: center;

}

/* Animation Setting */

@-webkit-keyframes heart-beats {

    to { -webkit-transform: scale(1.1); }

}

@keyframes heart-beats {

    to { transform: scale(1.1); }

}

/* Basic style */

body {

  text-align: center;

}

h1 {

  font-family: 'Chewy', cursive;

  margin-top: 0;

  color: #FF9EB6;

}

위의 두근 두근 하트에 이어 사용 도코로 잘 모르는 효과. 하트에 커서를 대면 시키면 터져 버립니다. 이쪽도 animation사용합니다. :hover셀렉터에 추가합니다. 

<div class="heart">&#9829;</div>

<p>Hover on a heart</p>

.heart {

    font-size: 80px;

    color: #FF3D67;

  margin: 100px 0 0

}

.heart:hover {

  -webkit-animation: heart-anim 1s linear .3s;

  animation: heart-anim 1s linear .3s;

}

/* Animation setting */

@-webkit-keyframes heart-anim {

  to {

    opacity: 0;

    -webkit-transform: scale(50);

  }

}

@keyframes heart-anim {

  to {

    opacity: 0;

    transform: scale(50);

  }

}

/* Basic style */

body {

  text-align: center;

}