【譯】你不知道的 Chrome 調試工具技巧 第十一天:style editors continued(樣式編輯器後續)

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇,一直更新到 12 月 24 日
版權歸原做者全部。
vue

做者在Twitter上推薦咱們的中文翻譯啦,截圖在最後
git

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀,受權的記錄在這裏
github

正文

在立刻就要迎來假期的這 24 天裏,我將會發布一系列短篇的文章,關於如何更加有意思的使用開發工具,昨天咱們和 custom formatters 玩得很開心 ,今天咱們進行一些視覺操做異步

30. Shadow editor 陰影編輯器

聽起來很不吉利 (譯者注:陰影哪裏不吉利了!) ,可是它只是一個小部件而已,就像咱們前幾天聊過的 color picker 同樣,可是它更加簡單。能夠經過在 Style 面板中點擊靠近 box-shadow 屬性或 text-shadow屬性的陰影方形符號來打開它:編輯器

31.Timing function editor 定時函數編輯器

也被稱爲 Cubic bezier(貝塞爾) 編輯器。貝塞爾曲線是一串用來定義 CSS 的動畫速度在整個動畫過程當中如何變化的魔法數值。咱們將其定義爲 transition-timing-function 或者 animation-timing-function CSS 屬性。函數

就像以前說的 Color pickerShadow editor 同樣直接點擊咱們剛剛提到的屬性(或者他們的簡寫形式:trasition, animation - 請注意:若是 timing 函數的值沒有設置在這個簡寫的形式中,這個符號不會顯示出來)邊上的曲線符號:工具

順帶說一句,若是你沒有試過 3D 動畫,那很簡單:直接在容器元素中設置一個 perspective 屬性。在這種狀況下,我在 body 元素中設置了 perspective: 200px;post

32.插入樣式規則的按鈕

當你把鼠標放在樣式選擇器的選擇區域的最後時,你會看到幾個按鈕,它們可讓你快速的使用 ColorShadow 編輯器添加 CSS 屬性:開發工具

  • text-shadow
  • box-shadow
  • color
  • background-color

...打開相應的編輯器:動畫

今天的分享就到這裏~

慣例: 若是你從這裏學到了一些新東西

→ 你能夠點個贊再走嘛~
→ 關注我:Twitter:Tomek Sułkowski

其餘系列

其餘此係列的文章,立刻就會翻譯出來,到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定,也能夠關注我一波哦~ 順便個人開源項目,求一波 star→ 看這裏, 美麗的博客系統

做者在Twitter上推薦咱們的中文翻譯啦

相關文章
相關標籤/搜索