iT邦幫忙

css相關文章
共有 1841 則文章
鐵人賽 Modern Web DAY 29

技術 【Day 29】超級好用的側邊欄固定效果 - Sticky Sidebar

by Sticky Sidebar Sticky Sidebar 是一個 JavaScript 外掛插件,大多用於製作有 sticky 效果的側邊欄(可理解為固...

鐵人賽 Modern Web DAY 29
喪屍黑白切 系列 第 29

技術 Day 29 | 來組合個畫面吧 - Part 2

昨天稍微提了一些我切畫面時,對 HTML 的規劃,今天就來講 CSS 的部分啦!(鐵人賽剩一天好興奮啊~終於可以休息一下了) 在 CSS 撰寫習慣上,有人喜歡加...

鐵人賽 Modern Web DAY 28
HTML 與 CSS 學習筆記 系列 第 28

技術 Day28 - HTML 與 CSS (10) - 網頁設計

網頁設計 環境:將多頁面的檔案建立,連結確認彼此間的關係 layout (佈局):評估多個頁面皆會出現的部分,如開頭與結尾,可稱為佈局 保持彈性:內容長度不定...

鐵人賽 自我挑戰組 DAY 28
網頁學習雜記 系列 第 28

技術 Day 28 | Circular timer animation

今天要來分享我看 Youtube 影片做出來的 timer,照慣例先放影片連結,用他裡面提到的觀念延伸做出我這個 timer。 HTML <div cla...

鐵人賽 Modern Web DAY 28

達標好文 技術 【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法

在製作網頁時很常遇到,網站內需要嵌入 Youtube 影片,但影片無法跟隨螢幕尺寸縮放的問題。通常使用 Youtube 分享功能嵌入的 iframe 原始碼,已...

鐵人賽 Modern Web DAY 28

達標好文 技術 Box-sizing - 金魚都能懂的CSS必學屬性

Box-sizing 這個屬性是一個新時代的屬性,也是目前這時代網頁入門必備的一項常識,box-sizing 的作用是控制 width 與 height 作用的...

鐵人賽 Modern Web DAY 27

技術 margin & padding - 金魚都能懂的CSS必學屬性

margin 與 padding 這兩個屬性應該是所有新手必學的兩大屬性,也是網頁入門必備的一項常識,margin 與 padding 分別控制物件的外部距離與...

鐵人賽 Software Development DAY 28

技術 誰說低代碼平台上就不能寫自己的CSS

都已經千辛萬苦的學會CSS了,不用用這個技能不是就太浪費了嗎? 對,本篇文就是要來看看怎麼在低代碼平台上用CSS。 工具 好用的IDE (我用Visual S...

鐵人賽 自我挑戰組 DAY 27
網頁學習雜記 系列 第 27

技術 Day 27 | CSS Image Block Reveal Hover Effects

今天想要分享的是這個,記得我當時看到這個效果的時候覺得真的是炫炮過頭了,馬上整個影片看完做練習,做一做還邊想可以用什麼不一樣的方式做,結果我老師建議我可以用 b...

鐵人賽 Modern Web DAY 27
喪屍黑白切 系列 第 27

技術 Day 27 | 等待的時間不無聊 - loader

今天想要分享的是這一個 Youtube 影片做出來的等待畫面,我只有挑他的其中一個寫,其他可以看他影片做做看。 loader 是個在網頁 render 前的東西...

鐵人賽 Modern Web DAY 26

技術 min-width & max-width - 金魚都能懂的CSS必學屬性

min-width 與 max-width 這兩個屬性跟 min-height 與 max-height 其實就跟 width 還有 height 差不多,唯獨...

鐵人賽 Modern Web DAY 26
HTML 與 CSS 學習筆記 系列 第 26

技術 Day26 - HTML 與 CSS (8) - 背景圖片

背景圖片 background-image:使用 url(pic路徑) 來顯示圖片 background-image: url(./img/logo.p...

鐵人賽 Modern Web DAY 28
我說那個手機版 系列 第 28

技術 [Day 28] 關於 InAppBrowser

InAppBrowser 說在最前面的,以目前的 iOS / Android 生態來看,所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差...

鐵人賽 自我挑戰組 DAY 26
網頁學習雜記 系列 第 26

技術 Day 26 | Responsive Card Hover Effects

今天要分享的是這個,不過他影片中使用的方式我不是很喜歡,他是直接寫死了物件的高度,但如果想要做到這個效果好像怎麼樣都得寫死一個東西,加上我發現 height 設...

鐵人賽 Modern Web DAY 26
喪屍黑白切 系列 第 26

技術 Day 26 | 打破規則,勇敢創新 - 破格式設計

今天要講的是金魚都能懂的網頁切版 : 破格式設計 NO011,破格式的設計在很多樣版網站可以見到,近期工作中也有接觸到,滿多時候就是拿來製造兩物件重疊的效果。...

鐵人賽 Modern Web DAY 26

技術 【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學

by CSS Animations- Guide to Cubic Bezier Curves 關於 CSS Animation 的基本介紹與使用方法,筆者推薦...

鐵人賽 Modern Web DAY 25

技術 width & height - 金魚都能懂的CSS必學屬性

width 與 height 這兩個屬性說是必學可是完全名符其實,每個頁面中一定都會使用到這兩個屬性,width 與 height 主要分別是設定頁面中物件的寬...

鐵人賽 Modern Web DAY 25
HTML 與 CSS 學習筆記 系列 第 25

技術 Day25 - CSS (6) - 漸層、權重

漸層 linear-gradient:漸層屬性,可以從 background 套用 方向:預設未寫為上至下 to bottom,也可寫成角度,從上以 0...

鐵人賽 自我挑戰組 DAY 25
網頁學習雜記 系列 第 25

技術 Day 25 | 變換背景 - Pure CSS

今天來分享一下 hover 物件時更換背景顏色的方法,我是看到這個 Youtube 影片,但我的寫法跟他的沒有完全一樣,可以兩邊都看看比較一下,當然也有不同種寫...

鐵人賽 Modern Web DAY 25

達標好文 技術 【Day 25】HTML Table Responsive (RWD) 的幾種方法分享

Visual examples of those four possibilities. by CSS-TRICKS 在製作表格時,最常遇到的狀況就是需要在各種...

鐵人賽 Modern Web DAY 25
喪屍黑白切 系列 第 25

技術 Day 25 | 不是古代的那種翻牌 - 翻牌效果

今天想要來講一下好像是滿常見到的翻牌效果,不想一下提供太多資訊的時候,這算是一個還不錯的方式,讓使用者 hover 到物件上時,再顯示出更多的訊息,還能讓別人有...

鐵人賽 Modern Web DAY 30
重新認識 Flex 和 Grid 系列 第 30

技術 [Day30] grid z-index 分層 / order 順序

終於也進入到尾聲了,最後一章要介紹網格項目的分層與順序。 z-index 分層 .item { z-index: auto | <interger...

鐵人賽 Modern Web DAY 26
重新認識 Flex 和 Grid 系列 第 26

技術 [Day26] Grid 網格項目

當瞭解完網格容器的屬性後,接下來要進入網格項目的部分,如果你還不了解什麼是網格容器及網格環境,可以回顧地ˊ十七天Grid 基本認識及第十八天Grid 網格容器...

鐵人賽 Modern Web DAY 25
重新認識 Flex 和 Grid 系列 第 25

技術 [Day25] grid 容器對齊屬性

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行"...

鐵人賽 Modern Web DAY 24

技術 [CSS] Animation 動畫

基本的 樣式設定 / 排版定位 都已經難不倒你了嗎?那就接著要來玩玩動態的部分啦!一開始覺得寫 CSS 能讓醜醜的網頁變漂亮很療癒,而接觸了 CSS 的動畫控制...

鐵人賽 Modern Web DAY 24
HTML 與 CSS 學習筆記 系列 第 24

技術 Day24 - CSS (5) - 圓弧、陰影

圓弧 border-radius:圓弧屬性,可設定 4 組,可以為 px 或是 % ,從左上開始,順時鐘為左上、右上、右下、左下 設定 1 個:代表全部通...

鐵人賽 Modern Web DAY 24

技術 list-style - 金魚都能懂的CSS必學屬性

list-style 的作用是設定清單前方的圖示,網頁中清單類型的資料可說是固定項目了,每個頁面中都或多或少的可以看到一些清單類型的資料,只是在這些清單的視覺外...

鐵人賽 Modern Web DAY 24

技術 【Day 24】成為網頁設計師後,我再也不畫表格了! - Word to HTML 線上工具

不知道各位網頁設計師,在製作設計稿的時候,有沒有遇過需要設計的表格內容超級多!類似部門人員介紹或人事績效考核的超長表格XD By 攝圖網 - 人事行政主管绩效考...

鐵人賽 自我挑戰組 DAY 24
網頁學習雜記 系列 第 24

技術 Day 24 | 來做個搖擺的球吧

今天就來講一下 transform-origin 的應用吧!來做一個搖擺的球,會長這樣 HTML簡單的一行 span <span></span...

技術 Day40 網頁前端-持續練習(終極試煉)

Day40 終極試煉 簡單小語 終極試煉拖了好久啊啊啊,工作忙,家裡忙,又有連假,一切都是藉口,小魯是不會多說的,寫這篇心得當下可是在花蓮民宿裡苦苦地寫,為的...