blackchainLogo

PRODUCTS

RESOURCES

COMPANY

Log In

CSS Reference

bcpay-phone

z-index point-icon

z-index เป็นการกำหนดเลเยอร์ให้กับ Element ต่างๆ

Element ที่มีค่า z-index มากกว่าจะอยู่ด้านหน้า Element ที่มี z-index ต่ำกว่าเสมอ

Note : ในการใช้งาน z-index จะต้องกำหนด position ร่วมด้วยทุกครั้ง

Default value : auto | 0

Syntax : z-index: auto | number | initial | inherit;

0
2
1
3

min-width point-icon

min-width เป็นการกำหนดความกว้างขั้นต่ำให้กับ Element

Note : วิธีนี้จะช่วยป้องกันไม่ให้ width มีขนาดเล็กกว่าค่าของ min-width

Default value : 0

Syntax : min-width : length | initial | inherit | percent;

w50px
w50px minW100px

min-height point-icon

min-height เป็นการกำหนดความสูงขั้นต่ำให้กับ Element

Note : วิธีนี้จะช่วยป้องกันไม่ให้ height มีขนาดเล็กกว่าค่าของ min-height

Default value : 0

Syntax : min-height : length | initial | inherit | percent;

h50px
h50px minH100px

max-width point-icon

max-width เป็นการกำหนดความกว้างสูงสุดให้กับ Element

Note : วิธีนี้จะช่วยป้องกันไม่ให้ width มีขนาดใหญ่กว่าค่าของ max-width

Default value : 0

Syntax : max-width : none | length | initial | inherit | percent;

w100px
w
100px maxW
50px

max-height point-icon

max-height เป็นการกำหนดความสูงสูงสุด ให้กับ Element

Note : วิธีนี้จะช่วยป้องกันไม่ให้ height มีขนาดใหญ่กว่าค่าของ max-height

Default value : 0

Syntax : max-height : none | length | initial | inherit | percent;

w100px
h
100px maxH
50px

opacity point-icon

opacity ใช้เพื่อกำหนดระดับความทึบแสงของ element มีค่า 0-1

Default value : 0

Syntax : opacity: number|initial|inherit;

opacity 1
opacity 0.5

list-style-type point-icon

list-style-type เป็นการระบุเครื่องหมายรายการของ list

Default value : disc (จุดทึบ)

Syntax : list-style-type: none | value;
Property Values เช่น circle (จุดโปร่ง), square (สี่เหลี่ยม)

  • disc
  • circle
  • square
  • upper-roman
  • lower-alpha

transition (Shorthand) point-icon

transition เป็นการกำหนดให้ Element มีการเปลี่ยนแปลงคุณสมบัติ เช่น :hover :focusได้อย่าง smoothly ตามระยะเวลาที่กำหนด

คุณสมบัติที่สามารถกำหนดใน transition มีดังนี้

  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Default value : none

Syntax : transition: transition-property transition-duration transition-timing-function transition-delay;

background-color 0.5s
none

transition-delay point-icon

transition-delay เป็นการกำหนดค่า delay (วินาที (s) หรือมิลลิวินาที (ms)) ในการเปลี่ยนแปลงคุณสมบัติ

Default value : 0s

Syntax : transition-delay: time | initial | inherit;

background-color 0.5s
delay 1s

transition-duration point-icon

transition-duration เป็นการกำหนดจำนวนวินาที (s) หรือมิลลิวินาที (ms) ในการเปลี่ยนแปลงคุณสมบัติตั้งแต่เริ่มจนเสร็จ ใช้เวลาเท่าไหร่

Default value : 0s

Syntax : transition-delay: time | initial | inherit;

duration 1s

transition-property point-icon

transition-property เป็นการกำหนดชื่อของคุณสมบัติที่จะให้มีผลกระทบของ effect transition ที่กำหนด

Note : ระบุ transition-duration ด้วยเสมอ มิฉะนั้นจะไม่มี effect เกิดขึ้น

Default value : all

Syntax : transition-property: none | all | property | initial | inherit;

property : background-color

transition-timing-function point-icon

transition-timing-function เป็นการกำหนดเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลง

