[CSS] Transitioning Position

Buy Now! On Sale $59
a.btn.buy-button{
  position:relative;
  height:32px;
  line-height:32px;
  text-align:center;
  width:150px;
  color: white;
  background-color: #31AAD2;
  display:inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration:none;
  overflow:hidden;
}
span.content{
  position:absolute;
  left:10px;
}
span.top{
  top:0;
}
.btn:hover .top{
  top:-100px;
}
span.bottom{
  top:32px;
}
.btn:hover .bottom{
  top:0px;
}
.content{
  position:relative;
  transition: top 0.3s;
}

[CSS] Transitioning Color

transition: <property> <duration>;

transition: <property>(default: all) <duration> <timing-function>(default: ease) <delay>(default: 0);

CTA

<style type="text/css">
a.this_btn{
  display:inline-block;
  text-decoration:none;
  padding:10px;
  border-radius: 5px;
  background-color: #00A0D6;
  color: #FFFFFF;
  /*
  transition: background-color 0.4s, color 0.4s;
  transition: all 0.4s;
  */
  transition: .4s;
}
a.this_btn:hover{
  background-color: #007DA7;
  color: #E3E3E3;
}
</style>

[CSS] table點擊表格(td),然後將4邊邊框都換顏色

下圖是 table 表格某一個td的初始動態:
Screen Shot 2015-06-11 at 11.12.43 AM

下圖是點擊上面那個 td 之後,加上 active 這個 class 後的狀態:
Screen Shot 2015-06-11 at 11.12.34 AM

// 上面的 scss 如下:
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    i{
      display: inline-block;  
    }
  }
}

這時會發現只有右邊框、下邊框有換色成功,那左邊框、上邊框呢?只要善用 :before 、 :after 即可達成(加上藍字部份):

// 更新後的完整 scss 如下:
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    &:before{
      content: "";
      background-color: #59AE35;
      height: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      right:-1px;
    }
    &:after{
      content: "";
      background-color: #59AE35;
      width: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      bottom:-1px;
    }
    i{
      display: inline-block;  
    }
  }
}

如圖:
Screen Shot 2015-06-11 at 11.18.57 AM

[CSS] Flexbox

Flexbos 是 CSS3 中新的一種排版模式,有些瀏覽器尚未支援,詳細細節可參考此Flexbox

以下速記概念及語法:

  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>

flex container:

.flex-container {
  // 宣告成 flex 排版模式,只寫flex是區塊元素,寫inline-flex是行內區塊元素
  display: flex | inline-flex;
  
  // 內層 flex items 的排列方向,row是從左到右;row-reverse是從右到左;column是從上到下;column-reverse是從下到上。
  flex-direction: row | row-reverse | column | column-reverse;

  // 各個 flex items 超出container時,nowrap表示不斷行;wrap表示會往下斷行;wrap-reverse表示往上斷行。
  flex-wrap: nowrap(default) | wrap | wrap-reverse;

  //是flex-direction和flex-wrap的簡寫
  flex-flow: <'flex-direction'> || <'flex-wrap'>;

  // flex items 針對 main-axis 來做排列
  justify-content: flex-start(default) | flex-end | center | space-between | space-around;

  // flex items 針對 cross-axis 來做排列
  align-items: flex-start | flex-end | center | baseline | stretch(default);

  // 當 flex container 垂直區有額外的空間時,如何針對 cross-axis 來排列
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex items:

.flex-item {
  // 指定出現的順序
  order: <integer>;
  
  // 如果所有items的flex-grow都設成1,則每個items的寬度都會是一樣的,且會填滿整個container,如果有一個item是2,則該item寬度就是2倍大
  flex-grow: <number>; /* default 0 */

  flex-shrink: <number>; /* default 1 */

  // This defines the default size of an element before the remaining space is distributed.
  flex-basis: <length> | auto; /* default auto */

  // 是簡寫,預設為0 1 auto
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  // 該 flex item 針對 cross-axis 來做排列,會 override container 的 align-items 屬性
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

[CSS] overflow-wrap

偶爾會遇到很長的單字,或者塞不進文字行且沒有自動連字符處理的字元串,或者沒有斜線或其他自動斷行之字元的冗長的URL。

overflwo-wrap 是 CSS 3的一部分,不是所有瀏覽器都支援。不過,它只是取代 CSS2的 word-wrap特性,因此,透過在你的 CSS 內包含這兩者,就幾乎能夠涵蓋所有瀏覽器:

body{
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Screen Shot 2015-01-13 at 10.05.52 AM

[CSS] 連字符 hyphens

div.test{
  border:1px solid red;
  width:60px;
  height:50px;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

Screen Shot 2015-01-13 at 9.52.15 AM

incredible 因為超過範圍寬度,所以會有連字符號的出現。在英文書寫時可用此範例。

 

如果要取消連字符:

div.test{
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

[CSS] 連結到字體檔案

無論是自行存放字體檔案,還是使用線上的字體服務,都必須讓 CSS 知道字體可被運用在網站上。要使用 @font-face 這個特性。

@font-face {
  font-family: WebFontName;
  src: url('WebFontName.otf');
}
  • font-family:是將於樣式表裡其地方參照字體所使用的名稱,比較簡單的做法,就是給它實際字體的相同名稱。
  • 如果 font-family 包含多個單字,就必須用單引號包起來(亦即’Web Font Name’)。
  • src:確認指向字體檔案的 URL 具有正確的路徑,指向網站上字體檔案所在的位置。

前述程式碼只包含一個字體檔案,但是通常會針對每個字體連結到多個檔案,因為不同的作業系統支援不同的字體檔案類型,因此,最後的程式碼,看起來會像是這樣:

@font-face {
  font-family: WebFontName;
  src: url('WebFontName.eot');
  src: url('WebFontName.eot?#iefix') format('embedded-opentype'), url('WebFontName.woff') format('woff'), url('WebFontName.ttf') format('truetype'), url('WebFontName.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

你以多種格式提供相同字體,瀏覽器會使用它所支援的任何一個。

對於哪些字體檔案類型被哪些瀏覽器所支援,請看這篇文章(@font-face File Types Browser Support)

[css] youtube影片設計iframe RWD (iframe RWD with youtube iframe video)

1、css:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

html結構:

<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

參考資料:Responsive Youtube Embed