2018年1月9日 星期二

(CSS)Chinese Wedding Card 電子喜帖

手機建議使用橫看,目前直書顯示會因會中文字型不同而顯示不同，手機作業系統不同也可能產生不同。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!--喜帖--向右翻>
<div id="wedding" dir="rtl">
 <div class="hard"> 
 <img
  src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/cover.jpg"  class="cover_page" />   
 </div>

 <div class="hard">
   <section>
                  <br />
    <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/context.jpg" height="106" class="map"/>
              <!--a href="img/map_big.jpg"  data-featherlight="image"><img src="img/map.jpg" width="280" alt="map to restaurant" class="map" /></a-->
                 <br /> <br /><br /> <br />  
               
            </section>
 </div>
 
 <div class="hard">
        <section>
            
<div class="margin">謹詹於中華民國ｏｏｏ年<div class="text"><div>國曆ｏ月ｏ日</div><div>農曆ｏ月ｏ日</div></div>(星期ｏ)
    <br/ >
    為<div class="text"><div>ｏ男ｏｏ先生</div><div>ｏ女ｏｏ小姐</div></div>舉行婚禮典禮敬備喜筵 &nbsp;恭請
 
<div class="middle">
 <span class="welcome">闔第光臨</span>
           <div class="parents text">
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
           </div>
            <span class="bottom">鞠躬</span>
            </div>
 <span class="invite">恕邀</span>
            <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/div_bar.png" class="text" height="10">
            <div class="text">
            <div>席設：ｏ ｏ ｏ ｏ</div>
            <div>地址：ｏｏｏｏｏｏｏｏ<span class="number">888</span>號</div>
            <div>
           <a href="tel:123456789" target="_blank" tittle="打電話">電話：ｏｏｏｏｏｏｏｏｏ</a>
            </div>
            <div>
            時間：<a href="#" target="_blank" download="wedding.ics" title="加入行事曆">ｏｏｏｏ時準時入席</a></div> 
            </div>
            </div>
        </section>
    </div>
  
</div>
<!--end of 喜帖-->
JS

1
2
3
4
5
6
$("#wedding").turn({
  width:  400,
  height: 300,
    elevation: 50,
    gradients: true
});
CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);

body {
  margin: 0;
  padding: 0;
  background-color: lightpink;
  overflow: hidden;
}
/*
wedding card
*/      
section {
 -ms-writing-mode: tb-rl; /* old syntax. IE */
 -webkit-writing-mode: vertical-rl;
 -moz-writing-mode: vertical-rl;
 -ms-writing-mode: vertical-rl;
 writing-mode: vertical-rl; /* new syntax */ 
  display:inline-block;
  vertical-align:middle;
  font-family: 'cwTeXKai', serif;
  font-size:12px;
  color: #acd8bf;
  text-align: justify;
}

section .text{
        display:inline-block;
        vertical-align:middle;
}
  

.cover_page{
        width: 200px;
        height: 300px;
         cursor:move;
}
    
    
.hard{
        background:  red;
       
}

/*
right page
*/    
    section .margin {
   margin-top: 2em;  
    }

    section .indent {
   text-indent: 2em;  
    }
       
    section .welcome{
         font-size: 12pt;
    }
    
    section .bottom{
        margin-top: 1em;
         font-size: 12pt;
        
    }
    
    section .middle{
        margin-right: 1em;
        margin-left: 1em;    
    }

   section .parents{
        margin-top: 2.9em;
  }
    
    section .invite{
       // text-indent: 2em;
        margin-bottom: 1em;
    }
    
  
     section .invite_text{
        font-size: 0.5rem;
    }


    section .number { text-combine-upright: all }

    a {
        text-decoration: none;
        color: #acd8bf;        
    }

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)