CSS3 embossing, highlight, gradient effect

text embossing effect

<주요 속성 요약>

#test1 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #b38f00;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; 

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

}

<속성 설명 >

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

box highlight effect

<주요 속성 요약>

#test2 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #bbb;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

   box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -moz-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -webkit-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

}

<속성 설명>

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

linear gradient effect

<주요 속성 요약>

test3 {                    

     background: -moz-linear-gradient(90deg, #1a1a1a, #808080);

     background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#1a1a1a));

}

<속성 설명 -moz-linear-gradient>

- 첫번째 : 각도. 0deg 왼쪽에서 시작, 90deg 아래에서 시작

- 두번째 : 시작 색     - 세번째 : 끝나는 색

<속성 설명 -webkit-gradient>

- 첫번째 : 타입 (radial or linear)

- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑

- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위

- 네번째 : 시작 색     - 다섯째 : 끝나는 색

CSS3와 jQuery TOOLS 를 사용한 탭디자인

jQuery 기반 UI Library인 jQuery TOOLS가 나온 소식을 몇일전에 접했습니다.

자바스크립트 코드 몇줄이면 멋진 UI가 튀어나오더군요.

너무 재밌어서 데모를 시연해보다가 탭 디자인 한개를 직접 사용해봤습니다.

<탭 디자인 그림파일>

1. jQuery와 jQuery TOOLS 링크입니다.

펼쳐두기..

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

http://cdn.jquerytools.org/1.2.0/jquery.tools.min.js

2. css3를 적용했습니다. (참고사이트 : http://www.designlog.org/2512076)

펼쳐두기..

body {

            width: 456px;

        }

        /* root element for tabs  */

        ul.tabs {  

                margin:0 !important;

                padding:0;

                height:61px;

                border-bottom:1px solid #666;  

        }

        /* single tab */

        ul.tabs li {  

                float:left;  

                padding:0;

                margin:0;  

                list-style-type:none;

        }

        /* link inside the tab. uses a background image */

        ul.tabs a {

                float:left;

                font-size:33px;

                display:block;

                padding:15px 30px;

                text-decoration:none;

                border:1px solid #666;

                border-bottom:0px;

                height:28px;

                background-color:#efefef;

                background: -moz-linear-gradient(-90deg,#003471,#448CCB);

                /*color:#777;*/

                color: #0D4383;

                text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;

                margin-right:2px;

                -moz-border-radius-topleft: 4px;

                -moz-border-radius-topright:4px;

                position:relative;

                top:1px;

        }

        ul.tabs a:hover {

                background-color:#F7F7F7;

                color:#333;

        }

        /* selected tab */

        ul.tabs a.current {

                background-color:#ddd;

                border-bottom:2px solid #ddd;

                color:#000;

                cursor:default;

        }

        /* tab pane */

        .panes div {

                display:none;

                border:1px solid #666;

                border-width:0 1px 1px 1px;

                min-height:150px;

                padding:15px 20px;

                background-color:#ddd;

        }

3. HTML

펼쳐두기..

    <ul class="tabs">

        <li><a href="#">Tab 1</a></li>

        <li><a href="#">Tab 2</a></li>

        <li><a href="#">Tab 3</a></li>

    </ul>

    <div class="panes">

        <div>pane 1 content</div>

        <div>pane 2 content</div>

        <div>pane 3 content</div>

    </div>

4. jQuery TOOLS를 사용한 자바스크립트

펼쳐두기..

  $(document).ready( function () {

            $("ul.tabs").tabs("div.panes > div", {

                    event: 'mouseover',

                    effect: 'fade',

            });

        });

이 링크를 따라가시면 jQuery TOOLS 데모를 볼 수 있습니다.