顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2018年1月21日 星期日

(JS) Donate me Bitcoin 贊助按鈕

風險警告：投資加密幣風險極高! Investing altcoins accompanies with the highest risk!
Please Donate To Bitcoin Address: [[address]]
Donation of [[value]] BTC Received. Thank You.
[[error]]
用法：
https://blockchain.info/create_donation_button?address=比特幣錢包
錢包如:16KLuqE4VwaEbuucjQRndWtdmyWNwADTy

JS

1
2
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://blockchain.info/Resources/js/pay-now-button.js"></script>

HTML

注意：請檢查data-address是否正確

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div style="font-size:16px;margin:0 auto;width:300px" class="blockchain-btn"
     data-address="16KLuqE4VwaEbuucjQRndWtdmyWNwADTy"
     data-shared="false">
    <div class="blockchain stage-begin">
        <img src="https://blockchain.info/Resources/buttons/donate_64.png"/>
    </div>
    <div class="blockchain stage-loading" style="text-align:center">
        <img src="https://blockchain.info/Resources/loading-large.gif"/>
    </div>
    <div class="blockchain stage-ready">
         <p align="center">Please Donate To Bitcoin Address: <b>[[address]]</b></p>
         <p align="center" class="qr-code"></p>
    </div>
    <div class="blockchain stage-paid">
         Donation of <b>[[value]] BTC</b> Received. Thank You.
    </div>
    <div class="blockchain stage-error">
        <font color="red">[[error]]</font>
    </div>
</div>

2018年1月17日 星期三

2018年1月11日 星期四

(CSS)(JS)聖旨卷軸效果


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="content">
  <div class="l-pic-index"></div><!--左转轴-->
  <div class="r-pic-index"></div><!--右转轴-->
  <div class="l-bg-index"></div>
  <div class="r-bg-index"></div>
  <div class="main-index">
   <!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
  
     <div class="intro-text">
   <div class="first">奉</div>
   <div>天承運皇帝詔曰</div>
   <div>用盡我所有努力絞盡我所有腦力經過我千思萬想獻你我一片心意恰似比洛陽紙貴更勝似千金一擲祝君平安福氣多日進斗金財富來</div>
     </div>
  </div>
 </div>
JS

1
2
3
4
5
6
7
  //卷轴展开效果 Document Ready
  $(".l-pic-index").animate({'left':'50px','top':'0px'},1450);
  $(".r-pic-index").animate({'right':'-60px','top':'0px'},1450);
  $(".l-bg-index").animate({'width':'236px','left':'73px'},1500);
  $(".r-bg-index").animate({'width':'236px','right':'-38px'},1500,function(){
   $(".main-index").fadeIn(800);
  });
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
body,ul,li,p,h1,h2,h3,h4,h5{
 margin:0;
 padding:0;
 font-size:100%;
}
body{
 font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 background: #6f0b02;
}
img{
 border:0;
}
.content{
 position: relative;
 margin: 40px 0 0 -21px;
 width: 500px;
 height: 460px;
}
.l-pic-index{
 position: absolute;
 left: 200px;
 top: 1px;
 z-index:2;
 width:50px;
 height:460px;
 background: url("https://i.imgur.com/muLgAEn.png") no-repeat right 0;
}
.r-pic-index{
 position: absolute;
 right: 200px;
 top: 0;
 z-index: 2;
 width:50px;
 *width:82px;
 height:460px;
 background: url("https://i.imgur.com/C1a5S59.png") no-repeat left 0;
}
.l-bg-index{
 position: absolute;
// top: 20px;/*中间转轴位置*/
 left: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/ospnj28.png") right 0 no-repeat;
}
.r-bg-index{
 position: absolute;
 right: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/9Kl8d5Y.png") 0 0 no-repeat;
}
.main-index{
 display: none;
 overflow: hidden;
 zoom:1;
 position: absolute;
 z-index: 5;
 width:900px;
 height:250px;
 left:95px;
 top:75px;
 color: #2e2e2e;

}
.intro-text{
 writing-mode: vertical-rl;
 font-size:32px;

}


 .first
{
 text-indent:1em;
 
}
有空再來解析先備份
來源：http://www.paobuke.com/zh-tw/develop/javascript/pbk43018.html、http://588ku.com/sucai/7140313.html

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;        
    }

Google Web Fonts 五款免費網頁字型(黑體, 仿宋, 明體, 楷體, 圓體)

網頁使用 webfont (雲端字型) 為能解決以下問題：
– 工程師不用再跟設計師解釋，為什麼網頁上的字型跟設計稿長的不一樣
– 讓 Windows 的網頁文字不再只是黑體/明體/標楷體套餐
– 讓跨瀏覽器都能顯示相同字型
– 網頁編輯人員不用再把特別的字型都做成圖片
– 讓文字可以有好看的字體，同時也可以被選取、複製、翻譯、向量縮放、被搜尋引擎索引。
– 用其他亞洲語系的系統字型來顯示黑體，如日文 (Meiryo)、韓文 (Malgun Gothic)、中國 (SimHei, Microsoft YaHei)，可以讓網頁上的文字顯示得比較不一樣，但可能發生缺字、筆畫不同、或是有些電腦沒裝的問題。
– 讓微軟正黑體粗體的碧、筵、綰不要有多一個空格，或是粗體筆畫異常的問題

