響應式網頁設計是什麼 響應式網頁設計(Responsive Web Design)簡稱RWD,是開發網頁設計中的一種方法,在不改變網站結構,隨著顯示螢幕的大小調...
transform屬性是變形的意思,可運用在2D及3D變形,可以對網頁元素做旋轉、縮放、平移、傾斜、矩陣變形的效果。但不適用於「行內元素」 transform:...
樣式表雖然較 JavaScript 單純,但隨著規則定義越來越多,樣式表還是會因複雜的結構與繁雜的規則配置而使得可讀性降低,甚至造成錯誤。 讓 CSS 代碼更漂...
看焰火囉~ 有時我們看網頁內嵌YouTube影片時,真的會氣到頭頂冒煙,畫面被切掉不說,還無法自動縮放。今天適逢國慶佳節,我們就來放焰火吧~ iFrame @...
在設計網頁時通常會加一些動畫特效,吸引使用者的目光及添加與使用者的互動性。過去製作動畫時以Flash為主,CSS3也可以建立動畫,不再只能用JavaScript...
Grid是什麼 Grid是磚牆式版面,使用二維的排版方式,與flexbox不同的地方是Grid一次可以控制水平及垂直方向。Grid像是美工軟體,有許多參考線幫助...
以前排版都會使用float、display屬性的block、inline來製作,現在有了Flexbox,幾乎可以解決各種排版需求。 Flexbox是什麼 fle...
Q: 第 30 天了,心中有沒有很興奮?A: 好緊張耶.. 最後一天了來個結語~~ 之前從來沒有想過要參加鐵人賽 當初的對話是這樣的... 同事A:「走啊...
Q: 效能跟效果之間怎麼取捨?A: 如果效果不複雜,用一些渲染成本比較高的寫法也無妨 新屬性搭配動畫來點新效果 本篇介紹一個新的屬性-webkit-back...
今天要來介紹的是定位(position),可以用來設定元素的擺放位置了 position 定位 static 預設值 正常排序,依照html的code由上往下...
偶爾會看到,往下滾,球就會跟著滾動的幅度以拋物線移動。 今天就來使用SVG的Path做做看!其實是我做好的第二個版本,第一個是使用GSAP & Scro...
Box Model定義 每個html的元素都是一個Box Model,由外而內為外邊距(Margin)、邊框(Border)、內邊距(Padding)、內容盒子...
Q: 我要下拉選單,黑底跟選單一起推出來呢?還是淡出呢?A: 前幾章的小技巧有掌握好,一切都好上手 之前常常會看到有些網站手機版的下拉選單,樣式主要分為兩種...
有一陣子滑網頁案例時,超常看到用SVG配上滾動視差(Parallax)今天終於要來試試看了! 滾動視差就是讓元素動的幅度和滾動的幅度有落差,主要是偵測scrol...
表單在網頁上有不同呈現的功能,像是網路投票、註冊、購物、問券、搜尋等,用來收集瀏覽者的資訊,增加與使用者的互動。 <form> 包含表單元素的區域(...
Q: 484開始有點詞窮了?A: 寫程式還是比寫文章有靈感吶.. 繼上一篇後,要來為卡片創作出另一種效果~跟上一篇有點類似,但因為程式碼有諸多地方不一樣,所...
第3天寫了打字特效炫起來!今天來個姊妹篇,手寫字特效炫起來!已經默默進入SVG幾天了... 老樣子先來看成果! 底線是我用Adobe XD拉的~按下右鍵複製S...
Q: 剩下 5 篇來點實用也不實用的範例吧~~A: 畢竟效果還是要看設計的美感,這是很看天份的(望天 今天的主題是「卡片」。在有些形象網站中可以看到產品或是...
CSS-background各屬性 共用的css 寫在最上面 body { margin: 0; box-sizing: bor...
有時候在製作區塊時,會希望用不規則的形狀呈現,以前會將圖片製作成不規則形狀,在放到html裡面,或是用很多元素堆疊呈現,但每次要修改圖片就要再重新做一次,很麻煩...
Q: 今天的好像沒有範例?A: 文長慎入,但有看有差!! 動畫不能只是動畫,還要動得不費力 上一篇有提到在做動畫時,改變不同的屬性在重新渲染畫面時的成本會不...
之前上課時jQuery講師說到: :nth-child(b) b要從1開始,不知道為什麼 比如$('tr td:nth-child(2)').css('ba...
前一章節介紹過混合模式,相信對濾鏡也不會很陌生。「濾鏡」是什麼呢?他可以做出與Photoshop相同的濾鏡,CSS提供了十種濾鏡,可以用在圖片、文字...等地方...
Q: 終於要講效能了!A: 以Loading為範例講黑~ Animation Loading 直線版本 前幾篇有做過Loading效果的動畫,今天延續下去!...
「混合模式」是什麼呢?有用過photoshop的設計師對圖片混合模式肯定不陌生,是元素重疊部分的顏色、飽和度、亮度進行混合變成新的顏色。混合模式相關屬性: b...
Q: 倒數 8 篇了!逐漸進入養老階段,會一直Loading嗎?A: Loading只是代表,主要是可以看看有哪些變化~~ 幾天前有出個文字版本的Loadi...
CSS的初始化 簡單理解 : CSS初始化是指重設瀏覽器的樣式 (也稱 CSS reset) 每個網頁都必須首先進行 CSS初始化 初始化範例 : /* 把我们...
Q: 9月的最後一天來點特別的吧?A: 常見的彈窗來一個! 樣式先做好是很重要的! 首先來個簡易的按鈕.btn-open來開啟彈窗,然後在彈窗內有個關閉按鈕...
Congratulations to all of us! The final day has already come! Hooray!Pic: Unspla...
圖片在網頁裡是不可或缺的元素,可以增加網站的豐富度及美感,但是也可能造成網站花太多時間載入,使用者體驗不佳,甚至影響到網站的排名。因此,圖片的解析度、檔案大小相...