1. 首頁
  2. »
  3. 軟體
  4. »
  5. [密技] 將Chrome瀏覽器化身為CSS3網頁編輯器,即見即所得的產生文字、區塊陰影效果
瀏覽器 網頁開發 軟體

[密技] 將Chrome瀏覽器化身為CSS3網頁編輯器,即見即所得的產生文字、區塊陰影效果

2020/02/27

梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
  對於網頁設計網頁的朋友,應該對Chrome瀏覽器的開發人員工具不感陌生,透過這個開發人員工具,不但可快速幫網頁進行除錯外,甚至也可使用它,來尋找網頁區塊中的CSS樣式設定,並且還能即時的修改,即時的預覽結果畫面,這對於在設計網頁上,是件相當方便的事。

  而除了可以修改CSS的樣式定外,在這個開發人員工具中,還內建了幾個CSS3中常用的效果,像是區塊陰影、文字陰影,或是更改文字顏色、背景色,都能透過視覺化的界面,直接拖拉,即時的顯示效果,完全不用再背語法,與憑空想像,唯有眼睛看到才算數,因此現在就一塊來看看,Chrome開發人員工具中,隱藏的CSS小工具吧!


Step1
首先先開啟Chrome瀏覽器的開發人員工具,快速鍵為F12,開啟後再將頁籤切到Elements
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step2
接著點選第一個選取區塊圖示,再將滑鼠移到要選擇的區塊上,當選取後,區塊上方會覆蓋一層淡藍色。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step3
這時在右下的區塊中,就會帶這個區塊的CSS樣式設定,除此之外在設定面板的右下角,會看到三個點。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step4
將滑鼠滑入後,立即就會開啟這個神密的工具,分別有背景色、文字色、文字陰影、區塊陰影…等選項。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step5
當要修改背景色,點選後,就會出現色盤,讓你可自由的選擇所需的顏色,甚至還可設定顏色的透明度,且在設定的過程中,畫面也會即時顯示,立即就可知道效果如何。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step6
甚至也可改變文字的顏色與透明度。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step7
最酷的是這個功能,可以幫區塊加陰影,甚至還可調整影子的角度與柔化效果。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step8
且在區塊陰影的部分,還可設為內陰影,這樣區塊就有點像是嵌進去的感覺。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step9
甚至文字也可製作陰影。
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果
Step10
當把文字陰影設定好後,還可修改影子的顏色與透明度,因此透過這四個小工具,就可讓你快速的設定顏色與陰影啦!且還是即見即得,超方便的啦!
梅問題-[密技] 透過Chrome瀏覽器的開發人員工具,透過拖拉就可輕鬆製作出CSS3的文字與區塊陰影效果