2020年1月30日 星期四

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
 

blur 模糊 blur(0px) 0px 到100px，的百分比控制
sepia 懷舊 sepia(0) 0 or 1，1為元素轉換成黑白影像
invert 負片 invert(0) 0 or 1，1為元素轉換成負片影像
opacity 透明 opacity(1) 0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比 contrast(0) 0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和 saturate(0) 0 to 10， 10為元素轉換成最大飽和度
brightness 亮度 brightness(0) 0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階 grayscale(0) 0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉 hue-rotate(0deg) 0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影 drop-shadow(30px 10px 4px #4444dd) x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色
00
#CSS Filters濾鏡效果#html Filters濾鏡效果#blur 模糊#sepia 懷舊#invert 負片#opacity 透明#contrast 對比#saturate飽和#brightness 亮度#grayscale 灰階#hue-rotate 色相旋轉#drop-shadow 下拉陰影
on 沒有留言:
標籤：

jquery click

00
#jquery click#html click
on 沒有留言:
標籤：

img 圖片標籤

HTML img 圖片標籤

<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">

參數用法說明
src 圖片網址，必要項目。
border 圖片邊框，例如 border="0" 代表邊框為 0。
alt 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width 圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height 圖片高度，例如 height="100px" 代表高度限制在 100px。
width:auto 自動判斷圖片寬度。
<img style="width:auto;" src="https://xxx.jpg" />
width:300px : 將圖片寬度設為 300px。
<img style="width:300px;" src="https://xxx.jpg" />
height: 100px; width: 100px;  將圖片 寬度 高度 設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px;" />
height: inherit ; width: inherit;  將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit;" /></div>
max-width 及 max-height 設為 100px  ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" />
height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="height: 50%; width: 50%;" /></div>
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) :   設定圖片陰影。
<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://xxx.jpg" width="200px" />
#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain;       /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain;            /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain;   /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center;           /*置中*/
background-repeat: no-repeat;         /*背景圖案不重複*/
border:2px solid #000000;               /*邊框樣式與顏色*/
background-color:#CCCCCC;         /*背景的顏色*/}
</style>
#HTML#img 圖片標籤#html img#HTML 圖片標籤
on 沒有留言:
標籤：

2020年1月26日 星期日

svg

circle=圓形  cx=X座標  cy=Y座標  r=圓形半徑  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度
<svg width="130%" height="100px">
       <circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
       <circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
       <circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
       <ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" /> 
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="black"
        fill="yellow" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="red"
        fill="blue"  /> 
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="80" height="50" stroke="red"
        stroke-width="3" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="15" ry="15" width="100"
        height="50"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="50" ry="50" width="100"
        height="50"
        style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度 
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
          <polyline  fill="yellow" stroke="red" stroke-width="3"
          points="5 30, 30 60,60 5,90 60,120 30,120 100,
          5 100,5 30" />
</svg>
html.ug5g.com
<svg style="font-size: 20px ;">
       <text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
ug5g.com
<svg style="font-size: 20px ;">
     <defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
          <text x="10" y="100" style="fill:red;">
               <textPath xlink:href="#path1">ug5g.com</textPath>
        </text>
</svg>
https: html.ug5g .com
<svg style="font-size: 20px ;">
        <text x="10" y="20" style="fill:red;">https:
               <tspan x="10" y="45">html.ug5g</tspan>
              <tspan x="10" y="70">.com</tspan>
      </text>
</svg>
00
#html <svg>#html 伸縮矢量圖形
on 沒有留言:
標籤：

2020年1月21日 星期二

<frameset > <frame  >

HTML <frameset > <frame  > 標簽

屬性值描述
frameborder 0 / 1 規定是否顯示框架周圍的邊框。
longdescURL規定一個包含有關框架內容的長描述的頁面。
marginheightpixels定義框架的上方和下方的邊距。
marginwidthpixels定義框架的左側和右側的邊距。
namename規定框架的名稱。
noresizenoresize規定無法調整框架的大小。
scrollingyes / no / auto 規定是否在框架中顯示滾動條。
srcURL規定在框架中顯示的文檔的 URL。
colspixels / % / * 設定框架集中列的數目和尺寸。
rowspixels / % / * 設定框架集中行的數目和尺寸。
00
#html <frameset >
on 沒有留言:
標籤： ,

