"สีพื้นหลังใน tag"

background-color

red

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

transparent

"ภาพพื้นหลังใน tag"

background-image

url("paper.gif")

linear-gradient(red,violet)

repeating-linear-gradient(red,violet)

radial-gradient(red,violet)

repeating-radial-gradient(red,violet)

conic-gradient(red,violet)

"ทำภาพซ้ำใน tag"

background-repeat

repeat

no-repeat

repeat-x

repeat-y

"ตำแหน่งภาพพื้นหลังใน tag"

background-position

10px 10px

top

center

left

right

bottom

"การเลื่อนของ background"

background-attachment

scroll

fixed

local

"background blur"

backdrop-filter

-webkit-backdrop-filter

blur(10px)

"ขอบของ tag"

Shorthand.border

1px solid #000

transparent

"ผสานส้น table th td"

border-collapse

collapse

"ระยะห่าง th td "

border-spacsing

10px

"ความกว้างของ tag"

width

10px

10%

10rem

10em

10vw

"ความสูงของ tag"

height

10px

10%

10rem

10em

10vh

"อัตราส่วน width / height ของ tag"

aspect-ratio

16 / 9

"ลักษณะนอก border"

outline

1px solid red

transparent

"ตกแต่ง text"

Shorthand.text-decoration

10px

none

overline

line-through

underline

red

"กำหนดระยะห่างของ underline"

text-underline-offset

10px

"กำหนดการ wrap ของแถว text"

white-space

normal

nowrap

pre

"กำหนดการ wrap ของ text"

word-wrap

normal

break-word

"ตัดเนื้อหาเกิน tag"

overflow

hidden

visible

scroll

auto

"ตัดเนื้อหาเกิน tag แกน x"

overflow-x

hidden

visible

scroll

auto

"ตัดเนื้อหาเกิน tag แกน y"

overflow-y

hidden

visible

scroll

auto

"text รวมกับ image"

mix-blend-mode

darken

screen

overlay

"เลื่อน scroll หน้าเดียวแบบ smooth"

"กำหนดที่ tag html"

scroll-behavior

auto

smooth

"กำหนดที่ tag container
การ snap ของ scroll ให้พอดีกับหน้าต่าง"

scroll-snap-type

x

y

both

mandatory

proximity

กำหนดที่ tag items
จุดที่ items จะ snap กับหน้าต่าง

scroll-snap-align

start

center

end

รูปแบบของ cursor

cursor

pointer

none

กำหนดการเป็นเป้าของ tag จาก event

pointer-events

auto

none

"มุมโค้งมน"

Shorthand.border-radius

10px 10px 10px 10px

"แทรกรูปเข้า border"

border-image

url("border.png") 30 round

url("border.png") 30 stretch

"เกลี่ยสี border"

border-image-sorce

border-image-slice

linear-gradient(red,violet)

radial-gradient(red,violet)

conic-gradient(red,violet)

4

"ภาพเริ่มต้นที่จุดไหน"

background-origin

border-box

padding-box

content-box

"ภาพเเสดงที่จุดไหน"

background-clip

border-box

padding-box

content-box

text

"เงา tag"

box-shadow

10px 10px 10px red inset

"กำหนดเอฟเฟ็กต์ภายใน tag"

filter

none

blur(10px)

opacity(10%)

drop-shadow(10px 10px 10px red)

grayscale(10%)

contrast(10%)

brightness(10%)

hue-rotate(10deg)

invert(10%)

saturate(10)

sepia(10%)

"กำหนด text ที่เกิน tag ให้เป็นจุด"

text-overflow

clip

ellipsis

"แสดง text แนวตั้ง หรือ แนวนอน"

writing-mode

horizontal-tb

vertical-rl

"กำหนด border ให้ text"

-webkit-text-stroke

5px red

"รูปแบบการแสดง 2d หรือ 3d"

transform-style

flat

preserve-3d

"ย้าย หมุน ปรับขนาด tag"

transform

translate(10px,10px)

rotate(10deg)

scale(1.5,1.5)

skew(10deg,10deg)

perspective(1000px)

"เปลี่ยนตำแหน่งเริ่มต้น transform"

transform-origin

top

center

left

right

bottom

"กำหนดการเห็นด้านหลังของ tag"

backface-visibility

hidden

visible

"เก็บค่าที่จะ transition ตามลำดับ"

transition-property

width,height,transform

"เวลาที่จะ transition ตามลำดับ"

transition-duration

0.2s,2s,0.5s

"เวลาเริ่มทำ transition ตามลำดับ"

transition-delay

1s,0.5s,2s

