[CSS] 單行文字與多行文字的省略符號

通常在文章的摘要中,我們會希望文字過多時,超過某個範圍,就顯示省略符號(…),在 CSS 當中,單行是很容易達成的。
但多行文字時,要顯示省略符號,在 CSS 中是做不到的,只有到了 CSS3 出了其它屬性後,才有機會實現,但目前實做的結果,僅限 Safari 和 Chrome 瀏覽器。

繼續閱讀 “[CSS] 單行文字與多行文字的省略符號”

[CSS][Animation] 動畫效果 – 畫面移到特定位置後才顯示動畫效果

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

看原始碼:html css js

[CSS][Animation] 動畫效果

前言

在 UI 當道的領域當中,要讓介面更加地易於使用,就必須要善加利用 animation 來創造動畫效果,有非常多的「微互動」都會需要使用,瞭解 keyframes 與 animation 勢在必行。

Keyframes

  • 建立多個狀態的轉場效果,A to B to C (and on)。
  • 可以自動播放,不用依賴任何的事件監聽(例:hover)。
  • 有更多可以控制的層面,例如 direction、looping。

Keyframes 語法

@keyframes 是關鍵字,代表要開始設定 keyframes 了,後面緊接著這一系列 keyframes 的名稱(name),這個 name 是可以自己定義的。而在最外層大括號中間,就開始設定各個 State,以下例來說,是 0%、50%、100% 的時候,會有各自的 State,依據不同的 State,設定 CSS:

@keyframes 自訂的name {
  0% { ... }
  50% { ... }
  100% { ... }
}

以上例來說的話,整個動畫會是從 0% 開始,然後轉場到 50%、再轉場到 100%,然後到 100% 的時候,可再設定要停止,或是自動回到 0% 開始重頭播放。

最後當我們定義好了一個 @keyframes 時,要將之運用在某個元素的時候,就會需要使用 css 中的 animation 了。

animation 語法

animation: keyframes_name 2s 1s ease-out forwards;
// 等同於:
animation-name: keyframes_name; // 這裡的 keyframes_name 就是定義好的名稱。
animation-duration: 2s; // 動畫執行期間的秒數。
animation-delay: 1s; // 等待 1 秒之後,才會開始執行 keyframes 所設定的動畫。
animation-timing-function: ease-out; // 轉場的 timing function。
animation-fill-mode: forwards; // 在動畫結束之後,該停在哪個狀態或該如何接續進行動畫,這裡選 forwards 是指停在 100% 的狀態,可選的值有 none(default)|forwards|backwards|both|initial|inherit

除此之外,還有其它有關於 animation 的 css 可以使用:

animation-iteration-count: 1; // 動畫重覆的次數,如果要無限次數,就設定 infinite。
animation-direction: normal; // 在執行 keyframes 時,預設通常都是從 0% 執行到 100%,如果想要設定從 100% 執行到 0% 時,就可以設定 reverse。另一個選項是 alternate,會從 0% 執行到  100%,然後再從 100% 執行回 0%。
animation-play-state: running; // 可以的選項有 running|pause,與影片的播放、暫停是同樣的意思;這在與 JS 搭配時,可妥善控制動畫。

談談 Timing functions

預設的 Timing functions 有以下幾種:

  • ease:是預設的。慢進 → 加速 → 減速到結束。
  • ease-in:慢進 → 加速到結束。
  • ease-out:快進 → 減速到結束。
  • ease-in-out:開始跟結束都是慢的狀態。
  • linear:以相同速度前進。
  • steps():無連續的動作,直接跳至各步 ( step ) 的指定 css。
  • cubic-bezier():指定動畫滑動的曲線,此網站可視覺化的指定。

預設的 Timing functions 示範:

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(.5, -.5, .5, 1.5)
steps(3)

進一步瞭解 cubic-bezier

有名的貝茲曲線(cubic-bezier),在 CSS3 中的 animation-timing-function 就是可以讓你指定 cubic-bezier 的地方,預設中的 ease、ease-in、ease-out、ease-in-out、linear ,其實都可以透過 cubic-bezier 來達成,當你想要客製化一些移動的動畫效果時,就會需要用到 cubic-bezier,詳細範例可以在此網站瀏覽。

範例

範例 1:重新瀏覽網頁方可看到效果

Surprise!

看原始碼:html css

範例 2:重新瀏覽網頁方可看到效果

Keyframes! 💯

看原始碼:html css

範例 3:重新瀏覽網頁方可看到效果

Three deee! ✨

看原始碼:html css

範例 4:(套用多個 keyframes)重新瀏覽網頁方可看到效果

Surprise

看原始碼:html css

[CSS][Transition] 轉場效果

前言

