iT邦幫忙

css3相關文章
共有 146 則文章
鐵人賽 Modern Web DAY 8

技術 #07 CSS 基本語法 & 權重介紹

↓ 今日學習重點 ↓ 了解 CSS 的基本語法 對於 CSS 的權重有基本概念 我們終於進入我們的重點 CSS 啦!今天要來講解 CSS 權重...

鐵人賽 影片教學 DAY 7

技術 一起來實作響應式網頁設計:CSS的各種選擇器 Day7

影片教學 重點回顧 昨天的教學影片當中,我們了解如何轉寫CSS來套用到指定的選擇器當中,而昨天我們使用HTML的元素作為選擇器來套用,今天將要介紹其他選擇器,...

鐵人賽 Modern Web DAY 1

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS

參賽前言 本系列文章目標是學習 CSS 基本知識,並且研究 The State of CSS 中值得令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知...

技術 學習 CSS 中的 :where() 與 :is() 函式

文章出處 :where() 函式接受一個選擇器列表作為參數,允許你編寫更少的代碼並同時設置它們的樣式。本篇文章我們來討論 :where() 的偽類函式,並...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22:客製我要的動畫【Tailwind – Animation 篇】

上一篇我們講到了 transition,但 transition 只是簡單的給予簡易的動畫,實際上能調整的只有整體動畫秒數,但如果我們想要將動畫切分成關鍵影格的...

鐵人賽 Modern Web DAY 7

技術 Bootstrap RWD應用,製作簡易「切換頁面」

製作簡單點選切換互動,搭配Bootstrap就能輕鬆有RWD的效果呦!此範例需引用Bootstrap, fontawesome, jQuery呦。 原頁面比例...

鐵人賽 影片教學 DAY 17

技術 Day 20 CSS 色彩

前言 在昨天我們也正地進入了CSS的部分,我們這邊很不一樣的就是我們先帶大家進入色彩的部分,那我們正式進入今天的主題~ 前景色 /* color name */...

鐵人賽 Modern Web DAY 6

技術 用 HTML, CSS, jQuery來做「動態進度條」

這次的有用到jQuery,讓進度條動起來! HTML 有使用到data-寫法~ <div class="tool-chart" da...

鐵人賽 Modern Web DAY 5

技術 用偽元素改寫input radio,自己設計「單選框」

美化UI小技巧,讓單選框可以更符合設計樣式~ HTML <input type="radio" name="radio&...

鐵人賽 Modern Web DAY 4

技術 如何用HTML與CSS製作出「toggle開關鍵」

iphone常用的開關鍵,其實很簡單! HTML 使用input的checkbox <input id="toggle" class=...

鐵人賽 Modern Web DAY 3

技術 用HTML與CSS製作出「下拉選單」!

input原本的下拉選單太過擁擠,想製作出好看的下拉選單可以參考這邊呦~ HTML 先製作選單input值,讓input內文字能夠顯示出所選選項。 <di...

鐵人賽 Modern Web DAY 8
【每天5分鐘】學前端 系列 第 8

技術 Day08【每天5分鐘】學前端 | CSS 簡介

最近發了 月餅 的圖,朋友問我「退休和財富自由是一樣的嗎?」我說:財富自由也可以不退休呀,退不退休可以是個人興趣選擇~(不過財富不自由可能就退不了休了)欸等等,...

技術 <新手複習向> <CSS學習第1集/>:{簡單介紹與常見屬性;}

CSS是啥?全名為(Cascading Stylesheets),谷哥中文是階層樣式表,是一種風格頁面語言(style sheet language),能讓...

鐵人賽 Modern Web DAY 25

技術 網頁動起來-30天學會HTML+CSS,製作精美網站

在設計網頁時通常會加一些動畫特效,吸引使用者的目光及添加與使用者的互動性。過去製作動畫時以Flash為主,CSS3也可以建立動畫,不再只能用JavaScript...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27 CSS3 < 動畫 animation>

動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過渡,動畫可以實現更多變化、更多控制,連續自動播放等...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26 CSS3 < 3D轉換 transform>

3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標) 1.三維坐標系是由三個軸共同組成的 X軸 : 水平向右 注意: X軸右邊是正值 左邊是負值 Y軸 :...

