Skip to content

Instantly share code, notes, and snippets.

@fokayx

fokayx/HTML_CSS_shot_01.md

Last active January 25, 2018 14:01
Show Gist options
  • Save fokayx/7a6efc01e662a544f1820bd69ea99e53 to your computer and use it in GitHub Desktop.
Save fokayx/7a6efc01e662a544f1820bd69ea99e53 to your computer and use it in GitHub Desktop.
Download ZIP
HTML&CSS
Raw
HTML_CSS_shot_01.md

HTML & CSS shot 01

2018-01-05

Raw
HTML_CSS_shot_02.md
Raw
HTML_CSS_shot_03.md
  • opacity => 整個物件的透明度，子層也跟著透明
  • rgba => 顏色色塊的透明度

div p : div 下的所有 p，不管被包幾層 div > p : 父子 div 的兒子 p div ~ p : 弟弟 和 div 同層 p div + p : 第一個弟弟

div.k : div class 是 k div .k : div 下的 class k 兒子

父層也要加 position 屬性，不能是預設的 state relative : 定位以自己原本的位置為基準開始算 absolute : 定位以父層原本的位置為基準開始算，不佔位置

Raw
HTML_CSS_shot_04.md
  • Content delivery network 或 Content distribution network，縮寫：CDN

CSS 不同單位進行數學運： calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is allowed.

calc()
width: calc(100% - 200px);

bootstrap 預設樣式

.conatiner {
  paddin: '0 15px';
}

.row {
  margin: '0 -15px';
}
Raw
HTML_CSS_shot_05.md

border-radius

從角角的原點推設定值

border-radius: 1 2 3 4 / 5 6 7 8

1 上橫邊左 2 上橫邊右 3 下橫邊右 4 下橫邊左 5 左緃上邊 6 右緃上邊 7 右緃下邊 8 左緃下邊

  border-radus: 10px 20px 30px 40px / 50px 60px 70px 80px

半圓 border-radius: 50% 50% 0% 0% / 100% 100% 0 0

畫小精靈 div { width: 0px, height: 0px, background: #000, border: 50px solid yellow; border-radius: 50%; border-right: 50px solid #FFF; margin: auto; postion: absolute; top: 0; right: 0; bottom: 0; left: 0; }

tansform

##transform-origin: top; -> 更改 transform 的基準點

  • rotate() 角度
  • rad() 弧度
  • grad() 梯度

傾斜

  • skewX()
  • skewY() -skew(x deg, y deg)

縮放 params 是倍數不需要單位，可給負值會相反縮放

  • scale(x, y)
  • scaleX()
  • scaleY()

移動 單位為 % 以自己本身的寬高 size 為主，可為負值

  • translate(x, y)
  • translateX()
  • translateY()

transform　可同時加入多重屬性值 tansform: rotate(10deg) skew(40deg);

垂直置中 1 inline 屬性物件，將 line-heght 設為父層高度

2 偽元素 再讓需對齊的元件設 vertical-align .conatiner::before{ content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }

3 不確定元件高度 item { width: 100px; height: 100px; position: absolute; top: 50%; 需要扣回來自己高度的50% transform: translate(-50%, -50%); 不知大小也沒關係 }

4 四個邊都設為 0 margin: auto .container { position: 'absolute'; top: 0; right: 0; bottom: 0; left: 0; }

-moz- firefox -webkit- safari chrom -ms- ie

transition: 改變的屬性值 時間 延遲時間 加減速

.item { width: 100px; height: 100px; position: absolute; top: 50%; 需要扣回來自己高度的50% transform: translate(-50%, -50%); 不知大小也沒關係 transition: width 1s linear, height .5s 1s; }

.item:hover{ width: 300px; height: 50px; } 當 hover 到 item，item 的寬度 1 秒變 300px. 變完寬度再變高度，給高度 1 秒的延遲時間然後在 0.5 變成 50px

.item { transition: all 1s; 所有變化 1 秒變完 }

從 a 到 b 的 transition 放在 b。例如 先寬後高 從 b 到 a 的 transition 放在 a。例如 先高後寬 .item { width: 100px; height: 100px; transition: height .5s 1s, width 1s linear; }

.item:hover{ width: 300px; height: 50px; transition: width 1s linear, height .5s 1s; }

.dislay { display: none; right: -200px; transition: right 1s linear, display .5s 1s; }

.display:hover { display: block; right: 200px; transition: display 1s linear, right .5s 1s; }

animation

div{ animation: 動畫名稱 時間 延遲 (infinite 無限次) linear(不會頓)/cubi-bezie(____)加減速; }

@keyframes 動畫名稱 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

cubi-bezier.com css ease

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment