Google Material Design 表單標籤效果

/

自從Google設計了Material Desgin後,除了按鈕的漣漪效果讓人驚豔外,表單label跟input的結合方試也跟著讓很多人「致敬」,好啦其實是模仿。

第一次看到的時候,原本想找個時間來寫label、input那個效果的,但就一直沒抽出時間。

最近想用Netflix追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,想想Google的設計連Netflix都在用了,看來是個好設計,就決定自己來寫一個。

寫的結果放在codepen上:

See the Pen material design form label effect by sean (@sean-su) on CodePen.

寫的時候有遇到一個問題,單純用css,無法判斷input是否為空,因此當input有值以後,要讓label維持在focus的狀態,就只能用js。

後來google了一下,也看了MaterializeNetflix,看是不是用css去處理,但看上去,一樣都是用js在判斷。

有興趣的人可以看一下原始碼,就開放給大家始用了:

https://codepen.io/sean-su/pen/wErBoJ


Summary
Google Material Design 表單標籤效果
Article Name
Google Material Design 表單標籤效果
Description
自從Google設計了Material Desgin後,除了按鈕的漣漪效果讓人驚豔外,表單label跟input的結合方試也跟著讓很多人「致敬」。最近想用Netflix追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,想想Google的設計連Netflix都在用了,看來是個好設計,就決定自己來寫一個。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 commands

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

Front-End

Word、Excel 合併列印功能使用筆記

WordPress

WordPress:Site Kit by Google 介紹及使用

Front-End

IntersectionObserver:上篇-基本介紹及使用

WordPress

Ubuntu 安裝 WordPress – 3:VM、資料庫權限、PHP、WordPress

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

Google Maps

Google Maps API 學習筆記 – 4:Place API 自動完成地址、地點評論摘要

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.