Trung Quân
  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Top Posts
Lộ trình học lập trình Web từ con...
Nhận diện, xác thực khuôn mặt với ReactJS...
Tạo hiệu ứng thẻ bài Magic với HTML...
NodeJS viết API gửi Email với OAuth2 và...
Tạo hiệu ứng Parallax đơn giản chỉ với...
Git – GitHub • Học Git thực tế...
Tạo một trang GitHub Profile phiên bản vũ...
Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...
Cài đặt NVM, NodeJS và GIT trên MacOS...
Thuật toán Tìm phần tử bị lặp đầu...

Trung Quân

  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Developer Tips

Tạo hiệu ứng thẻ bài Magic với HTML • CSS • JS thuần

by trungquandev August 14, 2022September 24, 2022
written by trungquandev August 14, 2022September 24, 2022
tao-hieu-ung-the-bai-magic-voi-html-css-js-thuan-trungquandev-featured-img

Xin chào tất cả các bạn, mình là Trung Quân aka trungquandev như mọi lần :D. Hôm nay mình sẽ hướng dẫn các bạn làm một thứ khá thú vị, cụ thể là làm cái hiệu ứng cho kiểu Thẻ Bài Magic – Magic Card bằng HTML, CSS và thêm chút Javascript nhé.

“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

  1. Link hướng dẫn và show demo trên kênh YouTube: Trungquandev Official chính chủ của mình nha.
  2. Code luôn thôi chứ không có nhiều lý thuyết gì ở đây cả nhé 😀

1. Link hướng dẫn và show demo trên kênh YouTube: Trungquandev Official


2. Triển khai code

– Lưu ý quan trọng nè: phần code dưới đây mình sẽ chia ra dạng các file code để các bạn có thể copy paste về máy rồi chạy là xong ngay nhé.
– Riêng phần giải thích và hướng dẫn code chi tiết thì mình có giải thích luôn trong video trên YouTube rồi nên mình sẽ không viết lại để tránh dài nội dung của bài viết nha.
– Các bạn xem video và đồng thời đăng ký kênh ủng hộ mình nha ^^
– Link: Tạo hiệu ứng Thẻ bài Magic với HTML • CSS • JS thuần

Cấu trúc thư mục dự án của chúng ta sẽ trông như sau (chỉ đơn giản 3 files thôi):

magicCard

index.html

magicCard.css

magicCard.js


Đầu tiên là file index.html, các bạn copy pase đoạn code sau vào nhé:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://trungquandev.com/wp-content/uploads/2020/08/logo-trungquandev-white-bg.jpg" sizes="16x16">
  <title>Magic Card by Trungquandev</title>

  <link rel="stylesheet" href="magicCard.css">
  <script src="magicCard.js" async></script>
</head>
<body>
  <div class="magic-card">
    <!-- Magic Card -->
  </div>

  <div class="customizing">
    <span class="general-type clear-bg" onclick="toggleRawBg()">Raw Background?</span>
    <span class="general-type fire" onclick="customType('magic-card-fire')">Fire</span>
    <span class="general-type water" onclick="customType('magic-card-water')">Water</span>
    <span class="general-type wood" onclick="customType('magic-card-wood')">Wood</span>
    <span class="general-type earth" onclick="customType('magic-card-earth')">Earth</span>
    <span class="general-type metal" onclick="customType('magic-card-metal')">Metal</span>
  </div>

  <div class="trungquandev-author">
    <div class="sub-content">
      <div>Thank you!</div>
      <div>Blog: <a href="https://trungquandev.com" target="_blank" rel="noopener noreferrer">https://trungquandev.com</a></div>
      <div>CV: <a href="https://cv.trungquandev.com" target="_blank" rel="noopener noreferrer">https://cv.trungquandev.com</a></div>
      <div>YouTube: <a href="https://www.youtube.com/c/TrungquandevOfficial" target="_blank" rel="noopener noreferrer">Trungquandev Official</a></div>
      <div>Credit to the idea from: <a href="https://codepen.io/gayane-gasparyan/pen/jOmaBQK" target="_blank" rel="noopener noreferrer">https://codepen.io/gayane-gasparyan/pen/jOmaBQK</a></div>
    </div>
  </div>
</body>
</html>

Tiếp theo là file magicCard.css

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #212534;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

