เรียน CSS Animation | Day 6 - Card GamePublished onJan 11, 2023 • CSSสวัสดีครับ วันที่ 6 เป็นการทำ animation คล้ายๆ การ์ดเกม ซึ่ง ก็จะมี 2 states คือ ตอนที่เอาเมาท์ไปชี้ ก็จะคล้ายๆ เราเลือกการ์ดใบนั้น และก็ตอนคลิ๊กที่การ์ด ...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development
เรียน CSS Animation | Day 5 - Open 24 HoursPublished onJan 9, 2023 • CSSสวัสดีครับ วันที่ 5 เป็นการทำป้ายไฟ Neon เท่ๆ ด้วยการใช้ `text-shadow` ครับ และก็มี effect นิดๆหน่อย แรงบันดาลใจจากเว็บ ETH Global Tokyo Day 5 ...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development
เรียน CSS Animation | Day 4 - Click Me!Published onJan 7, 2023 • CSSสวัสดีครับ วันที่ 4 เป็นการทำ ส่วนโชว์ Information โดยเมื่อกด click ก็จะมีข้อความขึ้นมา เป็น animation ครับ Day 4 - Click Meโค๊ดบน Codepen<ReactCodepen hash="YzjGawG" />...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development
เรียน CSS Animation | Day 3 - Simple HoverPublished onJan 5, 2023 • CSSสวัสดีครับ วันที่ 3 เนื่องจากไม่มีเวลาเท่าไหร่ ทำให้วันนี้ไม่ได้เรียนรู้อะไรมาก เลยมาทำ Hover Effect ง่ายๆครับ โดยใช้ `rotate`, `translateY` และ `scale` Day 3 - Simple Hover...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development
เรียน CSS Animation | Day 2 - Card FlipPublished onJan 4, 2023 • CSSสวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับวันที่ 2 ฝึกการทำ Card Flip ครับ หลังจากได้ทำลง Codepen เสร็จ และอัพคลิป video ลง Yout...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development
เรียน CSS Animation | Day 1 - HeartPublished onJan 1, 2023 • CSSสวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ สำหรับวันแรก ก็จะเป็นเรื่องง่ายๆ คือการใช้ keyframes ทำการ transform `scale` ให้เหมือ...CSSCSS-AnimationCSS-TransitionAnimationWeb-Development