文章列表 頁1

教學

svg 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤,這邊可以替文字設定外框及填滿顏色,是跟一般網頁文字比較不一樣的地方。

教學

[Vue.js] vue leaflet 基本設置與地圖樣式

在 vue leaflet 裡有確實安裝 component 後,只要使用 l-map 就可以把地圖顯示出來了,一樣透過 props 把參數傳進去後就能生成地圖了。

教學

SVG 的群組- g 與定義圖形- defs

在 svg 如果有圖形要重複使用的話我們可以使用 use,可是這個範例用起來需要先把每個圖排好後再去複製,要重複用的話就需要重新調整相對位置,如果要更有彈性且方便的應用的話,我們可以使用 defs 這個標籤把要重複使用的定義起來,這樣原始圖片就不會出現在 svg,接下來我們要用的時候再去呼叫就好了。

教學

在 SVG 使用已經繪製好的圖形- use 標籤

在 SVG 裡可以使用 use 這個標籤直接把已繪製好的圖形複製過去,並在修改樣式,使用方式為利用 href 去指定要使用的圖形 id,就可以將圖形複製過來。

教學

在 svg 設定漸層填色- linearGradient 與 radialGradient

在 svg 要使用漸層,需要使用 linearGradient 這個標籤,然後再使用 stop 去設定每個點的間層顏色就好,若使用 defs 可以設定完再利用 fill 的 url 去指定 id 即可。

教學

[Vue.js] 使用 vue leaflet 來製作互動地圖- 基本安裝

之前我們提過用 leaflet.js 來取代 google maps製作互動地圖,這邊來用 vue 建立 web app,剛好有人弄好方便的工具 vue leaflet,測試一下還滿方便的,有興趣的可以用看看。

教學

在 SVG 內使用 html- forginObject 標籤

在 SVG 裡基本上要使用其規定的標籤才能做出文字或圖形,那如果已經習慣 html 的標籤想要在 svg 內使用的話就會很不習慣,比如在 svg.裡要置入圖片要使用 image ,而 html 則是使用 img 的標籤,還好 svg 有提供一個 forginObject 的標籤,只要使用後就能在 svg 內使用 html 了。

好網站

QRCode Monkey- 線上 QRCode 產生器,可自訂顏色、樣式與加入 Logo

QRCode Monkey 是一個方便的線上 QRCode 產生器,除了一般常見的網址外,也可以加入特定文字、Email、電話號碼、SMS 簡訊、VCard、MeCard、地圖定位、Facebook、Twitter、YouTube、WiFi 無線網路、活動資訊或 Bitcoin 錢包。

教學

SVG 的 Path(1)- 基本直線

在 SVG 裡我們使用 path 來繪製線條,因為 path 很複雜,所以只要搞懂 path 應該就能理解大多數 svg 線條的方式了。

教學

[Vue.js] 取得 component 中 input 的資料

在 vue 裡面我們可以透過 v-model 來取得 component 輸入的資料。

教學

[Vue.js] Component 的運用

當我們想要重複利用某一些 UI 的時候,就可以利用 vue 的 component 來幫我們好好處理,設計得好的話再開發上便能更有彈性及節省時間。

教學

CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode

會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化,這個以往需要靠繪圖軟體才能完成的效果,現在利用 CSS3 的 mix-blend-mode 也可以做到囉,要使用這個效果前我們需要先讓東西可以疊在一起,可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。

教學

CSS3 的 Grid Layout 介紹與使用範例

CSS 的 grid layout 其實滿有趣的,不同於以往的排版方式是一排排完後接著往下繼續安排內容,grid layout 可以讓你把區塊分配完後,直接把內容填入就好了。

教學

[Vue.js] 取得指定元素的寬度與高度

想要透過 Vue.js 來取得指定元素的寬與高,可以透過 ref 這個 attr,再透過 this.$refs.infoBox.clientWidth 取得就可以了。

教學

CSS3 的濾鏡效果- filter

CSS3 在有了 filter 這個屬性後,我們就可以很簡單地透過設定來替圖片加上濾鏡效果,也就是不用每次都仰賴像 photoshop 這樣的影像繪圖軟體了。

好網站

純 CSS 對話框產生器

Bubbly 是一個簡單的純 css 對話框產生器,簡單設定想要的樣子就可以把 CSS 的 code 帶回去了。

教學

CSS 的穿透屬性- pointer-events

pointer-events CSS 屬性指定在什麼情况下 (如果有) 某個特定的圖形元素可以成為滑鼠事件。

好網站

為網頁寫的 2D 物理碰撞引擎- matter.js

matter.js 是一個為網頁寫的 2D 物理碰撞引擎,如果有需要處理跟物理碰撞有關的行為可以嘗試看看。