【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: 1px solid #000
 background: radial-gradient(Teal 49.5%, transparent 50%)//預留0.5%的漸層空間

Display

【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

 //原本的radio設不顯示
 input[type="radio"]
  display: none
 
 //這邊寫選取後的效果
 input[type="radio"]:checked+.radio-widget
  border-color: #50BBB6
  background: radial-gradient(#50BBB6 44%, transparent 50%)
  
.radio-widget
 width: 20px
 height: 20px
 border: 1px solid #eee
 border-radius: 100%
 position: relative
 margin-right: 5px
 background: radial-gradient(#eee 20%, #fff 25%)
 

.radio-widget, input
 display: inline-block
 vertical-align: top

【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: 5px
  background-color: #fff
  border: 1px solid #eee
  border-radius: 4px
  text-align: center
  &:after
   content: "✔︎"
   color: #fff
 
 //原本的checkbox設不顯示
 input[type="checkbox"]
  display: none

 //選取後的樣式
 input[type="checkbox"]:checked+.checkbox-widget          
  background-color: #50BBB6 
  border-color: #50BBB6

【CSS】smooth

説明

滑順滾動的屬性,讓網頁內引導<href=”#id”>的動作可以滑順地跳下來

瀏覽器支援度→Can I Use …

範例

方法一:指定CSS

a(href="#title")
 button click me

//這邊填充很多個br
h1#title title
*
 scroll-behavior: smooth

Display

方法二:指定JavaScript

button(onclick="scrollIt()") click me
function scrollIt(){
 
 window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth"
 });

 
}

Display

【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

【JavaScript】smalot-bootstrap-datetimepicker

説明

這是一套基於BS的函式庫,可以快速製作時間選擇器的小元件。

【必裝的函式庫】

屬性介紹

format【字串形式】

意義
p am / pm
P AM / PM
s 秒(沒有0開頭)
ss 秒(有0開頭)
i 分(沒有0開頭)
ii 分(有0開頭)
h 時(沒有0開頭,24小時制)
hh 時(有0開頭,24小時制)
H 時(沒有0開頭,12小時制)
HH 時(沒有0開頭,12小時制)
d 日期(沒有0開頭)
dd 日期(有0開頭)
m 數字月份(沒有0開頭)
mm 數字月份(有0開頭)
M 英文月份簡寫
MM 英文月份全名
yy 西元年(末二位數)
yyyy 西元年(四位數)

StartView / MinView 【數字形式】

在「只選擇月份」或是「只選擇日期」的情況下,預設的介面卻可以指定到某天的分鐘,會不太適合。
可以透過調整這2個參數達成更精準的控制

  • StartView:一開始選擇時間的介面〔預設:2〕
  • MinView:最後選擇時間的介面〔預設:0〕
意義
0 【選分鐘】hour view
1 【選小時】day view
2 【選日期】month view
3 【選月份】year view
4 【選年份】10-year view

範例:選擇日期

.input-append.date.form_datetime(data-view='hour')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11-15 16:35')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='hour']").datetimepicker({
 format: "yyyy-mm-dd", //這邊可以自訂時間表示的格式
 autoclose: true,
 minView: 3
 });

範例:選擇時與分

.input-append.date.form_datetime(data-view='hour')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11-15 16:35')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='hour']").datetimepicker({
 format: "yyyy-mm-dd hh:ii",
 autoclose: true
 });

範例:選擇月份

.input-append.date.form_datetime(data-view='year')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='year']").datetimepicker({
 format: "yyyy-mm",
 autoclose: true,
 startView: 4,
 minView: 3
 });

Display

CODEPEN

 

 

【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)

選單内部

選單内部

選單内部