技術 CSS & CSS3 學習筆記重點

以下要分享一些從金魚腦切版中及自己在切版過程中學到的一些知識點。 https://ithelp.ithome.com.tw/users/20112550/iro...

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

最近發了 月餅 的圖，朋友問我「退休和財富自由是一樣的嗎？」我說：財富自由也可以不退休呀，退不退休可以是個人興趣選擇～（不過財富不自由可能就退不了休了）欸等等，...

Olivia ‧ 2022-09-09

技術 開箱8:RWD斷點設計大公開~TailwindCSS設定範例

本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整 由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都...

切版姐姐 ‧ 2023-09-23

技術 day26_css3 border-radius

border-radius 屬性中如果只指定一個值，那麼將生成 4 個圓角。但是，如果想在四個角上一一指定，可以使用以下規則： 四個值:第一個值為左上角，第...

小斑 ‧ 2017-12-29

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

Flex 又稱彈性盒子，是目前學習 CSS 必學的排版方式之一，有了它幾乎 80% 的版面都可以排出來。過去 block、inline、inline-bloc...

Eva Chen ‧ 2023-10-04

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

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

切版姐姐 ‧ 2021-09-21

技術 #45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

前幾篇寫到 CSS clip-path 時，可以剪裁任何 HTML 的元素，包含色塊、圖片、影片，但是他只限於精準的剪裁線條，萬一今天要有更複雜而且半透明的剪...

Eva Chen ‧ 2024-09-25

技術 風味沙拉 - 天然 CSS 過場佐 jQuery 動畫

Alex ‧ 2018-10-24 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

技術 [蛻變事實／D18] 設計師勇闖前端城－（學習記：CSS背景圖SVG檔換色）

最近切的版，圖都是SVG格式今天處理footer區塊才發現我手中沒有footer 區塊需要的白色Logo啊～～～！ 面對此問題我可以有二個做法： 打開PSD原...

凱特麻麻桑 ‧ 2018-11-02

技術 【前端自學之路】如何開始?

大家好!我是Steven，現在是一位下班時用閒暇時間自學前端技術的上班族，今天想分享一些我在學習過程中所領悟到的事，並且分享給你們，首先今天想聊聊如何開啟前端自...

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

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

Alice CH ‧ 2022-09-20

技術 #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

本篇同步發表於 我的部落格 ↓ 今日學習重點 ↓ 了解 5 種 CSS Position 定位方式 了解 z-index CSS Pos...

Eva Chen ‧ 2023-10-07

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

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

Andy Chiang ‧ 2021-09-12

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

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

Alice CH ‧ 2022-09-17

技術 #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

本篇會用實例與註解說明各種實用的 CSS 選取器，由於很多所以可以先存起來，之後要用到時再查詢。 我的 Photoshop 老師游閔州曾說過：「掌握了 Pho...

Eva Chen ‧ 2023-09-24

技術 Day 16 - CSS 原生濾鏡

原生濾鏡 前面都在提說如何用 JaveScript 去改變圖像中的每個像素值來達成我們想要的效果，但其實在原生 CSS 中就有提供一些屬性來提供效果，今天我們就...

lb01910483 ‧ 2019-10-01

技術 Day 27 CSS3 < 動畫 animation>

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

a0265392_lin ‧ 2021-10-07

技術 鐵人賽 Day 1-寫在鐵人賽第一天

從大學畢業以來，就一直在平面設計的領域中探索自己，如何將自己所學變成可能回饋社會的力量，雖然不多，但不斷的努力著透過設計可以讓台灣的視覺更好，隨著智慧裝置的興起...

Tim Hsu ‧ 2019-09-04

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

CSS 的數值可以做簡單的運算，今天我們要介紹 CSS 的數學函式，數學函式可以讓你在設計網頁時更靈活操控元素的尺寸和位置。 實用的 CSS 數學函式共用四個...

Eva Chen ‧ 2023-10-02

技術 day30_review

在 day2 中有提到，我的發文內容可能比較偏向基本，因是第一次參賽，目的希望在挑戰連續發文的 30 天中，更重要的是能從中學習並累積自己的前端技術。終於來到最...

小斑 ‧ 2018-01-02

技術 day29_hover

按鈕動畫-&gt;鼠標移動到按鈕上後添加箭頭標記 範例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &...

小斑 ‧ 2018-01-01

技術 [13th-鐵人賽]Day 2:Modern CSS 超詳細新手攻略 - 入門

WHO? WHAT? CSS到底是誰?CSS的全名為Cascading Style Sheets，其中的style是樣式，因此CSS就是用來描述網頁樣式的工具。...

veronica1130 ‧ 2021-09-07

技術 #47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

mix-blend-mode 和 background-blend-mode 能讓元素或背景顏色和它們背後的元素或背景進行混合，從而產生不同的視覺效果。這些效...

Eva Chen ‧ 2024-09-27

技術 30天分享(25) - CSS3 互動式動畫

CSS3 新定義了互動式動畫，這是一個很棒的改變， 提供了直接在 CSS 檔裡設定完，不需依靠 javascript 就能做出簡單的動畫， 比方說能以純 CSS...

cretise0415 ‧ 2014-10-23

技術 day25_css3 border

使用 CSS3 的border-radius 屬性可為元素添加圓角邊框以及box-shadow 屬性可為元素添加陰影 範例： &lt;!DOCTYPE html...

小斑 ‧ 2017-12-28

技術 30天分享(29) - CSS3 多欄文字

文章有時候太長不好閱讀該怎麼讓閱讀體驗變好呢? 如果寬度都不做調整，跟內頁一樣塞滿整頁的寬， 或者是太長沒有適度空白的空間讓讀者休息， 都是極差的閱讀體驗。 就...

cretise0415 ‧ 2014-10-27

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

iphone常用的開關鍵，其實很簡單！ HTML 使用input的checkbox &lt;input id=&quot;toggle&quot; class=...

Alice CH ‧ 2022-09-18

技術 day27_css3 box-shadow

CSS3 中的 box-shadow 屬性適用於盒子陰影，也可用來創建卡片。 範例： &lt;!DOCTYPE html&gt; &lt;html&gt;...

小斑 ‧ 2017-12-30

技術 #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

CSS 的 transform 屬性是一個功能強大的工具，它允許我們以簡單的方式對元素進行平移、縮放、旋轉和傾斜等 2D transform 效果，而不需要使...

Eva Chen ‧ 2024-09-29

技術 [鼠年全馬鐵人挑戰] Week12 - 超新手學習筆記：CSS 選擇器 - child

又過了一週啦~自從參加了切版直播班就更忙碌了這次的切版作業也學了很多以前沒學過的語法這週來記錄一下新學到的 CSS 選擇器吧~ 什麼是CSS選擇器 相信初學者剛...