相信大多數人的網頁設計都是從HTML、CSS開始,這點我就跟大家不同,當時大學專題的時候,因為有程式底子,學長便要我從canvas開始去設計人機界面,因此我並沒...
Metaballs 今天我們來實作Day #8黏黏球,這是一個很常見的動畫,但實作上還是蠻有難度的,就讓我們繼續看下去吧~CodePen: https://co...
我們可以用以下四種方式,將 CSS 套用入 HTML 文件中: 行內套用 (Inline) 嵌入套用 (Embed) 外部連接套用 (External Lin...
一、前言 想要在有限的時間內快速建立自己的網站,對於追求效率的人來說,是一件很有吸引力的事情,但是這件事情最大的缺點,就是會花上不少的金錢與心力。一般來說,想...
組件實作 : Demo 一、前言 Button 是能夠廣泛被應用的組件之一。製作 Button 方法不只一種,你可以使用<div>、<b...
Hi,大家好 我是Isha 這次藉由iT鐵人賽,想開一間甜點烘焙店,讓CSS不只是程式碼,而是可以帶著你發揮創意、實現夢想的藍圖。 30天的內容大致分為以下幾個...
在海賊王這部漫畫當中,有一個高人氣的反派角色,夏洛特·卡塔庫栗,他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...
教學的內容如果投影片(Slide)或跑馬燈(Carousel)呈現方式,一定更具教學效果。其實老師們已經很常用投影片教學了,像是powerpoint、keyno...
這篇延續上篇的波浪字體繼續進行講解 昨天說到javascript的部分可以從兩個部份來講解 把原本在<label>中的每個字母分開獨立包在<...
Notifications, Search and Menu 在資訊爆炸的時代,每個人都有許多社群媒體,訊息通知是不停不停地響,叮咚叮咚,今天就來實作Day #...
嗨 大家好!我是東尼先生(Tony)。一個有一點點強迫症外加三分鐘熱度的前端工程師。 一、前言 第一次參加鐵人賽,我的心情是既期待又怕受傷害。想參賽的主...
一、前言 早在幾年前,我一直有著經營自己 Blog 的小小願望,但是礙於不知道要寫些什麼主題,這個願望就一直被我藏在心中遲遲未去執行。而在無意間,我得知鐵人賽...
參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...
在美國大學教室,常常看見教授們將某個黑板,翻過來,翻過去,這種可翻式的黑板,節省了不少的教室空間。同樣地,利用這種翻頁效果,除了可以節省網頁空間,也增加網頁的吸...
今天來做表單的波浪效果,如圖中所示,當input框取得焦點時,表單的label就會有高低起伏的效果,這篇有很多重要的JS觀念,像是陣列的處理方法,所以打算分成...
挑戰開始快一周了,今天我們來挑戰Day #6 Profile 就來製作一個Thibe的鐵人檔案吧!雷茲狗! 完整作品CodePen: https://codep...
不知不覺時間來到了第七天啦! 今天要來做的是 Landing Page (又叫「一頁式網站」或「著陸頁」),那什麼是Landing Page呢?「 單一特定目...
Statistic 今天我們來實作Day #5 搭配上筆者Thibe這一週的文章瀏覽和預期數據,看來這下滑趨勢達到顯著呢(p < 0.05)!此次作品建議...
display 這個屬性在排版上非常好用,之後介紹三元運算子也會提到可以如何運用。主要在設定元素 顯示(如何顯示)或 不顯示(none),及其子元素的佈局, 直...
昨天的程式碼已經用到了不少Flex來進行排版或是進行盒子上下及左右置中的工作,事實上,只要做網頁,很難避開Flex這個工具。 利用margin來排定元素之間的相...
補充說明 HTML 清單 和 影片 的標籤,並練習 CSS 樣式的設定。 清單有兩種 無序清單(unordered list):使用 <ul> 標...
今天要來做的是滾動動畫,利用滑鼠滾輪來控制BOX從左右兩邊交叉的出現,倒回去也一樣可以XD! 那我們就直接開始吧 運用知識點羅列 CSS 知識點 使...
Loading 滴..滴滴..滴滴滴,讀取完成!今天我們來實作Day #4我們在讀取網頁期間,常會看到不同的讀取畫面,雖然讀取有可能讓人厭煩,但看到漂亮的loa...
「佛要金裝,人要衣裝,HTML要CSS」。 建置一個網頁和蓋一棟建築一樣,建築架構完成後,要進行內部裝潢;而HTML代表網頁的架構,而CSS則是裝潢師。 CSS...
今天除了介紹 Box Model 以及如何開啟 開發者工具 檢視相關資訊,還會補充說明色彩 RGB 、 RGBA ,最後會比較 CSS 和 HTML 註解 寫法...
The Pyramide 今天我們來挑戰Day #3 金字塔,不要問我為什麼多了個e,我們要尊重作者的命名~金字塔這個作品是一個連貫的動畫,在天空、太陽、金字塔...
今天要來做的是圖片模糊加載,圖片一開始是很模糊的,隨著加載率從0%~100%的過程中,會越來越清楚,最後進入焦點,而加載文字的部分則會慢慢淡出 事前準備 1....
昨天介紹了 CSS 的格式,我們來複習一下: 選取器{ 屬性: 值; } 範例: p{ text-decoration: underline; }...
前言 在每天的實作中,都會遇到不熟、不知道如何使用語法完成的難題,可以點擊CSS 100作者本身的CodePen參考(參考下圖紅色箭頭),像是背景色、動畫效果之...
今天是中秋節,應景一下就做了一個很陽春的導覽列,本篇的重點會放在CSS 2D Transform的部分中秋圖片參考自iStock 事前準備 一張你喜歡的圖...