CSS-刻出一個timeline

Posted on 本文总阅读量次

CSS-刻出一個timeline

概念

  • 設定一個最外層div空間
  • 直線：利用偽元素(Pseudo Element)」::after的繼承特性，會繼承原本元素的屬性，畫出一個與空間一樣高的元素。定義該偽元素的邊框，製作出直線的效果。並且運用絕對定位，讓直線可以定位在中間。
  • 時間文字：在卡片前後各自放上時間開始、結束時間的div空間
  • 時間圓圈：利用偽元素::before繪製出，以「時間文字」座位定位參考點，使用絕對定位讓兩這位置呈現水平對齊。
  • 卡片：最後再針對自己的喜好定義卡片的樣式
  • 若要製作出左右交叉的效果，再使用class分類針對左右交叉的卡片各自做定位定義
  • 最後在針對小螢幕，使用＠medis定義位置、樣式

實現

  • html佈局：參考要呈現畫面的效果，由上到下規劃好div空間

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="timeline-section">
        <div class="container left">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
    </div>

  • timeline-section
    因為最外層的timeline-section空間，將被用來作偽元素timeline的定位基準點，所以切記要定義position屬性

    1
    2
    3
    4
    .timeline-section{
        position: relative;
        background-color: #EDEEF0;
    }

  • timeline

    1. 使用偽元素::after，製作出一個timeline元素
    2. 其定位方式為絕對定位position: absolute，才可以製作出元素重疊的效果(畫面中呈現，timeline::after是重疊在timeline-section上方)
    3. 使用top、left、bottom、right定位
    4. 使用height: 100%，是強制它的高度跟一樣高
    5. 定義border，繪製出線條
    6. 因為我們運用這個偽元素只是要用邊框製造出線條，其中並不會放置內容物，所以content屬性定義為空
    7. 若想製作出實心效果，定義width為0;相反地，如果想要有空心效果，可以定義為其他數值，也可以定義background-color填充中間的色彩
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .timeline::after{
          position: absolute;
          top:0;
          height: 100%;
          left:50%;
          border:3px solid #56332e;
          content:'';
          width: 0px;
          background-color: #56332e;
          margin-left: -3px;
      }

  • time
    因為time會被內層元素用來做定位，所以切記要定義position屬性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .time{
        position: relative;
        width: 120px;
        font-weight: bolder;  
    }
    .time span,{
        color: #56332e;
        position: absolute;
        top:-10px;
    }

  • 時間圓圈

    1. 使用偽元素::before，製作出一個元素
    2. 其定位方式為絕對定位position: absolute，才可以製作出元素重疊的效果
    3. 為了確保出現在最上層，可以定義z軸
    4. 定義該空間的寬高
    5. 繪製該空間邊框border、圓角border-radius
    6. 因為我們運用這個偽元素只是要用邊框製造出線條，其中並不會放置內容物，所以content屬性定義為空
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .time span:before{
          position: absolute;   
          z-index: 1;
          width: 25px;
          height: 25px;
          border: 4px solid #56332e;
          border-radius: 50%;
          background-color: white;
          content:'';
      }

  • card
    依個人喜好，定義好卡片的樣式

    1
    2
    3
    4
    5
    6
    7
    .card{
        padding:20px 5px;
        background-color: #fff;
        border: none;
        color: #56332e;
        box-shadow: 0px 1px 15px rgba(86, 51, 46, 0.6);
    }

  • 左右交叉

  1. 額外在html中給予right、left類別
  2. 利用css選擇器，針對左右的卡片的內容物，給予不同的定義
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="timeline-section">
        <div class="container left">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
        <div class="container right">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.left .content{
    padding-right:15px;
    left:0;
}
.left .time{
    left:50%;
}
.left .time span:before{
    text-align: left;
    left: -30px;
}
.left .time span{
    left:18px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.right .content{
    padding-left:15px;
    left:50%;
}
.right .time{
    left: 50%;
}

.right .time span:before{
    text-align: right;
    left: 80px;
}

.right .time span {
    left:-92px;
}

  • 針對小螢幕做調整
    如果螢幕尺寸低於380px，就套用以下設定

註：如果針對「(max-width: 576px)」有額外定義，程式碼需寫在上方，數字越大，要先寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@media screen and (max-width: 380px){
    .timeline::after{
        left:60px;
    }
    #timeline-section .container{
        padding-left: 10px;
    }
    #timeline-section .left .content, #timeline-section .right .content{
        width: 70%;
        left:25%;
        text-align: left;
    }

    #timeline-section .left .time, #timeline-section .right .time{
        left:30px;
        right: 0;
        width: 10px;
        text-align: right;
        line-height: 15px;
        font-size: 12px;
    }
    #timeline-section .left .time span, #timeline-section .right .time span {
        left:-30px;
    }
    #timeline-section .right .time span:before,#timeline-section .left .time span:before{
        text-align: right;
        left: 40px;
    }
    #timeline-section .right .time span:before, #timeline-section .left .time span:before{
        content:'';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 3px solid #2B6073;
        border-radius: 50%;
        z-index: 1;
    }
}

成果

My Project-Profile-Programing section

CSS
© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量次
Theme by hiero