/* Customize type and color */
.customizing {
  margin-top: 80px;
  color: white;
  display: flex;
  gap: 12px;
}
.customizing>span.general-type {
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid #636e72;
  border-radius: 4px;
}
.customizing>span.general-type:hover {
  border-color: #f7f1e3;
}

.customizing>span.clear-bg {
  color: #636e72;
}
.customizing>span.fire {
  color: #d63031;
}
.customizing>span.water {
  color: #3c67e3;
}
.customizing>span.wood {
  color: #00b894;
}
.customizing>span.earth {
  color: #cc8e35;
}
.customizing>span.metal {
  color: #b2bec3;
}

/* My information and credit resources */
.trungquandev-author {
  margin-top: 40px;
  color: white;
}
.sub-content {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.6rem;
}
.sub-content a {
  color: inherit;
  text-decoration: none;
  color: #1dd1a1;
}
.sub-content a:hover {
  color: #55efc8;
}

/* Có thể hiểu đơn giản đây là một dạng khai báo biến nâng cao trong CSS, chưa support hết các trình duyệt */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@property */
@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  0% { --rotate: 0deg; }
  100% { --rotate: 360deg; }
}

/* Magic Card */
.magic-card {
  background: #191c29;
  width: 300px;
  height: 450px;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  cursor: pointer;
  font-family: cursive;
}