Default value : ease

Syntax : transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

ease-in-out

cursor point-icon

cursor เป็นการกำหนดคุณสมบัติเคอร์เซอร์ของเมาส์ที่จะแสดงเมื่อชี้ไปที่ Element

Default value : auto

Syntax : cursor: value;
Property Valuesเช่น pointer (ตัวชี้), text (เลือกข้อความ)

pointer

text

wait

pointer-event point-icon

pointer-events เป็นการกำหนดคุณสมบัติว่าจะให้ผู้ใช้สามารถตอบสนองกับ element นั้นๆได้หรือไม่

Default value : auto

Syntax : pointer-events: auto | none;

Click me! to see example You can't click me!

gap point-icon

gap เป็นการกำหนดขนาดของช่องว่างระหว่าง row และ column ใน flexbox หรือ grid เป็นการย่อคุณสมบัติของ row-gap และ column-gap

Default value : normal normal

Syntax : gap: row-gap column-gap | initial | inherit;

gap 1 rem
gap 1 rem

box-shadow point-icon

box-shadow เป็นการกำหนดเงาให้กับ Element ต่างๆ

Note : ต่างกับ text-shadow ตรงที่ box-shadow จะมีผลกับ container

Default value : none

Syntax : box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

box-shadow
text-shadow

outline point-icon

outline คือเส้นที่ลากรอบ ๆ Element (อยู่ถัดจาก border) เพื่อทำให้ Element โดดเด่น

Note : สามารถกำหนด outline เป็น none เพื่อไม่ให้ input tag มี outline

Default value : none

Syntax : outline: width style color offset;

object-fit point-icon

object-fit ใช้เพื่อระบุว่า img tag หรือ video tag ควรปรับขนาดให้พอดีกับคอนเทนเนอร์อย่างไร

  • fill : นี่เป็นค่าเริ่มต้น รูปภาพจะถูกปรับขนาดให้เต็มมิติที่กำหนด หากจำเป็น รูปภาพจะถูกยืดหรือบีบให้พอดี
  • contain : รูปภาพจะคงอัตราส่วนไว้ แต่จะถูกปรับขนาดให้พอดีกับขนาดที่กำหนด
  • cover : รูปภาพจะคงอัตราส่วนภาพไว้และเติมเต็มมิติที่กำหนด ภาพจะถูกตัดให้พอดี
  • scale-down : รูปภาพจะถูกลดขนาดลงเป็นเวอร์ชันที่เล็กที่สุด none or contain
  • none : รูปภาพไม่ได้ปรับขนาด

Default value : none

Syntax : object-fit: value;

Object-fit:Container

Object-fit:Cover

white-space point-icon

white-space ใช้เพื่อระบุวิธีจัดการช่องว่างภายใน Element

Default value : normal

Syntax : white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, modi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, modi?

tranform point-icon

tranform เป็นคุณสมบัติที่ช่วยให้สามารถหมุน ปรับขนาด ย้าย เอียง ฯลฯ Element ได้

Default value : none

Syntax : transform: none | transform-functions | initial | inherit;

rotate90deg
translateX 10px

filter point-icon

คุณสมบัติตัวกรองกำหนดเอฟเฟกต์ภาพ (เช่น blur, brightness) ให้กับองค์ประกอบ มักใช้กับ img tag

Default value : none

Syntax : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur 50%
grayscale 100%
invert 100%
drop-shadow

mix-blend-mode point-icon

ใช้ระบุว่าเนื้อหาขององค์ประกอบควรผสมผสานกับพื้นหลัง parent โดยตรงอย่างไร

Default value : none

Syntax : mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation |
color | luminosity;

appstore mix-blend-mode: normal;
appstore mix-blend-mode: multiply;
appstore mix-blend-mode: difference;
appstore mix-blend-mode: lighten;

::placeholder point-icon

::placeholder selector ใช้เพื่อเลือกกำหนดคุณลักษณะของ placeholder ใน input element

Syntax : ::placeholder { css declarations; }

:first-child point-icon

:first-child selector ใช้เพื่อเลือก element ที่เป็นลูกตัวแรก

Syntax : :first-child { css declarations; }