鐵人賽 自我挑戰組 DAY 25

技術 Day 25 CSS3 < 2D轉換 transform>

轉換 (transform)實現元素的位移、旋轉、縮放等效果,可以簡單理解為變形。 移動 translate 旋轉 rotate 縮放 scale 1.2D...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24 CSS3 < 過渡 transition>

過渡 (transition) 是可以在不使用Flash動畫或JavaScript的情況下,當元素從一種樣式變換成另一種樣式時為元素添加效果,經常和 :hove...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23 CSS3 < 目標選擇器>

CSS3新增的目標選擇器類型: 1.屬性選擇器 屬性選擇器可以根據元素特定屬性來選擇元素,這樣就可以不用藉助於類或者ID選擇器 MDN Web Docs 屬性選...

鐵人賽 Modern Web DAY 12

技術 網頁顏色-30天學會HTML+CSS,製作精美網站

好的網站除了內容傳達之外,顏色是進入網站的第一印象,可以針對文字大小、框線、背景色...等做變化,是網站中不可或缺的樣式,現在讓我們來看看顏色及背景的使用技巧吧...

鐵人賽 Modern Web DAY 10

技術 第10車廂-你今天table了嗎?tableRWD+簡易分頁應用篇

本篇延續<第9車廂-使用content:attr()實現tableRWD應用>的版,透過程式自動產生假title&lt;th&gt;,並製作簡單的分頁功能...

鐵人賽 Modern Web DAY 10

技術 網頁命名規則-30天學會HTML+CSS,製作精美網站

在撰寫HTML及CSS時,好的命名要具備可讀性,一眼就能知道這區塊的作用是什麼,也方便日後的維護管理,今天就要來介紹三種CSS的命名規則 OOCSS(Objec...

鐵人賽 Modern Web DAY 9

技術 第9車廂-使用content:attr()實現tableRWD應用篇

本篇介紹使用content:attr()來抓table的th資料,實現讓小螢幕的table內容閱讀體驗更棒棒! 還記的我們在第5篇有提到::before須搭...

鐵人賽 Modern Web DAY 8

技術 第8車廂-抖動畫面流出!你真的會:hover嗎?

本篇介紹版面使用:hover會遇到的雷點,以及提供解決方式參考 還記的,我們在第6篇有提到狀態選擇器的:check,今天要來講講另外一種好用的狀態選擇器的:...

鐵人賽 Modern Web DAY 6

技術 第6車廂-恩~人家被勾到了拉:checked應用篇

本篇介紹偽類中的狀態選取器:checked應用篇:做一個開關按鈕 :checked介紹 :checked是分類在本刊第4篇選取器 &gt; 偽類別(pse...

鐵人賽 Modern Web DAY 5

技術 第5車廂-一切都是假的!::before應用篇

本篇介紹偽元素系列中的::before/::after概念及實例 假的真不了,真的假不了~一起來看看偽元素系列中的::before/::after唄! 昨天...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07:專案01 - 超簡單個人履歷06 | 實作

我們先回顧一下個人履歷的成品,學完HTML和CSS後,是否能順利做出來呢? Reset CSS 其實Chrome瀏覽器內建就有一些CSS的樣式,像超連結是藍字底...

鐵人賽 Modern Web DAY 6

技術 [13th-鐵人賽]Day 6:Modern CSS 超詳細新手攻略 - Selector (二)

介紹完基礎選擇器,再來介紹一下複合選擇器~ a b 選擇a元素裡的子元素 ab ab為同一元素但不同標籤 a, b 同時選擇a及b元素 a +...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06:專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex

昨天講完的CSS的文字和區塊屬性後,今天要接續介紹版面佈局的屬性,以及一個非常好用的佈局容器 - Flex,上完這堂課,你的網頁佈局就可以更加彈性囉~ 那麼,我...

鐵人賽 Modern Web DAY 5

技術 [13th-鐵人賽]Day 5:Modern CSS 超詳細新手攻略 - Selector (一)

今天再來深度研究一下CSS的語法!我要介紹的是CSS中的選擇器,選擇器是最重要的語法之一,決定了要改變樣式的到底是哪些元素,先從基本選擇器開始! 基本選擇器...