(品牌形象影片)~
個人覺得蠻高竿的~細節很多符號~情境與音樂都好優~~
重點是看完後你完全不知道這是什麼牌子~是搞什麼東東
賣什麼東西~
直到~去查詢後再回頭看影片才會發現

從品牌理念
與滑板人的固執
環境
商品佈局出場順序
用法

細細品味這隻影片

你願意留意很多細節

你願意聆聽很多細音

該品牌官網:sitka

很年輕的品牌

但是理念會讓人認同

可惜台灣沒賣這牌子。

RWD 影片縮放設定css &

方法有兩種
1.css

css寫法其實很簡單
靠位置空間做出效果

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

補充個比例的%
16:9 – 56.25%
4:3 – 75%
3:2 – 66.66%
8:5 – 62.5%

2.js

直接加上這個js
效果一樣只是這個外掛一定要是16:9比例的影片
http://fitvidsjs.com/

input range 製作方式

很懶人的方式就是用這個開放原始碼來改

http://danielstern.ca/range.css/?ref=css-tricks#/

自己改就需要這樣寫了

有2個需要改

1.Thumb (-slider-thumb)
2.Track (-slider-runnable-track)

語法瀏覽器支援
Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+

基礎html如下

input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {}

input[type=range]::-ms-track {}

input[type=range]::-webkit-slider-thumb {}

input[type=range]::-moz-range-thumb {}

input[type=range]::-ms-thumb {}

如果要寫成的直立式的slide
input[type=range][orient=vertical]
{-webkit-appearance: slider-vertical; /* WebKit */}
對應