一分鐘!用Photoshop搞懂 CSS overflow 超簡單!

photoshop and css overflow cover

什麼!Photoshop跟CSS overflow有什麼關係?Amos你會不會太會扯了?是的!你絕對沒看錯,我就是硬要這麼扯這麼講的,事實上這篇文章是要給網頁視覺設計師看的,因為有不少設計師對於網頁設計虛幻的構成概念有太多的懵懂感受,所以~看Amos是否能夠幫忙渡化你用Photoshop的比喻來協助你!

overflow屬性本身的意思翻譯過來就是「溢出」,簡單來說overflow就是要處理「溢出」的資料,用比較設計師的語言翻譯的話,應該稱之為「溢位」可能比較容易理解,當資料太多且多到滿出來的時候,這時候就是overflow(溢位)發作作用的時候了,如果我們用Photoshop的觀念來看,當Photoshop裡面文字框架的內容多到超過文字框架的時候,超出的文字就不會顯示,而會在文字框架右下方出現一個「+」提示,就像下圖這樣

photoshop and css overflow

這表示,有資料超出文字框架了,並且被隱藏起來了,OK! 我想這樣你應該就能理解了,這就很像是InDesign或者是illustrator在處理文字資料一樣的道理,但其實沒那麼簡單才是,因為 所設定的並非完全指文字資料,且不僅僅是處理文字流這麼簡單,而是包含了圖片及其它如div這類物件都有作用,所以Amos認為用遮罩觀念會比起資料溢位概念更為適合一點,用Photoshop的遮罩來說,我們可以看到Photoshop的遮罩可以把超過遮罩範圍的資料給隱藏起來

photoshop and css overflow mask Open

當遮罩刪除(或關閉)時又能把藏在裡面的內容顯示出來

photoshop-and css overflow mask Close

事實上overflow給予的功能,是把超過區塊範圍的部份隱藏或顯示又或者讓區塊可以出現捲軸,我們先撇開捲軸不說,如果今天我在一個div中放置了一張圖片,並且把圖片設定了

.xx img{
	position:absolute;
	right:-50px;
	top:-50px;}

接著把div設定CSS

.xx{overflow:hidden;}

這時候你就會發現到,圖片只顯示出一小塊區域,超出範圍的圖片區域則不會顯示,這就是overflow:hidden的隱藏作用,也如同遮罩遮蓋的作用一樣.

CSS overflow hidden

但是如果我今天把遮罩關閉,就如同把overflow設定為visible (顯示),那麼我的圖片就又出現了。這樣是不是很容易理解了呢?

css overflow visible

那麼Amos對於捲軸又該如何解釋?事實上,捲軸的出現是為了讓我們移動畫面,若取自iPad的操作方式來看,我們是移動畫面,而非捲軸本身,所以當我們手指往上拖拉時,畫面就是把畫面推往上方,所以資料就由下方進入到視窗中了,同樣的,我們在一個有遮罩的photoshop圖層中先把遮罩連結給取消後,再把圖層資料用直接選取工具把圖層內容往上拖拉,你會發現到現在的操作就跟你在div中操作資料是一樣的,只差沒看到捲軸而已,對吧!?

photoshop and css overflow scroll

那這樣你是不是會說,這概念換個方式套在inDesign以及illustrator上面也可以阿,是不是太硬凹了?其實,你如果要把這兩個軟體拉進來一起討論也是ok的啦,畢竟這兩個軟體也是有遮罩可以用阿,只是這兩個軟體給你的工作空間太大了,唯有Photoshop比較貼近我們要的感覺,像是photoshop中你的資料只要超過文件外,你就看不到(如同HTML Body),若換在illustrator或Indesign呢?你會發現都看的到吧,除非你又多做了一個遮罩出來才行,所以我才會拿Photoshop來當做舉例的對象.

然後….嗯,看到這裡一分鐘應該到了,希望這一篇能幫助到大家,讓大家對CSS overflow屬性有更明確的觀念~就醬!

以上概念若有任何錯誤,還請不吝指正,若有其他想法也歡迎一起討論喔,謝謝!