CSS 샘플 | TypeSquare

그림자를 이용한 입체 표현

오늘의
추천

소스보기

HTML
<div class="todays_pickup">
    오늘의<br />추천
</div>CSS
.todays_pickup {
    font-family: "Sandoll JinGamdong 04 RNe", sans-serif;
    font-size: 120px;
    margin: 0 auto;
    padding-bottom: 10px;
    overflow: hidden;
    color: #FF0042;
    line-height: 1.1;
    width: 680px;
    text-shadow:0px 0px 0 rgb(223,223,223),1px 1px 0 rgb(220,220,220),2px 2px 0 rgb(216,216,216),3px 3px 0 rgb(213,213,213),4px 4px 0 rgb(209,209,209),5px 5px 0 rgb(206,206,206),6px 6px 0 rgb(202,202,202),7px 7px 0 rgb(198,198,198),8px 8px 0 rgb(195,195,195),9px 9px 0 rgb(191,191,191),10px 10px 0 rgb(188,188,188),11px 11px 0 rgb(184,184,184), 12px 12px 0 rgb(180,180,180),13px 13px 12px rgba(0,0,0,0.25),13px 13px 1px rgba(0,0,0,0.5),0px 0px 12px rgba(0,0,0,.2);
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

그림자를 이용한 입체 표현

보석상자

소스보기

HTML
<div class="play">
    <span class="yellow">보</span>
    <span class="blue">석</span>
    <span class="pink">상</span>
    <span class="green">자</span>
</div>CSS
.play {
    background: transparent;
    color: #ffba16;
    font-family: "Sandoll Doksuri 03 Bold", sans-serif;
    font-size: 180px;
    letter-spacing: -0.1em;
    padding: 10px 0;
    -moz-transform: skew(-25deg) rotate(5deg);
    -ms-transform: skew(-25deg) rotate(5deg);
    -webkit-transform: skew(-25deg) rotate(5deg);
    transform: skew(-25deg) rotate(5deg);
    text-shadow:
    0 1px #ff9b0d,
    1px 0 #f79100,
    1px 2px #ff9b0d,
    2px 1px #f79100,
    2px 3px #ff9b0d,
    3px 2px #f79100,
    3px 4px #ff9b0d,
    4px 3px #f79100,
    4px 5px #ff9b0d,
    5px 6px #f79100,
    6px 7px 5px #ff9b0d;
    -webkit-text-stroke: 0.5px #ffcf5d;
}

.play .pink {
    letter-spacing: -1px;
    color: #ff539f;
    text-shadow:
    0 1px #f7046f,
    1px 0 #e50568,
    1px 2px #f7046f,
    2px 1px #e50568,
    2px 3px #f7046f,
    3px 2px #e50568,
    3px 4px #f7046f,
    4px 3px #e50568,
    4px 5px #f7046f,
    5px 6px #e50568,
    6px 7px 5px #f7046f;
    -webkit-text-stroke: 0.5px #ff9cc8;
}

.play .blue {
    color: #19a0ee;
    text-shadow:
    0 1px #0096ec,
    1px 0 #0087d4,
    1px 2px #0096ec,
    2px 1px #0087d4,
    2px 3px #0096ec,
    3px 2px #0087d4,
    3px 4px #0096ec,
    4px 3px #0087d4,
    4px 5px #0096ec,
    5px 6px #0087d4,
    6px 7px 5px #0096ec;
    -webkit-text-stroke: 0.5px #68c8ff;
}

.play .green {
    color: #07ed1c;
    text-shadow:
    0 1px #02d315,
    1px 0 #00bb12,
    1px 2px #02d315,
    2px 1px #00bb12,
    2px 3px #02d315,
    3px 2px #00bb12,
    3px 4px #02d315,
    4px 3px #00bb12,
    4px 5px #02d315,
    5px 6px #00bb12,
    6px 7px 5px #02d315;
    -webkit-text-stroke: 0.5px #5efd6d;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

그림자를 사용한 이중 테두리

여름바겐세일최대 50%

소스보기

HTML
<div class="summer_bargain">
    <div class="summer_bargain_inner">
        <span class="blue">여</span>
        <span class="green">름</span>
        <span class="big">바</span>
        <span class="green">겐</span>
        <span class="blue">세</span>
        <span class="green">일</span>
        <strong>최대 50%</strong>
    </div>
</div>
CSS
.summer_bargain {
    margin: 0 auto;
    width: 310px;
}

.summer_bargain_inner {
    border-radius: 3px;
    color: #37bcf2;
    font-family:"Sandoll Daltokki 03 Bold", sans-serif;
    font-size: 48px;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 3px 0;
    text-shadow: 2px 2px 0 #fff, 3px 3.5px 0 #dfe8f1;
    text-align: center;
}

.summer_bargain_inner .green{
    color: #06d9a5;
}

.summer_bargain_inner .last{
    letter-spacing: 10px;
}

.summer_bargain_inner strong {
    display: block;
    color: #e97792;
    font-size: 24px;
    font-family: "Sandoll Daltokki 03 Bold", sans-serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #fff, 2.2px 2.2px 0 #f1e3df;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

깨끗한 반사 그림자 연출

청정보습미백화장수

소스보기

HTML
<div class="reflect_body">
    <div class="reflect_title" title="청정보습미백화장수">
    청정보습미백화장수
    </div>
</div>CSS
.reflect_body {
    height: 80px;
    position: relative;
}

.reflect_title {
    color: #c5f7fe;
    font-family: "Sandoll Mascara 03 Bold", serif;
    font-size: 46px;
    left: 0;
    letter-spacing: 0em;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    -webkit-box-reflect: below -4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.4, transparent), to(rgba(0,0,0,0.5)));
}

.reflect_title:before {
    color:#72d0df;
    content: attr(title);
    display: block;
    position: absolute;
    left: 0;
    text-align: center;
    top: 0;
    width: 100%;
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

Firefox에서는 사용할 수 없습니다.

※소스 코드 샘플보다 외형의 크기가 작아집니다.

원형 태그 디자인

집에서 만들 수 있는 핸드메이드
잡화특집

소스보기

HTML
<div class="patch">
    <div class="patch_inner">
        <span class="catch">집에서 만들 수 있는</span>
        핸드메이드 <br>잡화 특집
    </div>
</div>CSS
.patch {
    background: #2b292a url(bg1.png?fug);
    border-radius:125px;
    color: #fff;
    font-family: "Sandoll Pajamas 02 Unbalance", sans-serif;
    font-size: 52px;
    height: 220px;
    letter-spacing: 0px;
    margin: -10px auto 0 auto;
    padding-top: 1px;
    text-indent: 6px;
    text-shadow: 1px 1px 1px #2b292a;
    width: 220px;
}

.patch_inner {
    border: 1px dashed #fff;
    border-radius: 200px;
    display: block;
    height: 210px;
    margin: 3px 4px;
    width: 210px;
}

.patch_inner .catch{
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    color:#903;
    display: block;
    font-family: "Sandoll SinmunJebi 03 Bold", serif;
    font-size: 12px;
    margin: 50px auto 15px auto;
    padding: 2px 0;
    text-indent: 0;
    text-shadow: none;
    width: 130px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

그림자를 사용하여 발광하는 듯한 표현

★ 밤하늘에 반짝반짝 별이 보이는 ★ 절경의 숙소 특집

소스보기

HTML
<div class="glow_banner">
    <span class="catch">★ 밤하늘에 반짝반짝 별이 보이는 ★</span>
    절경의 숙소 특집
</div>CSS
.glow_banner {
background: #1e3971;
background: -moz-linear-gradient(top, #091938, #1e3971);
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#091938),
    to(#1e3971));
    border-radius: 3px;
    color: #fff;
    font-size: 48px;
    font-family:"Sandoll Objet 01 Regular", serif;
    height: 95px;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    text-shadow: 0 0 15px #ffdd65, 0 0 8px #ffdd65,0 0 3px #fff;
    width: 250px;
}

.glow_banner .catch {
    display: block;
    font-size: 14px;
    margin-top: 10px;
    padding: 0 0 10px 0;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

사선 스트라이프 무늬 위에 기울여서 배치

Happy Birthday!
생일 축하해요  생일 축하해요
Happy Birthday!  Happy Birthday!

소스보기

HTML
<div class="skew_banner">
    <div class="skew_banner_inner">
        <div class="line line1">Happy Birthday!</div>
        <div class="line line2">생일 축하해요  생일 축하해요</div>
        <div class="line line3">Happy Birthday!  Happy Birthday!</div>
    </div>
</div>CSS
.skew_banner {
    background: #FC61F4;
    border-radius: 3px;
    font-family: "Sandoll Canvas 01 sketch", sans-serif;
    height: 180px;
    margin: 0 auto;
    overflow: hidden;
    width: 270px;
}

.skew_banner_inner {
    color: #fff;
    font-size: 28px;
    -moz-transform: rotate(-45deg) translate(-12px, -45px);
    -ms-transform: rotate(-45deg) translate(-12px, -45px);
    -webkit-transform: rotate(-45deg) translate(-12px, -45px);
    transform: rotate(-45deg) translate(-12px, -45px);
    width: 340px;
}

.skew_banner_inner .line{
    border-top: 7px solid #f45775;
    border-bottom: 3px solid green;
    height: 50px;
    line-height: 50px;
}

.skew_banner_inner .line1{
    background: #9034D8;
    border-top: 10px solid #06AFEC;
    border-bottom: 4px solid #fff;
    height: 35px;
    line-height: 35px;
    margin-left: -70px;
}

.skew_banner_inner .line2{
    background: #FC61F4;
    border-top: 20px solid #BDE432;
    border-bottom: 8px solid #fff;
    margin-left: -3s5px;
}

.skew_banner_inner .line3{
    background: #06AFEC;
    border-bottom: 30px solid #B6E021;
    border-top: 12px solid #8933CD;
    margin-left: 55px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

숫자 강조 배너

제주도산

한라봉

3900 원

소스보기

HTML
<ul class="price_lists">
    <li class="price_list">
        <div class="area">제주도산</div>
        <div class="product">한라봉</div>
        <div class="price"><span class="num">3900</span> <span class="unit">원</span></div>
    </li>
</ul>CSS
.price_lists {
    list-style: none;
    margin: 0;
    padding: 0;
}

.price_list {
    border: 1px solid #eee;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: 80px;
    margin: 0 auto 7px auto;
    position: relative;
    text-align: right;
    width: 310px;
}

.price_list .area {
    display: inline-block;
    font-family :"Sandoll Pumhaeng 03 Bold", sans-serif;
    font-size: 16px;
    left: 7px;
    padding: 10px 8px;
    position: absolute;
    top: 4px;
    color: #999;
}

.price_list .product {
    font-family :"Sandoll Boom 03 Bold", sans-serif;
    font-size: 40px;
    color: #F90;
    left: 7px;
    padding: 12px 8px;
    position: absolute;
    top: 20px;
}

.price_list .price {
    color: red;
    font-size: 56px;
    font-style: normal;
    letter-spacing: -5px;
    text-shadow: 3px 3px 1px yellow, -3px 3px 1px yellow, 3px -3px 1px yellow, -3px -3px 1px yellow;
    font-family: "Sandoll Puzzle 02 Black", sans-serif;
    margin-top: 15px;
}

.price_list .price .unit {
    font-size: 24px;
    margin-left: -6px;
    margin-right: 20px;
    margin-top: 50px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

CSS를 사용한 막대그래프

소스보기

HTML
<div class="line_graph">
    <div class="line1 line">
        <div class="line_body">
            <div class="line_inner">
                <div class="line_count">6</div>
            </div>
            <div class="line_label"> 귤 </div>
        </div>
    </div>
    <div class="line2 line">
        <div class="line_body">
            <div class="line_inner">
                <div class="line_count">3</div>
            </div>
            <div class="line_label"> 사과 </div>
        </div>
    </div>
    <div class="line3 line">
        <div class="line_body">
            <div class="line_inner">
                <div class="line_count">5</div>
            </div>
            <div class="line_label"> 바나나 </div>
        </div>
    </div>
    <div class="line4 line">
        <div class="line_body">
            <div class="line_inner">
                <div class="line_count">7</div>
            </div>
            <div class="line_label"> 키위 </div>
        </div>
    </div>
    <div class="line5 line">
        <div class="line_body">
            <div class="line_inner">
                <div class="line_count">10</div>
            </div>
            <div class="line_label"> 딸기 </div>
        </div>
    </div>
</div>CSS
.line_graph {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    height:160px;
    margin: 0 auto -20px auto;
    padding-left: 10px;
    width: 270px;
}

.line_graph .line {
    float: left;
    margin: 0 2%;
    width: 16%;
}

.line_graph .line .line_body{
    height: 160px;
    margin: 0 5px;
    position: relative;
}

.line_graph .line .line_inner{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.line_graph .line .line_inner .line_count{
    color: #fff;
    font-family: "Sandoll Boom 03 Bold", sans-serif;
    font-size: 20px;
    margin-top: 5px;
}

.line_graph .line .line_label{
    background: #fff;
    bottom: -20px;
    font-family: "Sandoll Bukkeureom 03 Bold", sans-serif;
    font-size: 12px;
    left: 0;
    padding-top: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.line_graph .line1 .line_inner{
    background: #ff8a00;
    height: 60%;
}

.line_graph .line2 .line_inner{
    background: #fb6464;
    height: 30%;
}

.line_graph .line3 .line_inner{
    background: #ffe400;
    height: 50%;
}

.line_graph .line4 .line_inner{
    background: #91ce00;
    height: 70%;
}

.line_graph .line5 .line_inner{
    background: #ff4c7a;
    height: 100%;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

나무에 새긴 것 같은 양각 표현

숲속의 작은 도서관

아름다운 숲에서 책과 함께

소스보기

HTML
<div class="wood_emboss">
    <span class="first">숲속의</span>
    <span class="last">작은 도서관</span>
    <div class="date">아름다운 숲에서 책과 함께</div>
</div>CSS
.wood_emboss {
    background:url(wood.jpg) 0 0 no-repeat;
    border: 10px solid #000;
    border-bottom: 5px solid #aa9170;
    border-right: 5px solid #aa9170;
    border-top: 5px solid #ebc993;
    border-left: 5px solid #ebc993;
    box-shadow: 0 2px 5px #ccc;
    color: #D28359;
    font-family:"Sandoll Picaso 03 Bold", sans-serif;
    font-size: 48px;
    letter-spacing: -3px;
    height: 150px;
    line-heihgt: 1;
    margin: 20px auto 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 0.5px #fff, -1px -1px 0.5px #472809;
    width: 260px;
}

.wood_emboss span{
    display: inline-block;
    position: absolute;
}

.wood_emboss .first{
    top: 18px;
    left: 18px;
}

.wood_emboss .last{
    top: 60px;
    left: 36px;
}

.wood_emboss .date {
    bottom: 6px;
    font-size: 14px;
    letter-spacing: -1px;
    left: 10px;
    position: absolute;
    text-shadow: .5px .5px 0 #fff, -.5px -.5px 0 #472809;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

CSS를 사용한 시계

16시45분

소스보기

HTML
<div class="clock">
    <div class="frame">
        <div class="hour"></div>
        <div class="minute"></div>
    </div>
    <div class="time">
        16<span class="unit">시</span>45<span class="unit">분</span>
    </div>
</div>CSS
.clock {
    color: #7c785a;
    font-family: "Sandoll Myeongjo 02 Medium", serif;
    font-size: 46px;
}

.clock .frame {
    border: 3px solid #7c785a;
    border-radius: 50px;
    display: block;
    height: 94px;
    margin: 0 auto 5px auto;
    position: relative;
    width: 94px;
}

.clock .frame:after {
    background: #7c785a;
    border-radius: 5px;
    content: "";
    display: block;
    height: 10px;
    left: 42px;
    position: absolute;
    top: 42px;
    width: 10px;
}

.clock .frame div {
    border-radius: 3px;
    display: block;
    height: 72px;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 3px;
}

.clock .hour {
    background: -moz-linear-gradient(top, #fff,
    #fff 10%,
    #7c785a 10%,
    #7c785a 52%,
    #fff 52%,
    #fff);
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(0.1, #fff),
    color-stop(0.1, #7c785a),
    color-stop(0.52, #7c785a),
    color-stop(0.52, #fff),
    to(#fff));
    left: 45px;
    top: 11px;
    -moz-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.clock .minute {
    background: -moz-linear-gradient(top, #7c785a,
    #7c785a 52%,
    #fff 52%,
    #fff);
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#7c785a),
    color-stop(0.52, #7c785a),
    color-stop(0.52, #fff),
    to(#fff));
    left: 45px;
    top: 11px;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.clock .time .unit {
    font-size: 28px;
    margin: 0 5px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

마우스 오버 시 텍스트 커지는 버튼

참여하기

소스보기

HTML
<a class="button">
    <span class="button_inner">참여하기</span>
</a>CSS
.button {
    background: #5b9507;
    background: -moz-linear-gradient(top, #a3ea3f, #5b9507);
    background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#a3ea3f),
    to(#5b9507));
    border: 1px solid #487606;
    border-radius: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
    color: #fff;
    display: inline-block;
    font-family: "Sandoll Daltokki 03 Bold", sans-serif;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #487606;
    width: 100px;
}

.button_inner {
    display: block;
    height: 56px;
    line-height: 33px;
    opacity: 0.9;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.button.hover .button_inner,
.button:hover .button_inner {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

마우스 오버 시 천천히 나타나는 캡션 표시

식물도감

바위취

우리나라 중부 이남의 습한 곳에서 자라는 상록 다년생 초이다. 잎은 녹색에 연한 무늬가 있고, 뒷면은 자줏빛이 도는 붉은색이다. 꽃은 백색으로 짧은 홍자색의 선모가 있으며 줄기 꼭대기에서 핀다. 관상용으로 쓰이며, 전초는 약용으로 쓰인다.

소스보기

HTML
<div class="photo_container fade">
    <div class="label">식물도감</div>
    <div class="photo">
        <img src="photo1.jpg" />
    </div>
    <div class="description">
        <div class="photo_title">바위취</div>
        <p>우리나라 중부 이남의 습한 곳에서 자라는 상록 다년생 초이다. 잎은 녹색에 연한 무늬가 있고, 뒷면은 자줏빛이 도는 붉은색이다. 꽃은 백색으로 짧은 홍자색의 선모가 있으며 줄기 꼭대기에서 핀다. 관상용으로 쓰이며, 전초는 약용으로 쓰인다.</p>
    </div>
</div>CSS
.photo_container.fade{
    background: #334006;
    border: 10px solid #000;
    border-radius: 6px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 500px;
}

.photo_container.fade *{
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photo_container.fade img {
    height: 520px;
    margin: -10px 0 0 -10px;
    width: 520px;
}

.photo_container.fade.hover .photo img,
.photo_container.fade:hover .photo img {
    height: 500px;
    margin: 0 ;
    opacity: 0.5;
    width: 500px;
}

.photo_container.fade .label {
    color: #fff;
    font-family: "Sandoll GothicNeo3 03 Rg", sans-serif;
    font-size: 24px;
    left: 20px;
    letter-spacing: 0px;
    opacity: 1;
    position: absolute;
    top: 14px;
    z-index: 999;
}

.photo_container.fade .description {
    color: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    text-align: left;
    top: 100px;
    transform: scale(0.95);
    width: 500px;
}

.photo_container.fade.hover .description,
.photo_container.fade:hover .description {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.photo_container.fade .description .photo_title {
    border-bottom : 4px solid #fff;
    font-family: "Sandoll Tokyo 04 Bold", sans-serif;
    font-size: 70px;
    margin: 0 20px 10px 20px;
    padding-bottom: 10px;
}

.photo_container.fade .description p {
    font-family: "Sandoll Tokyo 03 Medium", sans-serif;
    font-size: 40px;
    margin: 0;
    padding: 20px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

마우스 오버 시 슬라이드 캡션 표시

식물도감

삼지구엽초

꽃은 5월에 피고 줄기 끝에 총상꽃차례를 이루며 밑을 향해 달린다. 꽃은 지름이 10∼12mm이고 노란 색을 띤 흰색이다. 꽃잎은 4개이고 긴 꿀주머니가 있다. 한방에서는 식물체 전체를 음양각이라는 약재로 쓰는데, 최음·강장·강정·거풍 효과가 있다. 한국·중국 동북부 등지에 분포한다.

소스보기

HTML
<div class="photo_container slide">
    <div class="label">식물도감</div>
    <img src="photo3.jpg" class="front" />
    <div class="description">
        <div class="photo_title">삼지구엽초</div>
        <p>꽃은 5월에 피고 줄기 끝에 총상꽃차례를 이루며 밑을 향해 달린다. 꽃은 지름이 10∼12mm이고 노란 색을 띤 흰색이다. 꽃잎은 4개이고 긴 꿀주머니가 있다. 한방에서는 식물체 전체를 음양각이라는 약재로 쓰는데, 최음·강장·강정·거풍 효과가 있다. 한국·중국 동북부 등지에 분포한다.</p>
    </div>
</div>
CSS
.photo_container.slide .label {
    color: #fff;
    font-family: "Sandoll GothicNeo3 03 Rg", sans-serif;
    position: absolute;
    top: 14px;
    left: 20px;
    font-size: 24px;
    letter-spacing: 0px;
    opacity: 1;
    z-index: 999;
}

.photo_container.slide img {
    height: 540px;
    margin: -20px 0 0 -20px;
    width: 540px;
}

.photo_container.slide .description {
    color: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align:left;
    top: 80px;
    -moz-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 500px;
}

.photo_container.slide .front {
    opacity: 1;
    -moz-transform: translate(10px, 0);
    -ms-transform: translate(10px, 0);
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photo_container.slide.hover .front,
.photo_container.slide:hover .front {
    opacity: 0.2;
    -moz-transform: translate(-20px, 0);
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
}

.photo_container.slide.hover .description,
.photo_container.slide:hover .description {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.photo_container.slide .description .photo_title {
    border-bottom : 4px solid #fff;
    font-family: "Sandoll Banhaetseo 03 Bold", serif;
    font-size: 48px;
    margin: 0 20px 10px 20px;
    padding-bottom: 10px;
}

.photo_container.slide .description p {
    font-family: "Sandoll Banhaetseo 02 Medium", serif;
    font-size: 26px;
    line-height: 1.35;
    margin: 0;
    padding: 20px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.

마우스 오버 시 회전하며 나타나는 캡션 표시

식물도감

은방울꽃

전국 각처의 산에 분포하는 다년생 초본이다. 생육환경은 토양이 비옥하고 물 빠짐이 좋은 반그늘에서 자란다. 꽃은 백색으로 관상용으로 쓰이며 유독성이 있다. 꽃말은 '순결, 다시 찾은 행복'이다. 한국·중국·동시베리아·일본에 분포한다.

소스보기

HTML
<div class="photo_container turn">
    <div class="label">식물도감</div>
    <img src="photo2.jpg" class="front" />
    <div class="description back">
    <div class="description_container">
        <div class="photo_title">은방울꽃</div>
            <p>전국 각처의 산에 분포하는 다년생 초본이다. 생육환경은 토양이 비옥하고 물 빠짐이 좋은 반그늘에서 자란다. 꽃은 백색으로 관상용으로 쓰이며 유독성이 있다. 꽃말은 '순결, 다시 찾은 행복'이다. 한국·중국·동시베리아·일본에 분포한다.</p>
        </div>
    </div>
</div>CSS
.photo_container.turn {
    perspective: 800px;
    position: relative;
}

.photo_container.turn{
    background: #084138;
    border: 10px solid #000;
    border-radius: 6px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}

.photo_container.turn .label {
    color: #fff;
    font-family: "Sandoll GothicNeo3 03 Rg", sans-serif;
    font-size: 24px;
    left: 20px;
    letter-spacing: 0px;
    opacity: 1;
    position: absolute;
    text-shadow: 0 0 10px #000;
    top: 14px;
    z-index: 9999;
}

.photo_container.turn img {
    height: 520px;
    margin: -10px 0 0 -10px;
    width: 520px;
}

.photo_container.turn .front,
.photo_container.turn .back {
    left: 0;
    position: absolute;
    top: 0;
}

.photo_container.turn .front{
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    z-index: 999;
}

.photo_container.turn .back{
    opacity: 1;
    position: relative;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.photo_container.turn .description_container {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.photo_container.turn.hover .front,
.photo_container.turn:hover .front {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.photo_container.turn.hover .back,
.photo_container.turn:hover .back {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.photo_container.turn .description {
    color: #fff;
    text-align: left;
}

.photo_container.turn .description .photo_title {
    border-bottom: 4px solid #fff;
    font-family: "Sandoll MiniSaladbar 03 Bold", serif;
    font-size: 48px;
    margin: 100px 20px 10px 20px;
    padding-bottom: 10px;
}

.photo_container.turn .description p {
    font-family: "Sandoll MiniSaladbar 02 Medium", serif;
    font-size: 24px;
    line-height: 160%;
    margin: 0;
    padding: 20px;
}

※소스 코드 샘플보다 외형의 크기가 작아집니다.