ใช้คุณสมบัติ counter-increment เพื่อเพิ่มค่าตัวนับ (counter) ใน CSS ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          body {             counter-reset: section;      

ใช้ opacity และ transition เพื่อสร้าง tooltip แบบ fade in เมื่อ hover ตัวอย่าง <!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;    

หากต้องการสร้างภาพวงกลม ให้ใช้คุณสมบัติ border-radius: 50% ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          img {             border-radius: 50%;          

หากต้องการสร้าง thumbnail image ให้ใช้คุณสมบัติ border ร่วมกับ padding และ border-radius ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          img {             border: 2px solid orang

ใช้คุณสมบัติ counter-reset เพื่อสร้างหรือรีเซ็ตตัวนับ (counter) ใน CSS ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          body {             counter-reset: section;     &n

ใช้คุณสมบัติ text-shadow เพื่อสร้างข้อความสีขาวพร้อมเงาสีดำ ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          h1 {             color: white;           &nbs

หากต้องการสร้าง tooltip ด้านบน ให้ใช้คุณสมบัติ bottom ใน CSS ตัวอย่าง <!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;       &n

ใช้คุณสมบัติ animation-iteration-count เพื่อกำหนดจำนวนรอบที่แอนิเมชันควรเล่น ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;      

ใช้คุณสมบัติ animation-direction เพื่อกำหนดว่าแอนิเมชันควรเล่นไปข้างหน้า ถอยหลัง หรือสลับกัน ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;  

ใช้คุณสมบัติ animation-name เพื่อตั้งชื่อของ @keyframes animation ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;         &nbs

ใช้เซเล็กเตอร์ [attribute ~= value] เพื่อเลือกองค์ประกอบที่ค่าแอตทริบิวต์มีคำที่ระบุอยู่ ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          [alt ~= Tutorials] {             border:

หากต้องการสร้างภาพมุมโค้ง ให้ใช้คุณสมบัติ border-radius ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          img {             border-radius: 20px;          

หากต้องการเลือกองค์ประกอบที่มีแอตทริบิวต์เฉพาะ ให้ใช้ CSS [attribute] selector เช่น แอตทริบิวต์ alt หรือ target เป็นต้น ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          img[alt] {         &

ใช้คุณสมบัติ right ใน CSS เพื่อเพิ่มลูกศรด้านขวาของ tooltip (ทำให้ลูกศรชี้ไปทางซ้าย) ตัวอย่าง <!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;

หากต้องการจัดสไตล์หลายองค์ประกอบพร้อมกัน ให้ใช้เครื่องหมายจุลภาค (,) คั่นแต่ละองค์ประกอบ ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div, p {             color: blue;  

ใช้เซเล็กเตอร์ element element (descendant combinator) เพื่อเลือกองค์ประกอบทั้งหมดภายในองค์ประกอบอื่น ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div p {             color: w

ใช้คุณสมบัติ animation-fill-mode เพื่อตั้งค่าสไตล์ขององค์ประกอบเมื่อแอนิเมชันไม่ได้เล่น ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;   &nb

ใช้คุณสมบัติ animation-timing-function เพื่อกำหนดโค้งความเร็วของแอนิเมชัน ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;       &nb

Tooltip คือข้อความเล็กๆ ที่แสดงเมื่อผู้ใช้วางเมาส์เหนือข้อความ ใช้เพื่อให้ข้อมูลเพิ่มเติมช่วยให้ผู้ใช้เข้าใจง่ายขึ้น ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อเรียนรู้การสร้าง tooltip <!DOCTYPE html> <html>    <style>       #mytooltip #mytext {      

ใช้คุณสมบัติ visibility เพื่อสร้าง tooltip ที่แสดงเมื่อ hover เมาส์ ตัวอย่าง <!DOCTYPE html> <html>    <style>       #mytooltip #mytext {          visibility: hidden;          width: 100px;     &n