คอร์ส IT พื้นฐาน CSS 026_การแสดงผล, การมองเห็น, เอฟเฟกต์

1
ซ่อนอิลิเมนต์ ทำให้มองไม่เห็นในหน้าและไม่ครอบครองพื้นที่ ไม่มีผลต่อเค้าโครง อิลิเมนต์จะไม่แสดงในหน้า

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">ข้อความทดสอบ</div>ABC123

1
แสดงอิลิเมนต์เป็นอิลิเมนต์แบบบล็อก แสดงในหน้าเป็นรูปแบบบล็อก ความกว้างเริ่มต้นคือ 100% ของคอนเทนเนอร์หลัก
2
อิลิเมนต์บล็อกคืออิลิเมนต์ที่ครอบครองความกว้างทั้งหมด มีการขึ้นบรรทัดใหม่ก่อนและหลัง

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">ทดสอบไฮเปอร์ลิงก์</a>
2
    <br>
3
    <a class="base" href="">ทดสอบไฮเปอร์ลิงก์</a>

1
แสดงอิลิเมนต์เป็นอิลิเมนต์แบบอินไลน์ อิลิเมนต์แสดงในบรรทัดเดียวกัน ไม่ครอบครองทั้งบรรทัด ความกว้างถูกกำหนดโดยเนื้อหา
2
อิลิเมนต์อินไลน์ต้องการเพียงความกว้างที่จำเป็นเท่านั้นและไม่บังคับขึ้นบรรทัดใหม่

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">ทดสอบย่อหน้า</p>
2
    <p class="base">ทดสอบย่อหน้า</p>

1
แสดงอิลิเมนต์เป็นอิลิเมนต์แบบอินไลน์-บล็อก อิลิเมนต์แสดงในบรรทัดเดียวกัน แต่สามารถตั้งค่าคุณสมบัติของอิลิเมนต์บล็อกเช่น ความกว้าง ความสูง เป็นต้น

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">ทดสอบย่อหน้า</p>
2
    <p class="example1">ทดสอบย่อหน้า</p>
3
    <p class="example2">ทดสอบย่อหน้า</p>

1
ตั้งค่าให้อิลิเมนต์มองเห็นได้

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">ข้อความทดสอบ</div>ABC123

1
ตั้งค่าให้อิลิเมนต์มองไม่เห็น แต่อิลิเมนต์ที่ซ่อนยังคงครอบครองพื้นที่เท่ากับก่อนที่จะถูกซ่อน กล่าวคือ แม้อิลิเมนต์ถูกซ่อน แต่ยังคงมีผลต่อเค้าโครง

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">ข้อความทดสอบ</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* ความโปร่งใส 50% */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px ออฟเซ็ตแนวนอน, 5px ออฟเซ็ตแนวตั้ง, 5px รัศมีการเบลอ, สี rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">ข้อความทดสอบ</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* การไล่ระดับสีจากบนลงล่าง แดงไปน้ำเงิน */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* การไล่ระดับสีแบบวงกลม แดงไปน้ำเงิน */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* เลื่อนแนวนอน 50px, เลื่อนแนวตั้ง 20px */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* ปรับขนาดอิลิเมนต์เป็น 0.5 เท่า */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* หมุนตามเข็มนาฬิกา 45 องศา */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* เอียงแนวนอน 50 องศา, เอียงแนวตั้ง 20 องศา */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>