.magic-card::before {
  content: "";
  width: 106%;
  height: 104%;
  top: -2%;
  left: -3%;
  border-radius: 8px;
  position: absolute;
  z-index: -1;
  animation: spin 1.5s linear infinite;
  background-image: linear-gradient(var(--rotate), #81ecec, #00b894 48%);
}

.magic-card::after {
  position: absolute;
  content: "";
  top: calc(450px / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  opacity: 1;
  transition: opacity .5s;
  transform: scale(0.8);
  filter: blur(calc(450px / 6));
  animation: spin 1.5s linear infinite;
  background-image: linear-gradient(var(--rotate), #81ecec, #00b894 48%);
}

.magic-card-raw {
  background: none;
}
.magic-card-fire::before,
.magic-card-fire::after {
  background-image: linear-gradient(var(--rotate), #ff6b81, #d63031 48%);
}
.magic-card-water::before,
.magic-card-water::after {
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 48%);
}
.magic-card-wood::before,
.magic-card-wood::after {
  background-image: linear-gradient(var(--rotate), #81ecec, #00b894 48%);
}
.magic-card-earth::before,
.magic-card-earth::after {
  background-image: linear-gradient(var(--rotate), #ffda79, #cc8e35 48%);
}
.magic-card-metal::before,
.magic-card-metal::after {
  background-image: linear-gradient(var(--rotate), #dfe6e9, #636e72 48%);
}

Cuối cùng là file magicCard.js (dùng để xử lý thay đổi màu sắc của các thẻ bài cũng như bỏ màu nền)

/**
 * Created by trungquandev.com's author on 14/08/2020. (DD/MM/YYYY)
 * magicCard.js
 */
const magicCard = document.querySelector('.magic-card')

toggleRawBg = () => {
  if (magicCard.classList.contains('magic-card-raw')) {
    magicCard.classList.remove('magic-card-raw')
  } else {
    magicCard.classList.add('magic-card-raw')
  }
}

resetDefault = () => {
  const isRawMagicCard = magicCard.classList.contains('magic-card-raw')
  magicCard.setAttribute('class', `magic-card ${isRawMagicCard ? 'magic-card-raw' : ''}`)
}

customType = (className) => {
  // Nếu đã tồn tại class rồi thì không làm gì
  if (magicCard.classList.contains(className)) return

  // Trả về trạng thái mặc định trước khi thêm class mới
  resetDefault()
  
  magicCard.classList.add(className)
}

Kết quả sẽ như demo trong video mình giải thích code trên YouTube rồi nha, nếu bạn nào gặp vấn đề gì thì có thể comment luôn ở video trên kênh, mình sẽ check và support nhé.

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)


4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên Github

Vậy là kết thúc bài hôm nay mình đã hướng dẫn các bạn làm một chiếc hiệu ứng thẻ bài Magic trông cũng khá ổn áp như kiểu trong vài game đơn giản rồi nhé 😀

Mình có để full source code của bài hôm nay ở repo này (Thư mục số 7) cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và làm theo các bước hướng dẫn mà mình có để trong file README nhé, chỉ có vài bước khá dễ dàng thôi.
https://github.com/trungquandev/trungquandev-public-utilities-algorithms


Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ mình bằng cách Đăng ký kênh Youtube Trungquandev Official để mình có động lực tiếp tục viết những bài viết hay cũng như ra thêm nhiều video chất lượng hơn nữa nha, cảm ơn các bạn nhiều !!!
https://www.youtube.com/c/TrungquandevOfficial


Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – ? Trungquandev Official ❤


Tham khảo kiến thức, ý tưởng:

https://developer.mozilla.org/en-US/docs/Web/CSS/@property
https://codepen.io/gayane-gasparyan/pen/jOmaBQK

“Thanks for awesome knowledges.”
“ From author: trungquandev ”

Khóa học lập trình làm việc thực tế:

Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học lập trình MERN Stack Miễn Phí cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
mern-stack-course-trungquandev
csshtmljavascripttrungquandevtrungquandev official
0 comment
0
FacebookTwitterGoogle +Pinterest
trungquandev

previous post
NodeJS viết API gửi Email với OAuth2 và Nodemailer
next post
Nhận diện, xác thực khuôn mặt với ReactJS & FaceIO

Related Posts

Git – GitHub • Học Git thực tế...

March 13, 2022

Cài đặt WSL2 để sử dụng Ubuntu dễ...

November 29, 2021

Tạo một trang GitHub Profile phiên bản vũ...

March 12, 2022

Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...

February 19, 2022

Cài đặt NVM, NodeJS và GIT trên MacOS...

February 19, 2022

Tạo hiệu ứng Parallax đơn giản chỉ với...

May 4, 2022

Nhận diện, xác thực khuôn mặt với ReactJS...

September 25, 2022

Bát Chánh Đạo

batchanhdao-trungquandev

About Me

About Me

Trung Quân

Senior Software Engineer at Pod Foods (US)

Academy Of Cryptography Techniques

"I am a dog and cat lover, love green, love to read books, write blog and oil painting ..."

Read my CV → https://cv.trungquandev.com/

My Maxim Live

A bit of fragrance clings to the hand that gives flowers!

For Vietnamese young generation

Đừng bao giờ làm người khổng lồ trong tư tưởng nhưng chỉ là thằng lùn trong hành động.

Keep in touch

Facebook Instagram Linkedin Youtube Email Github

Fanpage Facebook

Facebook

Học lập trình “MERN Stack Cơ Bản” qua ứng dụng thực tế

mern-stack-trello-app-trungquandev


  Khóa học lập trình MERN Stack (NodeJS, ReactJS, ExpressJS, MongoDB) cực kỳ chất lượng và Miễn Phí do chính mình hướng dẫn nhé:
  MERN Stack - xây dựng ứng dụng quản lý công việc dạng Kanban tương tự Trello.

Học lập trình “MERN Stack Nâng Cao” qua ứng dụng thực tế

mern-stack-advanced-trello-app-trungquandev


  * Học lập trình MERN Stack Nâng Cao (NodeJS, ReactJS, ExpressJS, MongoDB). Đây là một khóa học mà mình đã làm cực kỳ tâm huyết, với phong cách dạy lập trình làm dự án thực tế, chuyên nghiệp. Để các bạn có một hành trang kiến thức vững chắc cho hành trình làm lập trình viên trong tương lai nhé.
  Lập Trình MERN Stack Nâng Cao - Học Thực Tế Để Đi Làm

YouTube: Trungquandev Official

youtube-channel-trungquandev-official


  - Các bạn tham khảo kênh YouTube chính thức của mình và ủng hộ mình bằng cách tặng mình một lượt Đăng Ký Kênh nha.
Cảm ơn các bạn ^^

  YouTube: TRUNGQUANDEV OFFICIAL

© Copyright

Bản quyền:
  © DMCA (Digital Millennium Copyright Act)


DMCA.com Protection Status

License

Giấy phép nội dung:
  Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Quốc tế.


Giấy phép Creative Commons

Other links

Portfolio của mình:
  https://cv.trungquandev.com

Lập trình cuộc sống:
  https://laptrinhcuocsong.com

Nhiều bài viết hay về javascript:
  https://codetheworld.io

  • Facebook
  • Youtube
  • GitHub
  • Linkedin
  • Instagram

@2022 - trungquandev.com. Since 2016 - All Right Reserved. Developed by Trung Quân Dev