Kaye

搜尋此網誌

SVG icon 外框線動畫效果教學

日期： 6月 10, 2017

取得連結
Facebook
X
Pinterest
以電子郵件傳送
其他應用程式

只是用簡單的 CSS stroke-dashoffset 就做出來啦

HTML5

取得連結
Facebook
X
Pinterest
以電子郵件傳送
其他應用程式

留言

張貼留言

Bulma: 基於 Flexbox 製作成的新一代的 CSS 框架

很久沒有發文了，來介紹大家一個 CSS Framework 選擇 https://bulma.io/ Bulma 是一個開放原始碼的 CSS Framework 框架，使用 CSS3 Flexbox 語法製作而成，沒有內建 javascript 組建，是個純粹專注在 CSS 上的框架，輕量、易學、內建多種常見的 UI 和版面結構用的 helper 其實 Bulma 的 Github 顯示在 2016年就已經發佈了，或許是開發初期轉為成熟的時間，也可能因為近幾年前端設計的領域已經發展成有多款 javascript 框架可選擇，所以像 Bulma 這種純 CSS 框架用來搭配 Vue.js 或 React 都可以輕鬆控制 UI 上的互動，目前已經有滿多英文教學，可能是 Bootstrap, Zurb Foundation 之外的另一個製作網站或介面的好選擇 Bulma 官網上有一個跟 Bootstrip 比較表，大家可以參考一下 https://bulma.io/alternative-to-bootstrap/

Drawscript 可以把 Illustrator 畫出來的向量圖輸出成語法

看圖就知道這軟體是做什麼的了呀～需要用的人應該就會需要吧～！做APP有軟體效能限制的時候，總不希望加太多圖檔，能把繪圖畫面輸出成語法實在很輕便咧～官方網站： http://drawscri.pt/ Drawscript 支援這些程式語言 OBJ-C C++ JAVASCRIPT PROCESSING ACTIONSCRIPT 3 JSON RAW BEZIER POINTS 這個主題還讓我想起來久久沒用，都忘了怎麼用的軟體，本來是Macromedia Director，現在是Adobe Driector！官方網站： http://www.adobe.com/products/director.html 當時Driector 擅長編輯點陣圖，也可以用內建的lingo程式語言製做互動，相對於Flash的向量編輯，點陣圖的K數大，不適合當時52Ｋ（？有點忘了）撥接的網路速度年代，Director自然贏不過向量小檔案的Flash，因此，失了人心和大片江山市佔率啊！明明SVG（可縮放向量圖形）出來好久了，現在才有這種軟體好像有點晚啊？ SVG的維基百科介紹： http://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2 感覺目前市面上呈然缺少能製做HTML5互動的軟體，全球想做網頁的設計都必須學習程式語言...所以慢慢的網頁設計這個領域就越來越少學生願意加入了，很多跑去做3D動畫或是遊戲，另一些去平面設計，再另一些去攝影畫畫和拍片，繪圖軟體帝國Adobe公司可要加加油了！

很棒的Proko插畫影片系列課程

插畫系的課程幾乎都是，回家畫畫，上課評論的進行模式，每次到教室，就先把自己的畫放在白板上，等評論，從評論中學習，改進作品和繪畫細節，就像這個影片一樣，而且因為是每週自己畫的，所以沒有兩個作品的對比講解，當然通常老師會建議去看某個人的作品，但是效果沒有這個影片好喜歡插畫的同學快來看吧～惡魔就在細節中這實在是個很棒的插畫系列課程，有點搞笑，但是又很認真，完全是插畫系的笑話，哈，超喜歡～！官方網站 http://www.proko.com/ 影片清單，共有26片 (記得打開中文字幕喔～！) http://www.youtube.com/watch?v=wlLU05hmXyA&list=UUlM2LuQ1q5WEc23462tQzBg

技術提供：Blogger

Copyright Kaye