標籤彙整:css

clock

REF: JavaScript30

先備知識

原理

  • transform: rotate:指針旋轉
  • transition-timing-function:指針走動效果
  • Date():指針依照現在時間旋轉到適當位置

範例

.clock
 .clock-face
  .hand.hour-hand
  .hand.min-hand
  .hand.second-hand
html
 background: #FFFFF0
 font-family: 'helvetica neue'
 text-align: center
 font-size: 10px

body
 font-size: 2rem
 display: flex
 flex: 1
 min-height: 100vh
 align-items: center

.clock
 width: 30rem
 height: 30rem
 border: 8px solid #086788
 border-radius: 50%
 margin: 50px auto
 position: relative
 padding: 2rem
 box-shadow: 3px 3px 5px #ccc

.clock-face
 position: relative
 width: 100%
 height: 100%
 transform: translateY(-3px)
 //account for the height of the clock hands

.hand
 width: 50%
 height: 6px
 background: #2EC4B6
 position: absolute
 top: 50%
 //指針以右邊為基點旋轉
 transform-origin: 100%
 //default: 50% 基點為中心
 transform: rotate(90deg)
 transition: all 0.05s
 transition-timing-function: cubic-bezier(0, 1.03, 0, 2.09)
const secondHand=document.querySelector(".second-hand");
const minHand=document.querySelector(".min-hand");
const hourHand=document.querySelector(".hour-hand");

function setDate(){
 
 const now=new Date();
 const seconds=now.getSeconds();
 const secondsDegrees=((seconds/60)*360)+90; //offset default 90 deg
 
 const mins=now.getMinutes();
 const minsDegrees=((mins/60)*360)+90;
 
 const hours=now.getHours();
 const hoursDegrees=((hours/12)*360)+90;
 
 secondHand.style.transform=`rotate(${secondsDegrees}deg)`;
 minHand.style.transform=`rotate(${minsDegrees}deg)`;
 hourHand.style.transform=`rotate(${hoursDegrees}deg)`;
 
 console.log(seconds);
 
 //59-60時指針會快速繞一圈(角度計算的關係),所以停止transition
 if(seconds==59){
 secondHand.style.transition="0s";
 }
 if(mins==59){
 minHand.style.transition="0s";
 }
 if(hours==11){
 hourHand.style.transition="0s";
 }
 
}

//run every second
setInterval(setDate, 1000);

Display

CODEPEN

Bootstrap格線系統

中文說明手冊

結構

Bootstrap的格線系統,把寬度切成12分,用橫向的row裝縱向的col,指定每個col佔12分長的多少分。

尺寸關鍵字

  • xs:超小螢幕 < 768px
  • sm:小螢幕 > 768px
  • md:中螢幕 > 992px
  • lg:大螢幕 > 1200px
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-lg-6.col-md-7.col-sm-4
 .col-lg-6.col-md-5.col-sm-8

//用row包覆column
//col可以向上繼承,無法向下繼承
//只指定lg → 不會套用到xs
//只指定xs → 可以套用到lg

顯示與隱藏

指定col在特定元素下顯示或隱藏

  • visible-尺寸:只在該尺寸顯示
  • hidden-尺寸:只在該尺寸隱藏
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-xs-12.visible-xs
  h3 XS(超小螢幕<768px)
 .col-xs-12.visible-sm
  h3 SM(小螢幕>768px)
 .col-xs-12.visible-md
  h3 MD(中螢幕>992px)
 .col-xs-12.visible-lg
  h3 LG(大螢幕>1200px)

偏移

col-尺寸-offset-欄位數:指定左側向右偏移的大小

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-sm-8.col-sm-offset-4
  h3 偏移的區塊
  p 使用col-尺寸-offset-欄位數來指定左側偏移的大小

Display

CODEPEN

Bootstrap 基本class

表頭

  • jumbotron
    頁面表頭
    功能:内元素放大
  • container
    排版使用
    加上自適應内距
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.jumbotron
 .container
  h1 Hello Bootstrap!
  p Bootstrap是很多人使用的網頁模板,裡面有很多別人寫好的現成css資源,也有用來排版很方便的網格系統
  a.btn.btn-primary(href="http://kkbruce.tw/bs3" target="_blank") 了解更多(中文説明文件)

Display

標題與圖片

  • img-responsive
    自適應圖片大小
  • page-header
    標題用,上下留margin,下面再留一條淺淺的灰線
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 寫完HTML就可以刻完網頁的設計哲學
p 當時間很趕/或是原本對設計版面沒有什麼概念的時候,就會希望,如果元件都幫我刻好好的是不是就可以刻完html網頁就做完了?
img.img-responsive(src="https://www.gaslampmedia.com/media/bootstrap.png")

Display