轉場是從 A 狀態,轉變成 B 狀態,中間的過程,就叫轉場,在 CSS 中叫做 transition。適當的增加轉場效果,可以讓使用者的體驗更好,這是在 CSS3 中才有的新功能,目前大部份的主流瀏覽器也都支援了,這裡可看 transition 支援度

語法

底下這行的意思是,所有屬性(all)只要發生改變,等待 1 秒(1s),然後花 2 秒鐘(2s)的時間,轉場到新的樣式;ease-out 的意思是開始快,然後慢慢減速,是 timing-function 的其中一種。

transition: all 2s 1s ease-out;

// 等同於:
transition-property: all; // default: all
transition-duration: 2s;  // default: 0;2s 表示 2 秒;2ms 表示 2 毫秒。
transition-delay: 1s; // 開始進行轉場效果之前,所要等待的時間。
transition-timing-function: ease-out;

範例

範例 1:hover

A B

看原始碼:html css

範例 2:focus

看原始碼:html css

範例 3:多狀態

看原始碼:html css js

上面寫了三個範例,希望可以幫助大家瞭解 transition 的用途、用法。若有位何問題,可於底下留言。

參考資料

CSS3 Transitions

[CSS] 滑鼠游標(Cursor)種類有哪些呢?

前言

為了方便看目前有哪些游標可以使用,所以這裡列出了目前可以使用的游標,在 CSS 的語法裡,例如我要將游標換成 text,則可以寫成:

.your_class{
  cursor: text;
}

上述的 text 可以直接換成以下方框的文字,滑鼠移過即可看到效果。

另外此篇文章也會告知你如何自訂游標。

CSS 2.1 游標

  • default
  • crosshair
  • help
  • move
  • pointer
  • progress
  • text
  • wait
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize

CSS 3 游標

  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize
  • col-resize
  • row-resize
  • all-scroll
  • zoom-in
  • zoom-out

其它

Chrome 和 Safari 瀏覽器並不支援以下兩個:

  • grab
  • grabbing

指定游標來源路徑

像 grab 和 grabbing 在 Chrome 和 Safari 瀏覽器中並不支援,那為了要保持一致性,我們就必須要自行指定游標的來源來徑,例如:

此路徑 https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur 會顯示

此路徑 https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur 會顯示

另外的 png 圖路徑 http://notes.carlos-studio.com/images/1.png 會顯示

那麼就可以使用以下語法來讓 Chrome 和 Safari 也支援 grab 和 grabbing 的游標了,也可另外(another)指定客製的圖:

.grab_class{
  cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important;
}
.grabbing_class{
  cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur), default !important;
}
.another{
  cursor: url(http://notes.carlos-studio.com/images/1.png), default !important;
}
  • grab
  • grabbing
  • another

這樣就可以很方便的查閱了。

如有任何問題,歡迎下方留言喔!

[CSS] 關於 currentColor 屬性

舉例來說,假設希望所有的水平分隔線(全部的 <hr> )像文字一樣自動有相同的顏色,則可以透過 currentColor

body{
  color:green;
}
hr{
  border-top: 1px solid currentColor;
}

示意圖:

Screen Shot 2016-01-20 at 10.06.37 AM

currentColor 不是一個靜態的顏色屬性值,而是會一直隨著 color 屬性的值來做變化,讓它成為 CSS 裡的第一個變數。
另外 currentColor 也是很多 CSS 顏色屬性的預設值:border-color、text-shadow、和 box-shadow的顏色、outline-color 等。

[CSS] Keyframe Animations

Create the Animation

@keyframes <name-animation>{
  <step 1> {<property>: <value>; }
  <step 2> {<property>: <value>; }
}
例:
@keyframes swing{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

上例等同於以下(0%等於from,100%等於to):
@keyframes swing{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

 

Assign the Animation

注意: <duration> 一定要在 <delay> 之前。
animation: <name> <duration> <delay> <iteration> <timing function>;
例:
#left-arm{
  transform-origin: top center;
  animation: swing 2s 0s infinite ease;
}

範例:

Multi-step Keyframes

例:
@keyframes swing{
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

上例因為 0%, 50%, 100% 都有相同的 code,故也可寫成:
@keyframes swing{
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

 

Advanced Keyframe Animations

infinite也可改成none(default)、forwards(停留在最後的狀態)

[CSS] transform

Transform – Rotate

X

span.icon_cross{
  position:relative;
  color:red;
  display:inline-block;
  width:20px;
  height:20px;
  line-height:20px;
  border:1px solid gray;
  text-align:center;
  cursor:default;
  transition: transform 4s;
}
span.icon_cross:hover{
  transform: rotate(360deg);
  /*
  transform: rotate(1turn);
  */
}

Timing Function

  • ease (Default)
  • linear
  • ease-in
  • ease-out
  • initial
  • inherit
  • ease-in-out
  • cubic-bezier