แหล่งเรียนรู้

นวัตกรรมการศึกษา 4 ชิ้น /เทคนิควิธีการสอน 4 เทคนิค

📢Workshop

Workshop ที่1

การทำตัวหนังสือวิ่ง   คลิก❗https://vrisad.blogspot.com  

PROMP จากโค้ดดังกล่าวขั้นต้นปรับแต่ง เเก้ไข เพิ่มเติมการแสดงผลให้ตัวอักษรมีการไล่สีสีฟ้าอ่อนกับสีชมพู ตัวอักษรกะพริบ มีขนาดตัวอักษร 40 มีอิโมจิรูปคุณครูยืนอยู่หลังคำว่าโปรแกรมการประถมศึกษา แต่อิโมจิไม่ต้องไล่สียังคงสีเดิม โดยยังคงรูปแบบโค้ดเดิม  <style>

/* 1. กำหนดการไล่สีและกะพริบสำหรับ 'ตัวอักษร' เท่านั้น */

.effect-text {

    font-size: 40px;

    /* สร้างการไล่สีจากฟ้าอ่อนไปชมพู */

    background: linear-gradient(to right, lightblue, pink);

    /* คลิปเฉพาะส่วนของตัวอักษรให้เห็นสีพื้นหลัง (Gradient) */

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    /* กำหนดให้ตัวอักษรกะพริบ */

    animation: blink 1s infinite alternate;

}

/* 2. กำหนดขนาดและสีเดิมสำหรับ 'อิโมจิ' */

.emoji {

    font-size: 40px;

    /* การเติมสีตัวอักษร (fill color) สำหรับอิโมจิที่ถูก 'transparent' ในข้อ 1 ให้กลับมาเป็นสีปกติ */

    -webkit-text-fill-color: initial; 

}

/* 3. กำหนดการกะพริบด้วย Keyframes */

@keyframes blink {

    0% { opacity: 1; }   /* เริ่มต้น: ทึบ 100% */

    50% { opacity: 0.2; } /* กลาง: โปร่งใส 20% */

    100% { opacity: 1; }  /* สิ้นสุด: ทึบ 100% */

}

</style>

<marquee direction="right">

    <span class="effect-text">โปรแกรมวิชาการประถมศึกษา</span>

    <span class="emoji">🧑‍🏫</span>

</marquee>

Workshop ที่2