[7주][3일][1~2th] HTML/CSS: 그라데이션 효과, 기타 실습.

☆ -webkit, -ms 그라데이션 효과 주는 홈페이지

http://gradients.glrzad.com/

위의 홈페이지에서 색깔을 지정하면, 자동으로 css 코드가 나온다. 정말 편리하다.

☆ 실습(1) : 상자 안에 그림과 글자가 같이 있을 경우 정렬하기

style1이 <dd>태그인데, 안에 그림을 넣고 글자를 넣으면 겹치게 된다. 

CSS

section .style1{

background: url(images3/event_goods.png) no-repeat top right;

height: 115px;

padding-right:75px; 

padding-top:20px;

top:-7px;

  position:relative; 

}

HTML

<section>

<p>스마트폰과도 다르고 태블릿 PC도 아닌 신개념 스마트 기기 갤럭시 노트!

새로운 기기에 알맞은 새로운 활용법을 소개합니다! </p>

<dl>

<dt>이벤트1</dt>

<dd class="style1">행사 도서를 구매하신 모든 분들께 갤럭시 노트 전용 

다이나믹 액정보호필름을 드립니다.(선착순, 한정수량)</dd>

<dt>이벤트2</dt>

<dd class="style2">갤럭시 노트 완전 정복을 구매하시는 분들께 1,000원 할인 쿠폰을 드립니다.</dd>

</dl>

</section>

이벤트1에 해당되는 내용에 그림이 들어가고

다음과 같이 정렬이 되는 것을 볼 수 있다.

☆ 실습(2) : 메뉴 만들기

 

li a{
    font-size:20px;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    padding:20px;
    background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    display:block;
     
     text-decoration: none;
     float:left;
   }
   li a:hover{
    font-size:20px;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    padding:20px;
    background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    display:block;
     
     text-decoration: none;
     background-image: -webkit-linear-gradient(bottom, rgb(194,193,192) 21%, rgb(237,237,237) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(194,193,192) 21%, rgb(237,237,237) 57%);
   }

li의 a 부분에 display:block 을 주고

 

padding을 주면 늘어난다.

 

 

 

 

완성소스 - css

<header>
   <h1>C/S/S/   s/h/o/e/s -  s/h/o/p</h1>
  </header>
  <div>
  <nav>
    <ul id="topNav">
     <li><a href="">best 50</a></li>
     <li><a href="">high heel</a></li> 
     <li><a href="">casual</a></li>
     <li><a href="">flat</a></li>
     <li><a href="">boots</a></li>
     <li><a href="">sandal</a></li>
     <li><a href="">bag</a></li>
     <li><a href="">acc</a></li>
     <li><a href="">sale</a></li>
    </ul>
  </nav>
  </div>

 

완성 소스 - html

*{
   margin:0px;
   padding:0px;
  }
  li{
   list-style-type: none;
   float:left;
  }
  a{
   list-style-type: none;
   text-align:center;
  }
   body {
    font:0.95em Arial,sans-serif;
    margin:50px 0px;
    }
   h1 {
    text-shadow:0px 0px 5px #666;
    text-align:center;
    font-size:3em;
    letter-spacing:5px;
    color:#d81b21;
    text-transform:uppercase;
    }
   /* Gradient Menu Bar */
   li a{
    font-size:20px;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    padding:20px;
    background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    display:block;
     
     text-decoration: none;
     float:left;
   }
   li a:hover{
    font-size:20px;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    padding:20px;
    background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);
    display:block;
     
     text-decoration: none;
     background-image: -webkit-linear-gradient(bottom, rgb(194,193,192) 21%, rgb(237,237,237) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(194,193,192) 21%, rgb(237,237,237) 57%);
   }
   li a:after{
    content: "  /";
    word-spacing: pre;
   }
   div{
    margin:0 auto;
   }
   #topNav{
    width:1000px;
    height:45px;
    margin: 0 auto;
   }

 

 

완성본

 

☆ 실습(3) : 버튼에 hover효과 넣기

CSS

body, button {

font-family: "맑은 고딕", 돋움, sans-serif;

}

#memberBox{

width:300px;

height:155px;

border:1px solid #c6c6c6;

text-align:center;

margin:auto;

padding-top:15px;

background-image: -webkit-linear-gradient(bottom, rgb(222,222,222) 13%, rgb(189,189,189) 57%);

background-image: -ms-linear-gradient(bottom, rgb(222,222,222) 13%, rgb(189,189,189) 57%);

}

.btnOrange:hover{

background-image: -webkit-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);

background-image: -ms-linear-gradient(bottom, rgb(255,153,0) 21%, rgb(207,153,4) 57%);

}

.btnOrange{

background-image: -webkit-linear-gradient(bottom, rgb(217,164,80) 21%, rgb(255,187,0) 57%);

background-image: -ms-linear-gradient(bottom, rgb(217,164,80) 21%, rgb(255,187,0) 57%);

margin-top:30px;

padding:10px 25px;

color: #fff;

  border-radius: 10px;

/*   border: #da7c0c; */

text-shadow: 1px 1px 3px #000;

}

HTML

<div id="memberBox">

<p>아직 infoPub 회원이 아니세요? </p>

<button class="btnOrange">회원 가입 하기</button>

 </div>

결과

버튼 효과를 없애려면 css에 border 옵션을 주면 된다.