按鈕

  • btn
    使成為按鈕
  • btn-default,btn-primary,btn-danger,btn-success,btn-warning
    按鈕顏色
  • btn-lg,btn-xs
    按鈕大小
  • btn-grounp
    按鈕群組化
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 按鈕的大小與調整
  p
   .btn.btn-default 前往報名課程
   .btn.btn-primary 主要的按鈕
   .btn.btn-danger.btn-lg 危險按鈕
   .btn.btn-warning 警告
   .btn.btn-success.btn-xs 成功按鈕
   br
   br
   .btn-group
    .btn.btn-default 設定
    .btn.btn-primary 帳號
    .btn.btn-default 課程
    .btn.btn-default 購買資訊
    .btn.btn-default 前往報名課程
    .btn.btn-default 前往報名課程

Display

麵包屑導覽列

  • breadcrumb
    麵包屑導覽頁,方便呈現分類樹資訊
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 麵包屑導覽列
 ul.breadcrumb
 li 
  a 動態網頁課程
 li 
  a Bootstrap介紹
 li 
  a 第一個範例

Display

清單

  • ul.list-group
  • li.list-group-item
    清單
  • span.badge
    清單項目徽章
  • li.active
    清單亮起來
  • li.disabled 禁用的灰色
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 清單練習
ul.list-group
 li.list-group-item list-group 清單
  span.badge list-group-item 裡面的項目
 li.list-group-item.disabled span.badge 右方小提醒
  span.badge disabled禁用的灰色
 li.list-group-item.active breadcrumn 麵包屑導覽列 
  span.badge active亮起來
 li.list-group-item.list-group-item-success .list-group-item-success成功的綠

Display

表格

  • table
    處理表格樣式
  • table-striped
    條紋式的row
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 表格練習
 table.table.table-striped
  thead
  tr
   th 項目
   th 優點
   th 缺點
  tr
   th 速度
   th 可以很快建立網頁
   th 看起來大同小異
  tr
   th 樣式
   th 基本視覺不會太離譜
   th 深入改需要功力
  tr
   th 適合情境
   th 沒時間的時候
   th 獨特設計,動態網頁

Display

well:文字灰框

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 好用的Bootstrap
 p.well 省時又方便的Bootstrap,是由兩個twitter員工開發的框架

Display

練習網址

CODEPEN

 

直接在文章編輯器寫CSS,JS的方法

方法

  1. 文章編輯→點選編輯視窗右上角的「文字」標籤
  2. 找到要套用CSS/JS目標元素HTML碼,上方鍵入<style>標籤,將CSS碼貼上去,並且刪除所有空白行與註解
  3. 在目標元素HTML碼下方鍵入<script>標籤,將原生JS碼貼上去,並且刪除所有空白行與註解

jQuery解法

上述方法可以成功執行CSS/原生JS碼的情況,但JS使用到jQuery的情況下,就要用特殊解法

 

wordpress本身就會引jQuery,所以撰寫時可以省去加入src

 

//不用寫這個
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 

WordPress的文字編輯過濾器會預設編成文章<p>,所以直接使用jQuery在網頁顯示上會變成這種情況

 

<p>
 <script>
 //jQuery程式碼
 </script>
</p>
解決:打開佈景主題的編輯器Editor,在functions.php貼上這一段碼,取消文字編輯過濾器,然後我們就可以得到正常的 script tag

 

/*Toggle wpautop*/
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
如果佈景主題只找到style.css,表示此佈景為子佈景,修改母佈景的function.php後再套用回原來的子佈景就可以執行!

 

接下來,回到文章,在jQuery外面包一層ready(),變成這樣

 

<script>
jQuery(document).ready(function( $ ){
//jQuery程式碼
});
</script>
刪除 jQuery 程式碼所有空白行,註解,並且確保程式碼簡潔
大功告成!

 

沒有使用外掛寫jQuery的範例

Image Slider

結構

  1. 相框slider:overflow: hidden
  2. 相片平放卷軸holder:橫長結構,長度必須包覆所有圖片
  3. 相片
  4. 動畫:transform: translateX(負的相片寬度)
.slider
 .holder
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
$s-width: 1200px
$s-height: 600px

.slider
  width: $s-width
  height: $s-height
  border: 1px solid #000
  overflow: hidden
  
.holder
  width: $s-width*8
  position: relative
  left: 0
  animation: scroller 20s infinite
  
.pic
  width: $s-width
  height: $s-height
  float: left
  position: relative
  overflow: hidden
  background-position: center center
  background-size: cover
  &:nth-child(1)
    background-image: url("https://goo.gl/ro6eWb")
  &:nth-child(2)
    background-image: url("https://goo.gl/kgH2tw")
  &:nth-child(3)
    background-image: url("https://goo.gl/0dx76j")
  &:nth-child(4)
    background-image: url("https://goo.gl/7wvNvb")
  &:nth-child(5)
    background-image: url("https://goo.gl/3940uB")
  &:nth-child(6)
    background-image: url("https://goo.gl/rmI6Fy")
  &:nth-child(7)
    background-image: url("https://goo.gl/z9G2Wb")
  &:nth-child(8)
    background-image: url("https://goo.gl/QEG93R")

