【CSS】Color Name

REF: W3Schools Color Name HEX Display White #FFFFFF Ivory #FFFFF0 LightYellow #FFFFE0 Yellow #FFFF00 Snow #FFFAFA FloralWhite #FFFAF0 LemonChiffon #FFFACD Cornsilk #FFF8DC SeaShell #FFF5EE LavenderBlush #FFF0F5 PapayaWhip #FFEFD5 BlanchedAlmond #FFEBCD MistyRose #FFE4E1 Bisque #FFE4C4 Moccasin #FFE4B5 NavajoWhite #FFDEAD PeachPuff #FFDAB9 Gold #FFD700 Pink #FFC0CB LightPink #FFB6C1 Orange #FFA500 LightSalmon #FFA07A DarkOrange #FF8C00 Coral #FF7F50 HotPink […]

【CSS】outline

説明 outline位在border外面 .box .box width: 300px height: 200px background-color: mistyrose border: 2px solid hotpink outline: 1px solid red Display . FireFox的outline bug 如果裡面的東西超出box的話,outline也會被撐開 ※其他瀏覽器不會有這個問題 .box  .inner .box width: 300px height: 200px background-color: mistyrose border: 2px solid hotpink outline: 1px solid red .inner background-color: moccasin height: 300px width: 100px  Display 解決方法 改用box-shadow做出outline的效果 .box .inner .box width: […]

【CSS】漸層色塊

漸層原理説明 撰寫漸層時,要指定多組參數。每一組參數要有〖顏色〗與〖%數〗 .box .box width: 500px height: 200px //left: 指定〖從左〗開始漸層 background: linear-gradient(left, DarkGreen 20%, MediumSeaGreen 70%) ▼示意圖 第1組參數:〖起始色〗深綠色、〖%數〗20% 0%~20% →深綠色純色區 第2組參數:〖終色〗淺綠色、〖%數〗70% 20%~70%→漸層區域 70%~100%→淺綠色純色區 色塊 漸層區的定義是「第1個%」與「第2個%」之間的區塊, 所以如果「第2個%」指定跟「第1個%」一樣的數字,就無法產生漸層區,會形成色塊。 線性漸層色塊 .lg-box .lg-box width: 300px height: 100px border: 1px solid #000 background: linear-gradient(Left, Teal 50%, transparent 50%) Display 圓形漸層色塊 圓形漸層如果參數指定的剛剛好一樣,會有顏色轉換處會有鋸齒產生,所以需要預留數%的漸層空間。 .rd-box .rd-box width: 200px height: 200px border-radius: 100% border: […]

【CSS】radio style

説明 自由撰寫radio input的樣式,但是保有 checked 的功能 【架構】 <label>裡面要有 2 個東西:<input type=”radio”>、<div class=”radio-widget”> ※這樣點到label裡面任何一處,<input type=”radio”>都會被觸發 radio-widget是假的radio,在〔.radio-widget〕做出勾選前的樣式 在〔input[type=”radio”]:checked+.radio-widget〕撰寫勾選後的樣式 參考:input label 應用、漸層色塊 衍生:checkbox style 範例 label.radio-label input(type=”radio” name=”rd” id=”rd1″ value=”1″ checked) .radio-widget | option 1 label.radio-label input(type=”radio” name=”rd” id=”rd2″ value=”2″ checked) .radio-widget | option 2 label.radio-label input(type=”radio” name=”rd” id=”rd3″ value=”3″ checked) .radio-widget | option 3 .radio-label margin: 0px 5px […]

【CSS】checkbox style

説明 自由撰寫checkbox的樣式,但是保有 checked 的功能 【架構】 <label>裡面要有 2 個東西:<input type=”checkbox”>、<div class=”checkbox-widget”> ※這樣點到label裡面任何一處,<input type=”checkbox”>都會被觸發 checkbox-widget是假的checkbox,在〔.checkbox-widget〕做出勾選前的樣式 在〔input[type=”checkbox”]:checked+.checkbox-widget〕撰寫勾選後的樣式 參考:input label 應用 衍生:radio style 範例 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 1 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 2 label.checkbox-label input(type=”checkbox” value=”1″) .checkbox-widget | checkbox 3 .checkbox-label .checkbox-widget, input display: inline-block vertical-align: top //在這裡刻出自訂樣式的checkbox .checkbox-widget width: 20px height: 20px margin-right: […]

【CSS】smooth

説明 滑順滾動的屬性,讓網頁內引導<href=”#id”>的動作可以滑順地跳下來 瀏覽器支援度→Can I Use … 範例 方法一:指定CSS a(href=”#title”) button click me //這邊填充很多個br h1#title title * scroll-behavior: smooth Display click me 方法二:指定JavaScript button(onclick=”scrollIt()”) click me function scrollIt(){ window.scroll({ top: 0, left: 0, behavior: “smooth” }); } Display click me

【CSS】border-collapse 表格消除空隙

情況 table 預設的 style 方格與方格之間會有空隙 (在table, td, th都有設定border的情況下會很明顯) 解決:border-collapse table tr th Items th Price tr td Apple td $10 tr td Orange td $15 table, td, th border: 1px solid black table border-collapse: collapse Display 沒有加border-collapse的情況 Items Price Apple $10 Orange $15 有使用border-collapse的情況 Items Price Apple $10 Orange $15

【CSS】height transition

説明 CSS展開動畫:點選收起來的選單→觸發動作開啓選單 開啓狀態下的選單區塊,高度寫inherit的話,無法完成動態效果,所以要用max-height的方式完成 .outer 收合的選單 (hover me) .inner p 選單内部 p 選單内部 p 選單内部 .outer background-color: #E7F2F1 display: inline-block padding: 10px &:hover .inner max-height: 150px //不用精準設定到元素高度,元素只會展開到他自己的高度。數字可以抓大一點,數字越大展開的速率越快。 .inner background-color: #439E96 padding: 0px 10px margin: 5px max-height: 0 overflow: hidden transition-duration: 0.5s Display 收合的選單 (hover me) 選單内部 選單内部 選單内部

【CSS】z-index

條件 內元素絕對定位(所有) 外元素相對定位 目標元素指定index ※z-index的數值代表優先度。 數字大,表示優先顯示的強度越強(排在前面) 數字小,表示優先顯示的強度越低(隱藏在後面)←反向操作:設負數讓元素被蓋住 範例 沒有設index的情況下,HTML下面的元素會蓋掉上面的元素 .box1 .box2 body position: relative //外元素相對定位 .box1,.box2 width: 200px height: 200px border: 1px solid #eee .box1 background-color: #73c6a8 position: absolute //內元素絕對定位 .box2 background-color: #73c0c6 position: absolute //內元素絕對定位 margin-top: 50px margin-left: 50px Display . .             綠色方塊的HTML在上面,藍色方塊的HTML在下面。 所以藍色方塊優先顯示,蓋掉綠色方塊 設定z-index,優先顯示目標元素 .box1 .box2 body […]