2020年1月20日 星期一

HTML 標簽

HTML fieldset 標簽
<fieldset> 標簽會在相關表單元素周圍繪制邊框

  <fieldset>
        <legend>黃金 ＥＴＦ</legend><pre>
            02840.HK  SPDR 金         83168.HK 恆生人幣金ETF
           03081.HK  價值黃金         09081.HK  價值黃金－U
          83081.HK  價值黃金－R
  </pre></fieldset>

黃金 ＥＴＦ

   02840.HK  SPDR 金         83168.HK 恆生人幣金ETF
   03081.HK  價值黃金         09081.HK  價值黃金－U
   83081.HK  價值黃金－R

  <fieldset>
    <legend style="text-align: center;color:red" >黃金 ＥＴＦ</legend><pre>
   02840.HK  SPDR 金         83168.HK 恆生人幣金ETF
   03081.HK  價值黃金         09081.HK  價值黃金－U
   83081.HK  價值黃金－R
  </pre></fieldset>

黃金 ＥＴＦ

   02840.HK  SPDR 金         83168.HK 恆生人幣金ETF
   03081.HK  價值黃金         09081.HK  價值黃金－U
   83081.HK  價值黃金－R
#html <fieldset>#html <legend>#html 圍繪邊框
on 沒有留言:
標籤：

HTML <br> 標簽

HTML <br> 標簽


<br> 換行

HTML結果
123456789
<br>
ABCDEF<br>123		123456789
ABCDEF
123
#html <br>
on 沒有留言:
標籤：

2020年1月15日 星期三

HTML audio 音频

HTML5 Audio(音頻)

00
00
實例<audio id="myVideo" controls="controls"    屬性="值"  >
           <source src="xxx.ogg" type="audio/ogg" />
           <source src="xxx.mp3" type="audio/mpeg" />
                 Your browser does not support the audio element.
</audio>  
方法描述
addTextTrack()向音頻添加新的文本軌道。
canPlayType()檢查瀏覽器是否能夠播放指定的音頻類型。
fastSeek()在音頻播放器中指定播放時間。
getStartDate()返回新的 Date 對像，表示當前時間線偏移量。
load()重新加載音頻元素。
play()開始播放音頻。
pause()暫停當前播放的音頻。
屬性描述
audioTracks返回表示可用音頻軌道的 AudioTrackList 對像。
autoplay設置或返回是否在就緒（加載完成）後隨即播放音頻。
buffered返回表示音頻已緩衝部分的 TimeRanges 對像。
controller返回表示音頻當前媒體控制器的 MediaController 對像。
controls設置或返回音頻是否應該顯示控件（比如播放/暫停等）。
crossOrigin設置或返回音頻的 CORS 設置。
currentSrc返回當前音頻的 URL。
currentTime設置或返回音頻中的當前播放位置（以秒計）。
defaultMuted設置或返回音頻默認是否靜音。
defaultPlaybackRate設置或返回音頻的默認播放速度。
duration返回音頻的長度（以秒計）。
ended返回音頻的播放是否已結束。
error返回表示音頻錯誤狀態的 MediaError 對像。
loop設置或返回音頻是否應在結束時再次播放。
mediaGroup設置或返回音頻所屬媒介組合的名稱。
muted設置或返回是否關閉聲音。
networkState返回音頻的當前網絡狀態。
paused設置或返回音頻是否暫停。
playbackRate設置或返回音頻播放的速度。
played返回表示音頻已播放部分的 TimeRanges 對像。
preload設置或返回音頻的 preload 屬性的值。
readyState返回音頻當前的就緒狀態。
seekable返回表示音頻可尋址部分的 TimeRanges 對像。
seeking返回用戶當前是否正在音頻中進行查找。
src設置或返回音頻的 src 屬性的值。
textTracks返回表示可用文本軌道的 TextTrackList 對像。
volume設置或返回音頻的音量。
#html audio#script audio
on 沒有留言:
標籤：

HTML audio 音频

HTML audio 音频


00
on 沒有留言:
標籤：
訂閱： 文章 (Atom)