分類彙整: CSS 教學 – 網頁排版

CSS3 教學 Transform 變形效果 – 2D 篇

嗯~就叫它「變形效果」吧!在 CSS3 中再加入了 Transform 效果囉!此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外,更可產生 3D 的變形,這…真的是太強悍啦!在高興的同時別忘了~並不是所有的瀏覽器都有支援! 閱讀全文

in CSS 教學 - 網頁排版

CSS3 教學 Transform 變形效果 – 3D 篇

再來篇差不多的文章,同樣是換湯不換藥~當然還是要為各位解說一下 CSS3 Transform 的 3D 基本觀念。首先,我要先釐清一下軸線的方向: 哇~真是太神奇了!在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧! 閱讀全文

in CSS 教學 - 網頁排版

CSS3 教學 Transition 轉場動畫 – 滑動選單篇

不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢?如果沒有仔細研讀的話,請趕快回去複習一番!否則,會不知道接下來我要做什麼喔!?接下來,要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。 閱讀全文

in CSS 教學 - 網頁排版

CSS3教學 Transition 轉場動畫 – 滑動廣告篇

再來一篇換湯不換藥的範例,我們稱它為滑動廣告!其觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!請各位仔細聽我說來…若還不熟悉請見以下兩篇文章~淺談 CSS3 Transition 轉場動畫效果 CSS3 Transition 轉場動畫應用實例 – 滑動選單篇 閱讀全文

in CSS 教學 - 網頁排版

CSS 教學:Google Fonts 免費雲端字體-實作篇

步驟一:新建HTML

大家好,上次已經有介紹過「 Google Fonts 」這個雲端字體的免費資源,這次的教學分享,小編會利用一個簡單的網頁版型來作示範,實際教大家如何將雲端上面的字體套用到自己的網頁裡。不論是「 Google Fonts 」或是 CSS 語法的初學者,都別錯過這次練習的好機會喔… 閱讀全文

in CSS 教學 - 網頁排版, Free Resource 好康報報, Good Design 好站報報

CSS 教學 – 為標題文字設定背景圖片

CSS 語法最重要的功能就是 display:block; 框格模型(區塊模式),框格可以製定寬度高度,可以調整位置,可以置入圖片… 等。 所謂的 CSS 網頁排版技巧,有一大半就是利用 display:block; 這個方法來完成的… 閱讀全文

in CSS 教學 - 網頁排版