iT邦幫忙

scss相關文章
共有 105 則文章
鐵人賽 自我挑戰組 DAY 19

技術 第 19 集:Bootstrap 客製化 Sass 必備知識(下)

此篇接續客製化 sass 基礎語法以及觀念下集,尚未觀看上集可以先看完再來看下集。 Operators 運算 介紹 sass 原生的 運算 功能,以往 c...

鐵人賽 自我挑戰組 DAY 18

技術 第 18 集:Bootstrap 客製化 Sass 必備知識(上)

此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。 編譯 scss 註解有分為 會被編譯、不會被編譯 兩種。 寫法:// // 不...

鐵人賽 Modern Web DAY 15

技術 #14-撒花~Button慶祝動態自己來!~ (JS)

敝人很常踩到詐騙網站,第一屏就是一個慶祝的小動畫,恭喜我中獎(好想中威力彩啊) 網頁也很常有這種獎勵使用者的小動畫,譬如說送出一個訂單、或是幫忙寫了一個評價,我...

鐵人賽 Modern Web DAY 16

技術 #15- 滾起來!頁面動態進度條(JS算網頁長度)

進度條一般都是搭配文章使用,主要是告訴使用者目前閱讀到哪裡~這是我自己非常喜歡的網頁設計,讓你可以預設自己閱讀的進度,安排自己時間~(太長就快逃啊!) 看到了這...

鐵人賽 自我挑戰組 DAY 16

技術 第 16 集:Bootstrap 客製化 Sass 架構實戰範例

此篇會用三個實戰範例來當作做 Sass 架構介紹的結尾。 閱讀此篇內容前,建議先閱讀過前兩篇 Sass 架構: 第 14 集:Bootstrap 客製化...

鐵人賽 自我挑戰組 DAY 14

技術 第 14 集:Bootstrap 客製化 Sass 原始碼架構 import 路徑

此篇會介紹 Bootstrap 客製化 sass 原始碼架構,著重在如何使用原始碼來客製化自己的 Bootstrap 環境。 Sass 架構 官網推薦的客...

鐵人賽 Modern Web DAY 10

技術 #番外-讓你的CSS好讀起來!CSS命名方法論筆記

你有以下困擾嗎? 常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)還是常常寫了一個Class樣式後就被另一個Class樣式給覆...

鐵人賽 Modern Web DAY 9

技術 #8-選單華麗開起來!超簡單!(animation-delay)

昨天做完了會動的漢堡動畫傳送門今天來開關側邊欄吧!當然只要控制 width0 —> 100% 就可以讓側邊欄從左邊推進來,但今天來多一點點特效,先來看成果...

鐵人賽 Modern Web DAY 8

技術 #7-漢堡Menu動起來!(CSS就搞定啦!)

常常看到有些網站的漢堡選單用換圖的方式從 三 --> X會覺得有點可惜,其實漢堡選單的動態一樣CSS 就可以搞定!說不定會因為動得太可愛,讓大家一直點 (...

鐵人賽 Modern Web DAY 7

技術 #6-無限文字Logo跑馬燈 (不用JS! CSS Animation)

文字跑馬燈偶爾會在一些運動品牌或是潮牌看到,裝飾效果很棒又很炫,以前也是傻傻以為要用JS寫,偵測跑完了再放下一段......但在Youtube看到這個教學影片)...

鐵人賽 Modern Web DAY 6

技術 #5-中秋月亮暈起來!不規則Blob球球(CSS)

這一兩年很常在網頁設計中看到這種不規則的小東西出現,甚至還會像波浪一樣動。之前傻傻地用Svg做,然後一直換path,結果效能不太好。上網一查發現其實只要用bor...

鐵人賽 Modern Web DAY 5

技術 #4-圖片資訊藏起來!(Hover圖片&CSS Filter, Rotation)

前幾天都比較專注在文字上的CSS動態,今天就來看看圖片的吧!比起一堆文字,放圖片絕對能夠說個好故事!可是一張圖片不夠說明怎麼辦?那就在使用者Hover的時候才把...

鐵人賽 Modern Web DAY 4

技術 #3-打字特效炫起來!(CSS Animation)

昨天的第三個按鈕動態提案:文章傳送門 使用了CSS動態的動態的主菜——Animation。其實有很多特效,只要能夠拆解他的原理,就可以使用Animation達成...

鐵人賽 Modern Web DAY 3

技術 #2 - Button文字換起來! (CSS: 移動位置)

Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門今天也選了幾個button的特效,使用位移的方式,簡單使用CSS特性就可以。 先來看看成...

鐵人賽 Modern Web DAY 2

技術 #1-連結Hover動起來!(CSS 偽元素)

網站必備!連結動態 連結的Hover動態算是網頁動態最基本款,一個好的動態絕對可以幫網頁 點擊率(CTR) 加分。 (話說當時菜鳥的我根本不知道什麼是hover...

鐵人賽 自我挑戰組 DAY 1

技術 第 1 集:轉生到 Bootstrap 5 世界

30天轉生到 bootstrap 5 的意識界 類型 前端切版 / Sass / Bootstrap 5 這是一部講述 Bootstrap 5 世界的故事,...

鐵人賽 Modern Web DAY 1

技術 #0 - SCSS 不負責任快速入門

在鐵人賽正式開始之前,想先寫一下SCSS。因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ這一篇是簡易的SCSS小抄說明,主要針對文章中出現S...

技術 菜雞SCSS初體驗

還記得前兩週我都在學習如何手刻RWD網頁,不只有許多的HTML結構要去注意。就連CSS樣式也希望能使用模組化的方式建構。總之,就是要讓code不要太冗長不好管理...

技術 7+1 Sass 設計模式 DAY42

7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...

技術 BEM 基礎介紹 DAY41

BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...

技術 CSS 命名基礎介紹 DAY40

今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...

技術 OOCSS 基礎介紹 DAY39

OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...

技術 Sass/Css Smacss模組化 DAY38

這裡必須先介紹為什麼我們需要模組化呢?這裡舉一個例子我們尚未模組化的css //基本按鈕 .btn{ display: inline-block; wi...

技術 Sass/Css 設計模式(Smacss) DAY37

今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識 最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...

技術 Sass @mixin實現RWD DAY36

今天我們要來介紹Sass Mixin 與 content的搭配 來解決RWD Scss: @mixin pad{ @media(max-width: 7...

技術 Sass @mixin DAY35

今天要來介紹 Sass Mixin那究竟什麼是 Mixin呢??簡單來說Mixin能幫你記住 css技巧讓你不用再因回想原理而去google(把它想像成一個包裝...

技術 Sass @import DAY34

今天我們要來學習如何把Sass切分支許多檔案這樣會使我們比較容易管理 @import(匯入)可將 Scss檔案彙整成一支 css檔案簡單來說就是我們可以把 Sc...

技術 Sass 變數 與 darken , lighten DAY33

今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...

技術 Sass 連接詞(&)基礎介紹 DAY32

在介紹今天的內容之前推薦一個不錯的東西那就是 CodePen啦https://codepen.io/your-work可以先上撰寫程式碼連 Sass也支援 非常...

鐵人賽 Modern Web DAY 11

技術 SASS/SCSS 簡介

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...