CSS Transition屬性的4個操作

CSS Transition

使用CSS製作網頁動畫,Transition、Transform、Animation這3個有關CSS動畫的屬性肯定是很常碰到,然後也很容易在不同的屬性名稱、屬性值之間搞混,尤其Transition、Transform,甚至還有Translate,一堆T開頭的英文名稱,好像就讓腦容量滿載了,還沒製作動畫前,腦袋就動不起來了。

為了能夠讓腦袋動起來,學習CSS動畫的操作前,先來看看動畫是如何產生的,對於理解你理解CSS各種屬性的使用,會更有概念。

動畫,其實就是一堆靜止圖像,連續變化而產生的。

也許,你可能就有過自製動畫的經驗,在書本上畫上各種圖案,快速翻動,就變成了一個小動畫,例如下方的影片,就是手繪影格的實例。

2個要點了解CSS圓角屬性border-radius操作

2個要點了解CSS圓角屬性border-radius操作

CSS調整邊框圓角的屬性border-radius,可以讓你的網頁元素的四個角產生圓弧。

例如一個長寬50px的方形,利用border-radius:50%便可以變身成為一個半徑為25px,直徑為50px的圓形。

div{
  width:50px;
  height:50px;  
  background-color:#ffd28d;
  border-radius:50%;
}

See the Pen by Ory (@SLSuccess) on CodePen.

使用 border-radius 你需要掌握的2個要點是圓的半徑,以及圓的位置。

進入正題之前,如果你想要快速的製作出不同的border-radius圖形,不想探究如何操作,你可以在網路上搜尋各種 border-radius 產生器,例如border-radius.com這個網站,試著在方形的四個角,填入不同的數值,來取得你要的圖形。

然而,如能夠仔細的了解 border-radius 的語法,這個屬性使用起來,你會更得心應手。

自學Python爬蟲課程-超過10堂線上課程教你爬蟲應用

Python爬蟲課程

瞭解Python有哪些應用後,想要學習Python 爬蟲的技能?

自學成功道整理了15堂,教你學會Python爬蟲的應用課程,選擇你有興趣的相關專案,開始學會讓Python為你蒐集、整理資料,建立視覺化報表,讓你透由Python在很多生活、工作的事情上多了好幫手,包括:

  • 投資理財
  • 市場調查
  • 關鍵字行銷
  • 商品比價
  • 資產配置
  • NBA比賽數據

在可以自動化處理的事情,學會寫程式幫你省時、省力、高效率!

免費閱讀萬本電子書?購買HyRead閱讀器前該懂的6個優缺點

HyRead Gaze Note and Pocket

HyRead的電子書閱讀器可以買嗎?

如果是幾年前,我的回答是否定的,但最近開始使用HyRead的閱讀器後,咦~是我誤會了什麼嗎?還是HyRead這幾年真的有進步?

好好的體驗後,發現其實還挺好用的,閱讀時的翻書速度滿快的,與之前覺得他翻書速度很慢的印象不同,畢竟閱讀器最大功能就是看書,翻書必須流暢才可以,整個對這品牌的閱讀器有所改觀。

加上可以免費借閱6萬多本電子書(北市圖為例),HyRead Gaze的確是滿好的電子書閱讀器,就算只借了500本電子書,也比在其他電子書店買書,節省下好幾萬元,畢竟有些不急著看的書,或只會閱讀一次的書,圖書館真的都借的到。

而要說HyRead 閱讀器的主要缺點是什麼的話,應該是使用者體驗的部分不是很好,若不熟悉它的操作介面,可能會覺得它不好用。

CSS權重(specificity):熟悉這6個樣式級別,讓你的樣式被採用

CSS權重熟悉這6個樣式級別,讓你的樣式被採用

人類生而不平等,CSS樣式也是。

如果將CSS擬人化,CSS世界內的樣式們可分為6種階級,階級高的樣式權重大,瀏覽器優先採用,階級低的樣式權重小,則會被覆蓋掉,無法嶄露頭角。

CSS全名為「Cascading Stylesheets,階層樣式表」,名稱中的階層(Cascading)便明白的告訴你,樣式們是有層級、有階級的,樣式生而不平等。

在樣式並非各個平等的情況下,便衍生出那個樣式比較重要、權力比較高,得以優先展現在網頁上。而這樣的比較便是CSS權重,英文為specificity,直譯過來是指樣式的獨特性,也稱之為優先等級,本文統一以「權重」稱之,取樣式們之間的權力與重要性比較的特性。