@keyframes scroller
  12.5%
    transform: translateX(0)
  25%
    transform: translateX(-$s-width)
  37.5%
    transform: translateX(-$s-width*2)
  50%
    transform: translateX(-$s-width*3)
  62.5%
    transform: translateX(-$s-width*4)
  75%
    transform: translateX(-$s-width*5)
  87.5%
    transform: translateX(-$s-width*6)
  100%
    transform: translateX(-$s-width*7)

Display

Animated Progress Circle

static progress circle

 SVG屬性解説

stroke-dasharray: 實線長度, 空白長度

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  //stroke-dasharray也可以寫在html的line屬性裡面
  stroke-dasharray: 6,15

Display
長度6長度6長度6長度6長度6長度15長度15長度15長度15

dash-strokearray也可以指定%數,100%等於整條線,所以
line
 stroke: black
 dash-strokearray: 100% 0%
 //這樣可以得到一條黑線
line
 stroke: black
 dash-strokearray: 0% 100%
 //這樣可以得到一條看不見的線

stroke-dashoffset: 偏移開始的位置

line裡面偏移數字等於x的減項

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  stroke-dasharray: 6,15
  //向左縮了5
  //等於x1-5,x2-5
  stroke-dashoffset: 5

Display
↓ 向左縮了5,等於x1-5,x2-5

進階:圓形版

stroke-dashedarray

圓形的stroke-dashedarray 100%不是整條圓周,整條圓周的%算法是

//等於圓周長*100%
svg半徑(r)*2*3.14*100%

所以

svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=40)
svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: calc(40* 3.14 * 2 * 100%)
  //100%加不加都沒差,反正圓周總長度=圓周長

可以得到一個圓框

svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: 0% calc(40* 3.14 * 2 * 100%)

則可以得到一個透明圓框

circle: stroke-dashoffset

圓形預設由正右方往下畫出來的,所以要往上偏移25%的長度

//往上偏移25%的長度
svg半徑(r)*2*3.14*25%

動態圓形百分比

注意事項

  • 圓形從正右邊開始往下畫,不是從正上方開始往下,所以要用stroke-dashoffset偏移適當距離
  • 半徑×6.28×指定%數=實線長度,其餘部分為虛線長度
  • 動畫起始値為實線0,虛線長等於圓周長
svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=20)
  text(x=-11,y=4) 80%
svg
  border: 1px solid #000
  width: 300px
  circle
    fill: none
    stroke: #90a955
    animation: apc 5s infinite
  text
    font-size: 10px
    fill: #90a955
    
  
@keyframes apc
  0%
    //動畫裡面不知為何不能用calc
    //圓周長20*2*3.14=125.6
    //80%圓周長125.6*0.8=100.48
    //20%圓周長125.6*0.2=25.12
    //往上偏移25%:125.6*25%=31.4
    stroke-dasharray: 0,125.6
    stroke-dashoffset: 31.4
  100%
    stroke-dasharray: 100.48,25.12
    stroke-dashoffset: 31.4

Display
80%

media

讓不同寬度尺寸套用不同CSS

範例

.container
.container
  .block.a AAAA
  .block.b BBB
  .block.c CC
  .block.d DD
  .block.e EE
  .block.f FF
  .block.g GGGG
.container
 font-size: 0
 box-sizing: border-box

.block
 height: 200px
 text-align: center
 box-sizing: border-box
 border: 3px solid #fff
 font-size: 40px
 display: inline-block
 padding-top: 50px

.a
 width: 100%
 background-color: #00796B

.b
 width: 70%
 background-color: #B2DFDB
.c
 width: 30%
 background-color: #FFFFFF

.d
 width: 30%
 background-color: #00BCD4

.e
 width: 35%
 background-color: #BDBDBD

.f
width: 35%
background-color: #757575

.g
 width: 100%
 background-color: #009688

//以螢幕為條件,寬度800以下時套用這組css
@media screen and (max-width: 800px)
 .b
   width: 100%
 .c,.d,.e,.f
   width: 50%

//以螢幕為條件,寬度400以下時套用這組css
@media screen and (max-width: 400px)
 .b,.c,.e,.d,.f
   width: 100%

Display

PC:1200px

AAAA
BBB
CC
DD
EE
FF
GGGG

TABLET:800px

AAAA
BBB
CC
DD
EE
FF
GGGG

SMARTPHONE:400px

AAAA
BBB
CC
DD
EE
FF
GGGG

消除切版間隙

切版常見問題

區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來

.container
 .a width 70%
 .b height 30%
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955

.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)

.a
 width: 70%

.b
 width: 30% 
Display
width 70%
height 30%

解決方法

  1. 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
  2. display: inline-block,元素水平排列。
    詳細請看這篇文章
  3. box-sizing: border-box→外框框線尺寸包在框元素之内。
    詳細請看這篇文章
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955
 // 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
 font-size: 0px
.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)
 font-size: 18.4px
 // 3 外框框線尺寸包在框元素之内
 box-sizing: border-box
 // 2 元素水平排列
 display: inline-block
.a
 width: 70%
.b
 width: 30%     
Display
width 70%
height 30%