Google Fonts又推出了五款網路專用的免費字型，分別有黑體、仿宋、明體、楷體及圓體，讓部落格在網頁的字型呈現上又多了好幾種不同的選擇，也讓文章標題更加的明顯跟有設計感。
只需引用google fonts的css，就可以將網頁中的文字套用上不同的字型，無論在Chrome、Firefox、Safari、IE皆可正常顯示。

Google Fonts使用方法

進入Google Fonts網頁後，請直接搜尋Chinese-traditional，這一區的文字都是正體中文(繁體)，也都可以完全免費使用，每個字型分別將css引用與指定字型就可以了。
網站名稱：Google Fonts : Early Access
來源：https://wpbox.tips/google-fonts-chinese-traditional/
https://blog.user.today/chinese-webfont-note/

(CSS)諸葛亮出師表


CSS語法回顧
  • 直書：writing-mode: vertical-rl;
  • 分散對齊：text-align: justify;
  • 依字元對齊：margin-top:2em;
  • 抬頭空格：text-indent : 2em;
  • Google的楷體：font-family: 'cwTeXKai', serif;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
#chinesetxt { 
writing-mode: vertical-rl; 
font-size: 36px;
font-family: 'cwTeXKai', serif;
text-align: justify;
height:330px;
line-height:40px;
margin-top:1.8em;
margin-left:-0.2em
}
.paragraph{
  text-indent : 1em;
}
body{
background-image: url("https://i.imgur.com/U4WVYju.jpg");
background-repeat: repeat-x;
}
JS利用
  • 捲軸移動至標題：document.documentElement.scrollLeft = document.body.scrollLeft  = document.getElementById("chinesetxt").offsetWidth;

1
2
document.documentElement.scrollLeft=document.body.scrollLeft =
document.getElementById("chinesetxt").offsetWidth;
HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div id="chinesetxt" lang="zh-Hant">
<div ><b>出師表</b></div>
<div>
臣亮言：
</div>
<div>先帝創業未半，而中道崩殂。今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。宮中府中，俱為一體，陟罰臧否，不宜異同。若有作姦犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治，不宜篇私，使內外異法也。</div>
<div class="paragraph">
侍中、侍郎郭攸之、費褘、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。親賢臣，遠小人，此先漢所以興隆也；親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也。侍中、尚書、長史；參軍，此悉貞良死節之臣也，願陛下親之信之，則漢室之隆，可計日而待也。
</div>
<div class="paragraph">
臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事，由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣！先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂勤，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除奸凶，興復漢室，還於舊都；此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、褘、允之任也。
</div>
<div class="paragraph" >
願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則戮允等，以彰其慢。陛下亦宜自課，以諮諏善道，察納雅言，深追先帝遺詔，臣不勝受恩感激。
</div>
<div class="paragraph">
今當遠離，臨表涕泣，不知所云。
</div>
</div>

(CSS)段落文字縮排、凸排設定

text-indent 首行凸排
當要作凸排時，當把text-indent設成-4em時，表示向左靠，而em代表什麼意思呢?其實em與百分比有點像，它基準則取決於文字的尺寸，比方文字設15px，這時1em=15px，所以當前面要向前四個字，就可用4em，正負代表方向，當向左移4em，又用margin推4m，這時區塊大小，就由原來的400px變成460px，若希望讓區塊，還是保持400px時，就得將with設成340px，才能維持一樣的大小喔！才不會在那擠來擠去，造成版面的跑位。
梅問題-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
<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>
</body>
</p>
</body>

text-indent 首行縮排
縮排就比剛的凸排,來的簡單許多，只要下text-indent，立即就可段落字的首向縮排，但在縮排時，寬度則不會受任何的影響，原來設定多少就是多少囉!
梅問題-CSS教學－段落文字縮排與凸排設定


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
p{
width:400px;
font-size:15px;
text-indent : 4em;

}
</style>

<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>



1
2
3
4
5
6
p { 
    font-size: 12px;　　　　　          /* 設定文字大小 */
    line-height: 24px;　　　          　/* 設定文字行距 */
    letter-spacing: 3px;　            　/* 設定文字間距 */
    background-image: url(dot.gif); /* 設定文字背景圖  */
}

來源:https://www.minwt.com/webdesign-dev/css/5383.html

2018年1月8日 星期一

(CSS3)用 CSS 讓字體可以變成直書 writing-mode

終於橫式直書已可以在chrome firefox IE等各大主流出現了
復興中華文化的里程碑阿

1
2
3
<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>


1
2
html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }




DEMO










來源：https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright

利用直書做喜帖（待續）


訂閱： 文章 (Atom)