"รูปแบบการทำ transition"

transition-timing-function

ease

linear

ease-in

ease-out

ease-in-out

cubic-bezier(0.25,0.1,0.25,1)

"transition ทั้งหมด"

Shorthand.transition

all 0.2s ease 1s

"ภาพสมส่วน"

object-fit

fill

cover

contain

none

"ตำแหน่งภาพสมส่วน"

object-position

10px 10px

top

left

right

center

bottom

"กำหนด column ใน tag"

column-count

5

"กำหนดช่องว่างระหว่าง colulmn"

column-gap

10px

"กำหนดเส้นกั้น column"

Shorthand.column-rule

1px solid red

"กำหนด column ให้ขยายเต็ม"

column-span

all

none

"กำหนดความกว้างของ column"

column-width

100px

50%

"ย่อขยาย tag ใช้คู่กับ overflow: auto;"

resize

none

horizontal

vertical

both

"ขนาดแท้จริงของ tag"

box-sizing

border-box

"เปลี่ยนสีพื้นหลัง"

fill

red

"ความกว้าง border"

stroke-width

10px

"สี border"

stroke

red

"ทำเส้นปะที่ border"

stroke-dashray

600px

"ลดระยะห่างเส้นปะที่ border"

stroke-dashoffset

400px

"ระบุทิศทาง tag items"

flex-direction

column

row

column-reverse

row-reverse

"จัดเส้นตำแหน่งใน tag แกน x"

justify-content

center

space-between

space-around

space-evenly

flex-start

flex-end

start

end

"จัดเส้นตำแหน่งใน tag แกน y"

align-conent

stretch

center

space-between

space-around

space-evenly

flex-start

flex-end

start

end

จัดตำแหน่ง tag items แกน x

justify-items

baseline

center

flex-start

flex-end

start

end

stretch

"จัดตำแหน่ง tag items แกน y"

align-items

baseline

center

flex-start

flex-end

start

end

stretch

"กำหนดการ wrap ของ tag items"

flex-wrap

wrap

no-wrap

wrap-reverse

"จัด tag items ที่กำหนด แกน y"

align-self

baseline

center

flex-start

flex-end

start

end

stretch

"tag item เพิ่มขนาดตัวเอง"

flex-grow

1

"tag item ลดขนาดตัวเอง"

flex-shrink

1

"สร้าง column"

grid-template-columns

1fr

1fr 1fr

repeat(3,1fr)

repeat(auto-fit,250px)

"สร้าง row"

grid-template-rows

1fr

1fr 1fr

repeat(3,1fr)

"กำหนด tag ให้อยู่ตำแหน่งที่ต้องการ"

grid-template-areas

"header header
section section
footer footer"

"ระบุชื่อที่ใช้ใน grid-template-areas"

grid-area

header

"ช่องว่างระหว่าง column"

column-gap

10px

"ช่องว่างระหว่าง row"

row-gap

10px

"ช่องว่างระหว่าง column row"

gap

10px

tag item กินพื้นที่แนว column

grid-column

1 / span 2

"tag item กินพื้นที่แนว row"

grid-row

1 / span 2

"จัด tag item ให้ center"

place-items

center

"structure animation"

@keyframes

from { top: 0; }

to { top: 100px; }

"ใส่ชื่อของ keyframes"

animation-name

none

name

"เวลาในการเล่น animation"

animation-duration

5s

"เวลาก่อนเล่น animation"

animation-delay

5s

"จำนวนในการเล่น animation"

animation-iteration-count

5

infinite

"รูปแบบการเล่น animation"

animation-timing-function

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier(0.25,0.1,0.25,1)

"ทิศทางการเล่น animation"

animation-direction

normal

alternate

reverse

alternate-reverse

"กำหนดการเล่น และ หยุดของ animation"

animation-play-state

paused

running

"เติมภาพเมื่อเล่น animation เสร็จ"

animation-fill-mode

none

forwards

backwards

both

"animation ทั้งหมด"

Shorthand.animation

name 5s linear infinite 1s forwards

"action hover"

:hover

"action clickmouse"

:active

"เลือกสมาชิกตัวที่ 1"

:nth-of-type(1)

"เลือกสมาชิกตัวที่เป็น เลขคู่"

:nth-of-type(even)

"เลือกสมาชิกตัวที่เป็น เลขคี่"

:nth-of-type(odd)

"เลือกสมาชิกตัวที่ 4 เป็นต้นไป"

:nth-of-type(n + 4)

"เพิ่ม tag ใน tag ที่กำหนด"

::before

::after

"ปรับแต่ง scrollbar"

::-webkit-scrollbar