Tuy nhiên, nhiều script tuyết rơi cũ thường sử dụng thư viện jQuery nặng nề hoặc Canvas phức tạp khiến website bị chậm, lag trên điện thoại. Trong bài viết này, mình sẽ chia sẻ đoạn code tuyết rơi sử dụng CSS3 Animation và Vanilla JavaScript (JS thuần). Đảm bảo 3 tiêu chí: Siêu nhẹ – Không gây lag – Dễ cài đặt.

Ưu điểm code tuyết rơi cho Website đón Giáng Sinh

• Tối ưu hiệu suất: Sử dụng CSS Keyframes để tạo chuyển động thay vì tính toán vị trí liên tục bằng JS, giúp giảm tải cho CPU.
• Không chặn tương tác: Đã được xử lý thuộc tính pointer-events: none, giúp người dùng vẫn click được vào các link/nút bấm bên dưới lớp tuyết mà không bị vướng.
• Tùy biến cao: Dễ dàng chỉnh số lượng tuyết, tốc độ rơi và hình dáng bông tuyết.

Full Code hiệu ứng tuyết rơi (HTML/CSS/JS)

Dưới đây là đoạn mã đầy đủ. Bạn không cần tải file rườm rà, chỉ cần copy và dán.

      <style>
  .snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: #F527E4; /* Màu tuyết nếu dùng ký tự */
  }

  @keyframes fall {
    to {
      transform: translateY(100vh);
    }
  }
</style>

<script>
  (function() {
    var snowflakes = [],
        browserWidth, browserHeight,
        numberOfSnowflakes = 50, // Số lượng bông tuyết
        resetPosition = false;

    function setup() {
        window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
        window.addEventListener("resize", setResetFlag, false);
    }

    function setResetFlag(e) {
        resetPosition = true;
    }

    function generateSnowflakes() {

        var originalSnowflake = document.createElement("div");
        originalSnowflake.classList.add("snowflake");
        originalSnowflake.innerHTML = "❄"; 
        originalSnowflake.style.fontSize = "20px"; // Kích thước cơ bản

        var snowflakeContainer = document.body;
        
        browserWidth = document.documentElement.clientWidth;
        browserHeight = document.documentElement.clientHeight;

        for (var i = 0; i < numberOfSnowflakes; i++) {
            var snowflakeClone = originalSnowflake.cloneNode(true);
            snowflakeContainer.appendChild(snowflakeClone);

            var initialX = Math.floor(Math.random() * browserWidth);
            var fallDuration = Math.floor(Math.random() * 10) + 5 + "s";
            var snowflakeSize = Math.floor(Math.random() * 20) + 10 + "px"; // Random kích thước
            var delay = Math.floor(Math.random() * 5) + "s";

            snowflakeClone.style.left = initialX + "px";
            snowflakeClone.style.animationDuration = fallDuration;
            snowflakeClone.style.fontSize = snowflakeSize;
            snowflakeClone.style.animationDelay = delay;
            snowflakeClone.style.opacity = Math.random(); // Độ mờ ngẫu nhiên
        }
    }
    setup();
  })();
</script>

Để đổi màu tuyết bạn thay đổi mã màu ở dòng color: #F527E4;

Full Code hiệu ứng tuyết rơi có động tuyết ở chân trang

Đây là phiên bản nâng cao sử dụng HTML5 Canvas. Hiệu ứng này sẽ cho phép tuyết rơi và đọng lại dưới chân trang web. Theo thời gian, lớp tuyết sẽ dày lên và có thể che phủ màn hình giống như một trận bão tuyết thực sự.

Hiệu ứng tuyết tích tụ sẽ che khuất nội dung website của bạn từ dưới lên trên. Hãy cân nhắc kỹ trước khi sử dụng cho trang bán hàng vì khách có thể không nhìn thấy nút “Mua ngay” hoặc Footer. Bạn có thể chỉnh biến maxSnowHeight trong code để giới hạn độ cao của tuyết (ví dụ chỉ cho cao 100px rồi dừng).

Giải thích các thông số trong code để bạn tùy chỉnh:

• maxSnowHeight = height;: Tuyết sẽ dâng lên mãi cho đến khi lấp đầy màn hình (full screen). Nếu bạn chỉ muốn nó dâng lên một chút rồi dừng (để không che web), hãy đổi thành số pixel cụ thể, ví dụ: maxSnowHeight = 150;.
• snowflakeCount = 200;: Số lượng hạt tuyết đang rơi. Tăng lên thì dày hơn nhưng máy yếu có thể lag.
• snowPile: Đây là mảng kỹ thuật để lưu “bản đồ địa hình” của lớp tuyết dưới đáy.

<canvas id="snowCanvas" style="position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;"></canvas>

<script>
(function() {
    var canvas = document.getElementById('snowCanvas');
    if (!canvas) { console.error("Không tìm thấy thẻ canvas"); return; }
    
    var ctx = canvas.getContext('2d');
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    // --- CẤU HÌNH ---
    var maxSnowHeight = 200;    // Độ cao tối đa tuyết đọng (pixel)
    var snowflakeCount = 200;   // Số lượng hạt tuyết
    var snowColor = "#ADD8E6";  // Màu tuyết (Xanh nhạt để dễ test, muốn trắng sửa thành #FFFFFF)
    // ----------------
    
    canvas.width = width;
    canvas.height = height;

    var snowflakes = [];
    var snowPile = new Array(width).fill(0); 

    // Hàm tạo lại hạt tuyết khi rơi xuống hoặc mới bắt đầu
    function resetSnowflake(flake) {
        flake.x = Math.floor(Math.random() * width);
        flake.y = Math.floor(Math.random() * -height); 
        flake.size = Math.random() * 3 + 2; 
        flake.speed = (Math.random() * 1) + 1.5; // Tốc độ rơi
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;
    }

    // Khởi tạo các hạt tuyết
    function init() {
        snowflakes = [];
        for (var i = 0; i < snowflakeCount; i++) {
            var flake = {};
            resetSnowflake(flake);
            snowflakes.push(flake);
        }
        // GỌI HÀM UPDATE ĐỂ BẮT ĐẦU CHẠY
        update();
    }

    // Vòng lặp chuyển động
    function update() {
        ctx.clearRect(0, 0, width, height);

        // 1. Vẽ đống tuyết tích tụ dưới đáy
        ctx.fillStyle = snowColor;
        ctx.beginPath();
        ctx.moveTo(0, height);
        for (var x = 0; x < width; x++) {
            ctx.lineTo(x, height - snowPile[x]);
        }
        ctx.lineTo(width, height);
        ctx.fill();

        // 2. Vẽ và cập nhật bông tuyết đang rơi
        for (var i = 0; i < snowflakes.length; i++) {
            var f = snowflakes[i];

            f.x += Math.sin(f.y * 0.05) * 0.5; // Lắc lư nhẹ
            f.y += f.velY;

            var currentX = Math.floor(f.x);
            if (currentX < 0) currentX = 0;
            if (currentX >= width) currentX = width - 1;

            // Kiểm tra va chạm với đống tuyết
            var pileHeight = snowPile[currentX];
            
            if (f.y >= height - pileHeight) {
                // Tích tụ tuyết nếu chưa vượt quá giới hạn
                if (pileHeight < maxSnowHeight) {
                    var range = 3; 
                    for(var k = -range; k <= range; k++) {
                        var neighborX = currentX + k;
                        if(neighborX >=0 && neighborX < width) {
                             snowPile[neighborX] += f.size * 0.3; 
                        }
                    }
                }
                resetSnowflake(f); // Tạo lại hạt mới từ trên cao
            }

            // Vẽ bông tuyết đơn lẻ
            ctx.fillStyle = snowColor;
            ctx.globalAlpha = f.opacity; // Độ trong suốt
            ctx.beginPath();
            ctx.arc(f.x, f.y, f.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.globalAlpha = 1; // Reset lại alpha
        }
        
        requestAnimationFrame(update);
    }

    // Xử lý khi resize màn hình
    window.addEventListener('resize', function() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        snowPile = new Array(width).fill(0); // Reset tuyết đọng khi resize để tránh lỗi hiển thị
    });

    init();
})();
</script>

Hướng dẫn thêm Code tuyết rơi Website Code tay (HTML/PHP)

Đối với các website tự code hoặc các mã nguồn mở khác (Laravel, CodeIgniter…), bạn thực hiện như sau:

1. Mở file footer của giao diện (thường là footer.php, footer.html hoặc file layout chính).
2. Tìm đến thẻ đóng </body>.
3. Dán đoạn code ở mục 2 vào ngay phía trên thẻ </body>.
4. Lưu file và tải lại trang (Ctrl + F5) để xem kết quả.

4. Hướng dẫn cài đặt cho WordPress

Với WordPress, có 2 cách để chèn code này mà không cần cài plugin nặng nề tạo hiệu ứng:

Cách 1: Sử dụng Plugin chèn Header & Footer (Khuyên dùng)

Cách này an toàn nhất, khi đổi giao diện (theme) code vẫn hoạt động.

1. Cài đặt plugin WPCode (trước đây là Insert Headers and Footers) hoặc Header Footer Code Manager.
2. Vào menu plugin, chọn Add New Snippet.
3. Chọn vị trí chèn là Footer.
4. Dán đoạn code trên vào và bấm Save/Activate.

Cách 2: Chèn trực tiếp vào Theme (Dành cho Dev)

1. Vào trang quản trị WP -> Giao diện (Appearance) -> Chỉnh sửa giao diện (Theme File Editor).
2. Tìm file footer.php ở cột bên phải.
3. Dán code vào trước thẻ đóng </body>.
4. Bấm Cập nhật tệp tin.

Lưu ý: Với cách 2, nếu bạn update theme thì code sẽ mất, nên sử dụng Child Theme để tránh tình trạng này.

Chỉ với vài dòng code đơn giản, website của bạn đã trở nên sinh động hơn rất nhiều trong mắt khách truy cập. Đây là một mẹo nhỏ trong UI/UX giúp giữ chân người dùng lâu hơn trong dịp lễ hội.

Chúc các bạn thực hiện thành công và có một mùa Giáng sinh an lành! Nếu có thắc mắc gì, hãy để lại bình luận bên dưới nhé.

Code chuyển theme Website sang nền trắng đen

Đổi nền trắng đen cho WordPress

Nếu bạn dùng WordPress, hãy truy cập vào Menu -> Apperance -> Customize -> Custom CSS vào copy đoạn code CSS này vào, sau đó save lại:

html {filter: grayscale(100%);}

Nếu bạn dùng Theme có chức năng tinh chỉnh CSS, thì vào Menu chỉnh CSS của theme đó nhé. Sau đó bạn truy cập vào trang chủ website của bạn để thấy xem sự thay đổi màu sắc giao diện của Website

Code này mình sưu tầm trên Facebook

Đổi nền trắng đen cho Blogspot

Blogspot là nền tảng tạo blog miễn phí của Google, bạn cũng có thể đổi nền trắng đen để tưởng nhớ hoặc Quốc tang bằng chỉnh chỉnh CSS cho theme của Website.

Bước 1: Truy cập vào bảng điều khiển Blogspot của bạn.

Bước 2: Chọn “Theme” từ menu bên trái.

Bước 3: Nhấp vào dấu mũi tên bên cạnh chữ “Customize”

Bước 4: “Edit HTML” (tùy vào giao diện blogspot của bạn).

Bước 5: Phía dưới thẻ <head>, copy đoạn code này và save lại để hoàn tất chuyển Code chuyển giao diện Website sang nền trắng đen để tưởng nhớ hoặc để Quốc tang:

html {
    filter: grayscale(100%);
}

Đây là mẫu ví dụ đổi theme trắng đen cho Blogspot:

Đổi nền trắng đen cho Website code tay

Tương tự như blogspot, bạn thêm đoạn css vào phía dưới thẻ <head> có thể dùng đoạn code mẫu dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <style>
        html {
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
    <h1>Welcome to AnonyViet</h1>
    <p>Chuyển nền trắng đen cho website.</p>
</body>
</html>

Code chuyển giao diện website sang nền trắng đen là một cách đơn giản và hiệu quả để thể hiện sự tôn trọng và tưởng nhớ trong những thời điểm tang thương. Với những hướng dẫn chi tiết trong bài viết này, bạn có thể dễ dàng thực hiện điều này trên website của mình.

Câu hỏi thường gặp

Làm thế nào để chuyển giao diện website sang chế độ trắng đen trên WordPress?

Trên WordPress, bạn truy cập Menu -> Appearance -> Customize -> Custom CSS và thêm đoạn code html { filter: grayscale(100%); } vào. Lưu lại thay đổi để áp dụng.

Tôi có thể áp dụng hiệu ứng trắng đen cho website Blogspot như thế nào?

Với Blogspot, truy cập bảng điều khiển, chọn “Theme”, nhấp vào “Customize”, tìm “Edit HTML” và thêm html { filter: grayscale(100%); } phía dưới thẻ <head>. Lưu lại để hoàn tất.

Nếu website của tôi được code tay, tôi cần làm gì để chuyển sang chế độ trắng đen?

Thêm đoạn code html { filter: grayscale(100%); } vào phần <style> trong phần <head> của mã nguồn HTML website.

Discord nitro – giới thiệu sơ lược

Dưới đây mình sẽ liệt kê qua các tính năng khi bạn sở hữu Discord nitro. Các tính năng này sẽ giúp các bạn có 1 trải nghiệm tuyệt vời hơn khi bạn sử dụng Discord. Nó bao gồm:

• Vô hạn lần sử dụng Super Reaction
• Có thể sử dụng emoji tùy biến ở bất cứ đâu
• Có thể sử dụng sticker tùy biến ở bất cứ đâu
• Được phép tùy chọn logo của Discord
• Có thể chia sẻ file với dung lượng cao hơn
• Có khả năng phát trực tiếp với chất lượng cao hơn
• Ảnh động ở Profile, Banner và Avatar
• Có thể sử dụng tính năng Clips (tính năng mới của Discord)
• Tùy biến profile trên server của bạn
• Sở hữu Nitro Badage
• Tùy biến ảnh nền trong cuộc gọi
• Có thể tham gia tối đa 200 Server
• Tin nhắn tối đa 4000 từ
• Tùy chỉnh theme của Discord
• Phát âm thanh tùy chỉnh mọi nơi
• Đổi âm nhạc lúc log in của Discord
• Có nhiều đồ trang trí cho profile của bạn

Hướng dẫn sử dụng Discord Nitro free thông qua Vencord

Tính năng

Tuy cách dưới đây của mình không thể cho các bạn trải nghiệm toàn bộ những tính năng của Discord Nitro nhưng các tính năng các bạn có thể trải nghiệm bao gồm:

• Có khả năng phát trực tiếp 4k 60fps
• có thể gửi các Emoji và Sticker từ các server khác
• Sử dụng theme riêng cho Discord

Giới thiệu sơ qua Vencord

Và công cụ để chúng ta fake Discord Nitro là Vencord. Vencord là 1 trong các Discord Client và Web extension có thể cho chúng ta 1 trải nghiệm tuyệt vời hơn khi sử dụng Discord với các Plugin và theme được thêm vào. Với các plugin được code từ Javascript và các theme được làm từ CSS, nó sẽ biến Discord của bạn còn tuyệt hơn so với Discord Nitro

Hướng dẫn cài đặt Vencord

Bước 1: truy cập vào trang chủ chính thức của Vencord và tải file về

Bước 2: Chạy File VencordInstaller.exe

Bước 3: Chọn nút install màu xanh lá cây góc bên trái

Sau khi các bạn tải xong, các bạn chỉ cần vào Discord Client như bình thường là các bạn đã có thể sử dụng các tính năng của Vencord rồi. Sau đây mình sẽ hướng dẫn cách fake Discord Nitro trên Vencord.

Setup fake Discord Nitro trong Vencord

Bước 1: Truy cập phần setting của Discord

Bước 2: Kéo xuống mục Vencord > Plugin và tiến hành tìm kiếm từ khóa: FakeNitro và tiến hành bật plugin lên

Bước 3: Tới đây các bạn khởi động lại Discord là các bạn có thể tận hưởng các tính năng trên. Ngoài ra có 1 số plugin các bạn có thể xem thêm bao gồm:

• BiggerStreamPreview – xem stream với màn hình to hơn
• CallTimer – hiển thị thời gian trong cuộc gọi
• MemberCount – Đếm thành viên của 1 server
• MessageLogger – lưu lại tin nhắn đã xóa hoặc chỉnh sửa
• PermissionFreeView – loại bỏ hạn chế xem channel từ phía client
• PermissionViewer – xem các role có quyền truy cập vào các channel (phù hợp với ShowHiddenChannel)
• PlatformIndicator – hiển thị thiết bị mà người bạn chat đang sử dụng
• ShowHiddenChannel – hiển thị channel bị ẩn
• VolumeBooster – tăng max âm lượng cho người dùng (max 400%)

Các bạn có thể xem thêm: Cách thay đổi Status trên Discord liên tục bằng Node.js

Câu hỏi thường gặp

Vencord là gì và nó có an toàn không?

Vencord là một ứng dụng mở rộng cho Discord, cho phép bạn thêm các plugin và theme để tùy chỉnh trải nghiệm. Về độ an toàn, cần thận trọng khi cài đặt bất kỳ phần mềm nào từ nguồn bên ngoài. Hãy đảm bảo tải xuống từ nguồn chính thức và quét phần mềm bằng phần mềm diệt virus trước khi sử dụng.

Tôi có thể sử dụng tất cả tính năng của Discord Nitro bằng Vencord không?

Không. Vencord cho phép bạn sử dụng một số tính năng của Discord Nitro, nhưng không phải tất cả. Việc sử dụng “Fake Nitro” chỉ mô phỏng một số tính năng, không phải là phiên bản Nitro đầy đủ.

Nếu tôi gặp sự cố khi cài đặt hoặc sử dụng Vencord, tôi phải làm gì?

Hãy tham khảo tài liệu hỗ trợ của Vencord hoặc tìm kiếm câu trả lời trên các diễn đàn cộng đồng. Bạn cũng có thể thử gỡ cài đặt và cài đặt lại Vencord.

Làm việc trên các dự án phát triển web là cách tiếp cận lý tưởng để có được kinh nghiệm trong lĩnh vực này nếu bạn cũng quan tâm đến nó. Các kỹ năng của bạn sẽ cải thiện khi bạn thực hành và thử nghiệm với các dự án phát triển web.

5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web

1. Tạo đồng hồ

Đây là một ứng dụng đơn giản mà bạn có thể lập trình bằng HTML và CSS. Trong dự án này, bạn phải thiết kế một trang web đơn giản và sau đó cập nhật thời gian.

Để làm cho nó hấp dẫn hơn, bạn có thể thêm các tính năng bắt đầu, dừng. Ngoài ra, bạn có thể thêm chức năng báo thức, chức năng nhạc chuông cho báo thức,…

See the Pen
Clock by Abhiraj Bhowmick (@rainboestrykr)
on CodePen.

2. Ứng dụng Thời tiết/Tin tức

Tạo ứng dụng thời tiết/tin tức sẽ kiểm tra kỹ năng của bạn và trong dự án này bạn sẽ tăng kinh nghiệm lập trình Web, bạn có thể sử dụng hai API:

• Một để biết vị trí của người dùng.
• Một cách khác để tìm nạp dữ liệu thời tiết dựa trên vị trí của người dùng.

Là một người mới bắt đầu, có dự án này trong sơ yếu lý lịch của bạn sẽ giúp bạn nổi bật giữa đám đông.

3. To-do list – Danh sách công việc

Đây là một trong những dự án đơn giản và tốt nhất mà bạn có thể phát triển bằng cách sử dụng HTML, CSS và JS. Dự án này sẽ giúp bạn lưu trữ danh sách việc cần làm và nó sẽ được lưu trong bộ nhớ cục bộ của bạn, có thể được truy cập bất cứ lúc nào.

Hơn nữa, ngay cả khi bạn lưu trữ ứng dụng, dữ liệu cũng sẽ được lưu trữ trong bộ nhớ cục bộ của máy tính của người dùng để duy trì quyền riêng tư.

See the Pen
To-do app by Abhiraj Bhowmick (@rainboestrykr)
on CodePen.

4. Form – Biểu mẫu

HTML, CSS và JavaScript đều có thể được sử dụng để tạo biểu mẫu. Bạn có thể tạo ra một thiết kế tuyệt đẹp với một chút nỗ lực. Bạn có thể bắt đầu với một dự án khiêm tốn, chẳng hạn như thiết kế biểu mẫu khảo sát hoặc biểu mẫu tư vấn, tùy thuộc vào loại hình kinh doanh bạn đang bắt đầu.

Tên, địa chỉ, e-mail, ngày sinh, số điện thoại và các thông tin thích hợp khác có thể được bao gồm trong biểu mẫu. Bạn có thể gửi biểu mẫu cho bạn bè của mình và xem họ nói gì.

Các công ty ngày nay sử dụng các mẫu khảo sát để thu thập thông tin từ các đối tượng mục tiêu của họ. Ngoài ra, có một dự án trang đích trong sơ yếu lý lịch của bạn cũng sẽ là một điểm cộng.

5. Tung đồng xu

Đây là mục không mong đợi nhất trong danh sách nhưng nó có thể rất hữu ích về lâu dài. Bạn có thể tìm hiểu về cách sử dụng phương pháp ngẫu nhiên để lấy kết quả ngẫu nhiên từ một mảng các tùy chọn.

See the Pen
CoinFlip by Abhiraj Bhowmick (@rainboestrykr)
on CodePen.

Kết luận

Đây là 5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web hàng đầu. Tất cả các dự án được liệt kê đều thân thiện với người mới bắt đầu và làm việc trên chúng sẽ giúp bạn cải thiện khả năng phát triển web và nâng cao sự nghiệp của mình.

Ngoài ra, bạn cũng có thể xem top 7 trang web tốt nhất để học lập trình web tại đây.

Câu hỏi thường gặp

Tôi có cần kiến thức lập trình sâu rộng để bắt đầu các bài tập này không?

Không cần! Các bài tập được thiết kế thân thiện với người mới bắt đầu, giúp bạn học hỏi và phát triển kỹ năng lập trình web một cách hiệu quả.

Làm thế nào để tôi có thể tìm thêm tài liệu hỗ trợ cho các bài tập?

Bài viết đã cung cấp các ví dụ CodePen trực quan. Bạn cũng có thể tìm kiếm thêm tài liệu trực tuyến bằng các từ khóa liên quan đến từng bài tập.

Sau khi hoàn thành các bài tập này, tôi sẽ đạt được gì?

Bạn sẽ cải thiện kỹ năng lập trình web, xây dựng portfolio dự án và tự tin hơn khi ứng tuyển vào các vị trí liên quan.

Code đối tết cho Website ở góc Website

CSS:

<style type="text/css">
        .tet_left img, .tet_right img {
            width: 100%;
            height: auto;
        }
        .tet_left, .tet_right {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            width: 191px;
            pointer-events: none;
        }
        .tet_right {
            left: auto;
            right: 0;
            width: 191px;
        }
                .tet_bottom {
            position: fixed;
            bottom: 0;
            left: 80px;
            z-index: 99;
            width: 320px;
            pointer-events: none;
        }
                @media (max-width: 1331px){
            .tet_left, .tet_right, .tet_bottom{
                display: none !important;
            }
        }
</style>

Đoạn này đặt trong thẻ Head của Website

<div class="tet_left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3PBtYvcb0AwzJvp5rDfHAOlC_0BsSevp3we6JTICzZAbrhaLcMtlnOAvCb_6A_LuZfnDSCYUVp5M6a_SSq1tQ825ioZ3H1mkboSV8OA7y-cqo723yZJVuniaCibs715peZlIoVfENoBVvigVfJJDffiAoij6tWFv4Jx3RWIVUcQDN5zeMWweAuCuCw/s16000/left-1.png" alt="AnonyViet-Tet"/></div> 
<div class="tet_right"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmE7w44KuUqFCci75HHT6fo4Snv-s9j8NpP9ERbJhtT9WOasSnDeiDGruspoNUbHQBENce0laVEZZaQc0C-V5pZBPhNgX2ktJprmXpW96EgMHVBBDdbO2UugIYyNY-nXST_nKFcDwDXDiBqM7LZktNIrkgDqQEtdnvYxtt5ZCoV82VNKgSYUIxT1OzYg/s16000/right-1.png" alt="AnonyViet-Tet"/></div>
<div class="tet_bottom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwruFlhClo3FUKNBQtDvqWYiDVOoi-IT7Jy4R11OU5HaOFR2N7CcX5sH4FWQI_GRoVrx4Hd5pVQREJ_QsAjvSA41v25TW0LEGW2jb8s3J2QwCrXp4qsMqdvxUZz9lglGyxL4YQxIbbf17zyqd99Rr28rDzx-foaXJRQ13kQUAblMtlt4U1rKMYbHkn5w/s16000/bottom-1.png" alt="AnonyViet-Tet"/></div>

Code hoa đào rơi

Copy đoạn Javascript này đặt trong giữa thẻ <head></head> cho Website.

<script type="text/javascript">
        var no = 20;
        if (matchMedia('only screen and (max-width: 767px)').matches) {
            no = 10        }
        let img_url = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizrrtX-KQtKY8e8pxCHjLROT5pYW7sVkUpET9HHpW8QO-PnoIRKVsvRDxM6shrE4Q-44Oh9teSGK1SApaZ1OJvhR4z7ENgKSJOLWfsdKw9jPszAa2HqaE6W8ohyGHRvff6TgKXEUjnn73LLLp3FHbtMTJnIkPxPhujWwG5ZsFgW7ctQ0zrR5KKSqlewg/s16000/hoadao-anonyviet.com.png';
        var hidesnowtime = 0;
        var color_snow  = '#fff';
        var snowdistance = 'windowheight'; // windowheight or pageheight;
        var ie4up = (document.all) ? 1 : 0;
        var ns6up = (document.getElementById && !document.all) ? 1 : 0;

        function iecompattest() {
            return (document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body
        }

        var dx, xp, yp;
        var am, stx, sty;
        var i, doc_width = 800, doc_height = 600;
        if (ns6up) {
            doc_width = self.innerWidth;
            doc_height = self.innerHeight
        } else if (ie4up) {
            doc_width = iecompattest().clientWidth;
            doc_height = iecompattest().clientHeight
        }
        dx = new Array();
        xp = new Array();
        yp = new Array();
        am = new Array();
        stx = new Array();
        sty = new Array();
        for (i = 0; i < no; ++i) {
            dx[i] = 0;
            xp[i] = Math.random() * (doc_width - 50);
            yp[i] = Math.random() * doc_height;
            am[i] = Math.random() * 20;
            stx[i] = 0.02 + Math.random() / 10;
            sty[i] = 0.7 + Math.random();
            if (ie4up || ns6up) {
                document.write('<div id="dot'+i+'" style="POSITION:fixed;Z-INDEX:'+(99+i)+';VISIBILITY:visible;TOP:15px;LEFT:15px;pointer-events: none;width:15px"><span style="font-size:18px;color:'+color_snow+'"><img src="'+img_url+'" alt=""></span></div>');
            }
        }

        function snowIE_NS6() {
            doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
            doc_height = (window.innerHeight && snowdistance == 'windowheight') ? window.innerHeight : (ie4up && snowdistance == 'windowheight') ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == 'pageheight') ? iecompattest().scrollHeight : iecompattest().offsetHeight;
            for (i = 0; i < no; ++i) {
                yp[i] += sty[i];
                if (yp[i] > doc_height - 50) {
                    xp[i] = Math.random() * (doc_width - am[i] - 30);
                    yp[i] = 0;
                    stx[i] = 0.02 + Math.random() / 10;
                    sty[i] = 0.7 + Math.random()
                }
                dx[i] += stx[i];
                document.getElementById('dot' + i).style.top = yp[i] + 'px';
                document.getElementById('dot' + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + 'px'
            }
            snowtimer = setTimeout('snowIE_NS6()', 10)
        }

        function hidesnow() {
            if (window.snowtimer) {
                clearTimeout(snowtimer)
            }
            for (i = 0; i < no; i++) document.getElementById('dot' + i).style.visibility = 'hidden'
        }

        if (ie4up || ns6up) {
            snowIE_NS6();
            if (hidesnowtime > 0) setTimeout('hidesnow()', hidesnowtime * 1000)
        }
    </script>

Nếu bạn đang dùng WordPress có thể cài Plugin DevVN – Trang trí Tết Việt Nam cho tiện

DevVN – Trang trí Tết Việt Nam

Ngoài ra bạn có thể dùng các Javascript để trang trí tết như

• Javascript pháo hoa cho Website ở đây

Câu hỏi thường gặp

Tôi có thể sử dụng code này trên nền tảng nào?

Code được cung cấp trong bài viết có thể được sử dụng trên hầu hết các nền tảng website, bao gồm cả WordPress. Tuy nhiên, việc tùy chỉnh có thể cần thiết tùy thuộc vào cấu trúc website của bạn.

Làm thế nào để thêm hiệu ứng hoa đào rơi vào website của tôi?

Bạn cần sao chép đoạn mã Javascript về hiệu ứng hoa đào rơi và đặt nó vào giữa thẻ <head></head> của website. Hãy đảm bảo rằng các đường dẫn hình ảnh trong code là chính xác.

Có cách nào dễ dàng hơn để trang trí Tết cho website WordPress của tôi không?

Có chứ! Bạn có thể cài đặt plugin “DevVN – Trang trí Tết Việt Nam” từ kho plugin WordPress để có được nhiều tùy chọn trang trí Tết một cách nhanh chóng và dễ dàng.

Truy vấn phương tiện prefers-color-scheme hoạt động theo cách tương tự. Người dùng có thể cấu hình hệ điều hành của họ để sử dụng light hoăc dark mode. Prefers-color-scheme chứa giá trị đó. Giá trị là sáng (light) hoặc tối (dark), mặc dù thông số kỹ thuật của W3C nói rằng nó có thể hỗ trợ các giá trị khác trong tương lai như nâu đỏ. Chúng ta sẽ chỉ định các giá trị khác nhau của các biến CSS cho cả hai chế độ và để hệ điều hành của người dùng quyết định.

Một số thủ thuật CSS đơn giản cho dark mode

Sử dụng truy vấn phương tiện prefers-color-scheme

Hai giá trị của truy vấn phương tiện prefers-color-scheme là:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

Trong code CSS ở trên, –body-bg và –body-color là các biến CSS. Như bạn có thể thấy, chúng chứa các giá trị khác nhau cho cả hai chế độ. Trong light mode, mình thiết lập nền trắng với văn bản màu đen. Trong dark mode, mình thiết lập nền đen với văn bản màu trắng.

Vì W3C có thể giới thiệu các giá trị trong tương lai, nên việc chuyển đổi CSS này thành boolean là rất hợp lý.

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

Trong đoạn code trên, mình đang xác định light mode theo mặc định và chuyển đổi nó thành dark mode nếu truy vấn phương tiện là dark (tức là người dùng sử dụng dark mode trên hệ điều hành). Bằng cách này, mọi giá trị trong tương lai được thêm vào truy vấn phương tiện sẽ đặt light mode theo mặc định.

Sử dụng các biến CSS

Bây giờ mình có các giá trị khác nhau cho các chủ đề khác nhau, chúng ta sẽ sử dụng chúng để tạo kiểu cho trang.

body {
   background: var(--body-bg);
   color: var(--body-color);
}

Cú pháp var() là cách CSS sử dụng các biến. Trong đoạn code trên, mình đang nói rằng hãy đặt nền thành giá trị của –body-bg và đặt màu thành giá trị của –body-color. Lưu ý rằng giá trị của các biến này đến từ truy vấn phương tiện. Có nghĩa là màu nền và nền dựa trên cài đặt của hệ điều hành.

Đây là sức mạnh thực sự của truy vấn phương tiện: Cung cấp trải nghiệm người dùng nhất quán từ hệ điều hành đến trang web.

Nếu bạn truy cập findmymastodon.com và chuyển đổi chủ đề của hệ điều hành, bạn sẽ thấy trang web chuyển đổi từ chủ đề này sang chủ đề khác.

Kết luận

Lưu ý rằng việc sử dụng prefers-color-scheme không khác gì việc sử dụng một ngôn ngữ lập trình thông thường. Chúng ta xác định các biến có giá trị thay đổi dựa trên một số logic. Và các biến đó được sử dụng cho các hoạt động tiếp theo.

Khả năng cho phép trang web của bạn điều chỉnh theo chủ đề mà người dùng lựa chọn là một tính năng tuyệt vời. Và nó càng làm mờ ranh giới giữa máy tính để bàn và web vì lợi ích của người dùng. Các phiên bản trình duyệt mới nhất hỗ trợ prefers-color-scheme, vì vậy bạn có thể bắt đầu thử tính năng này ngay hôm nay.

Câu hỏi thường gặp

Truy vấn phương tiện `prefers-color-scheme` hoạt động như thế nào?

Truy vấn phương tiện `prefers-color-scheme` kiểm tra cài đặt chế độ màu (light hoặc dark) của hệ điều hành người dùng. Nó cho phép CSS áp dụng các kiểu khác nhau dựa trên tùy chọn này, tạo ra một trải nghiệm nhất quán giữa hệ điều hành và website.

Tôi có cần sử dụng các biến CSS không?

Sử dụng biến CSS (ví dụ: `var(–body-bg)`) được khuyến khích để quản lý hiệu quả các kiểu cho chế độ sáng và tối. Điều này làm cho việc thay đổi kiểu dễ dàng hơn và giúp mã CSS sạch hơn, dễ bảo trì hơn.

`prefers-color-scheme` hỗ trợ những giá trị nào khác ngoài `light` và `dark`?

Hiện tại, `prefers-color-scheme` chủ yếu hỗ trợ `light` và `dark`. Mặc dù tiêu chuẩn W3C cho phép hỗ trợ các giá trị khác trong tương lai, nhưng hiện nay chỉ có hai giá trị này được trình duyệt hỗ trợ rộng rãi.

Dưới đây là một số ví dụ CSS đơn giản để bạn có thể thực hiện một số thay đổi cơ bản trên trang web.

10 ví dụ code CSS dễ học nhất trong 10 phút

1. Định dạng văn bản

Với CSS, bạn không cần phải thay đổi thuộc tính của từng phần tử HTML. CSS có thể áp dụng thuộc tính cho tất cả các tag trong file HTML.

Giả sử bạn muốn mọi đoạn văn trong thẻ <p> lớn hơn bình thường một chút và thay đổi màu chữ thành màu xám đậm  thì có thể code CSS như thế này:

p { font-size: 120%; color: dimgray; }

Bất cứ khi nào trình duyệt hiển thị một đoạn văn, văn bản đó sẽ có kích thước (lớn hơn 120 phần trăm so với bình thường) và có màu “dimgray”.

Nếu bạn muốn biết mình có thể sử dụng những màu nào trong CSS thì có thể xem danh sách màu của Mozilla tại đây.

2. Thay đổi thuộc tính chữ

Nếu bạn muốn thu nhỏ chữ viết hoa thì có thể sử dụng đoạn code dưới đây để áp dụng cho các tag <p> trong file HTML.

p.smallcaps { font-variant: small-caps; }

Để áp dụng chỉ 1 tag <p> trong file HTML thì bạn có thể dùng thuộc tính class.

<p class="smallcaps">Your paragraph here.</p>

Thêm dấu chấm và tên class vào trong file CSS. Chỉ có phân tử html sử dụng class đó mới áp dụng được thuộc tính bạn viết trong file CSS mà thôi.

Nếu bạn muốn thay đổi một tập hợp văn bản thành một trường hợp cụ thể, hãy sử dụng code CSS sau:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Thuộc tính cuối cùng sẽ viết hoa chữ cái đầu tiên của mỗi câu.

3. Thay đổi màu liên kiết

Thay đổi thuộc tính không giới hạn ở các đoạn văn. Có 4 màu khác nhau mà bạn có thể áp dụng cho liên kết: màu tiêu chuẩn, màu đã truy cập, màu khi di chuột vào và màu khi bạn nhấn vào liên kết. Bạn có thể thử đoạn code CSS này để hiểu rõ hơn:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Tùy vào ngữ cảnh cụ thể và thao tác của người dùng mà liên kết sẽ đổi màu theo

4. Xóa đường gạch dưới của liên kết

Các liên kết sẽ trở nên đẹp hơn nếu bạn loại bỏ phần gạch trên dưới liên kết bằng cách sử dụng thuộc tính “text-decoration”. Bạn có thể sử dụng đoạn code CSS dưới đây để loại bỏ dấu gạch chân đó:

a { text-decoration: none; }

Bất kỳ thứ gì có thẻ liên kết (“a”) sẽ không được gạch chân. Bạn muốn thêm dấu gạch dưới khi người dùng di chuột qua liên kết? Chỉ cần sử dụng:

a:hover { text-decoration: underline; }

Bạn cũng có thể áp dụng thuộc tính này vào các liên kết active để đảm bảo gạch chân không biến mất khi bạn nhấp vào liên kết.

5. Tạo nút liên kết bằng CSS

Bạn muốn liên kết của bạn thu hút nhiều sự chú ý hơn? Vậy thì bạn có thể tạo một nút bấm liên kết bằng code CSS dưới đây:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Mình sẽ giải thích đoạn code CSS trên.

Đoạn code bao gồm tất cả bốn trạng thái liên kết đảm bảo rằng nút liên kết (button) không biến mất khi người dùng di chuột qua hoặc nhấp vào nó. Bạn cũng có thể đặt các thông số khác nhau cho 4 trạng thái của liên kết, ví dụ: thay đổi màu nút hoặc văn bản.

Màu nền được đặt bằng thuộc tính background-color và màu văn bản là color. Padding xác định kích thước của button.

Text-align đảm bảo rằng văn bản được hiển thị ở trung tâm của button, thay vì lệch sang một bên. Mình cũng loại bỏ dấu gạch dưới của liên kết như đã nói ở trên.

“display: inline-block” phức tạp hơn một chút. Tóm lại, nó cho phép bạn thiết lập chiều cao và chiều rộng của đối tượng. Ngoài ra, các items sẽ được xếp cùng nhau trên một dòng.

6. Tạo hộp văn bản

Một đoạn văn đơn giản sẽ không có gì thú vị. Nếu bạn muốn làm nổi bật một phần tử trên trang, bạn có thể thêm đường viền xung quanh đoạn văn bản đó. Ví dụ đoạn code CSS sau:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Nó sẽ tạo ra một đường viền màu tím, rộng năm pixel, xung quanh bất kỳ đoạn văn nào có class important. Để tạo một đoạn văn được áp dụng thuộc tính trên, bạn chỉ cần code:

<p class="important">Your important paragraph here.</p>

Có nhiều kiểu viền khác nhau mà bạn có thể áp dụng ngoài “solid” như “dotted” hoặc “double”. Trong khi đó, chiều rộng (width) có thể là  “thin”, “medium”, hoặc “thick”. Thậm chí, bạn còn có thể xác định độ dày của từng cạnh đường viền:

border-width: 5px 8px 3px 9px;

Đường viền trên cùng là 5 pixel, đường viền bên phải là 8 pixel, đường viền dưới là 3 pixel và đường viền bên trái là 9 pixel.

7. Căn giữa đối tượng

Đối với các tác vụ thông thường, việc căn giữa các phần tử bằng code CSS sẽ không trực quan. Tuy nhiên, bạn sẽ quen khi thực hiện được một vài lần.

Đối với phần tử khối (block element), thường là hình ảnh, bạn có thể sử dụng thuộc tính margin:

.center { display: block; margin: auto; }

Phần tử được hiển thị dưới dạng một khối (block) và lề (margin) ở mỗi bên được đặt tự động. Nếu bạn muốn căn giữa tất cả các ảnh trên một trang nhất định, bạn chỉ cần thêm “margin: auto” vào thẻ img:

img { margin: auto; }

Nhưng nếu bạn muốn căn giữa văn bản bằng CSS thì sao? Hãy sử dụng đoạn code CSS này:

.centertext { text-align: center; }

Vậy là bạn chỉ cần thêm class “centertext” vào thẻ để căn giữa văn bản.

<p class="centertext">This text will be centered.</p>

8. Điều chỉnh padding

Padding của một phần tử sẽ chỉ định bao nhiêu không gian ở mỗi bên của phần tử. Ví dụ: nếu bạn thêm 25 pixel padding vào cuối phần tử ảnh, văn bản phía dưới ảnh sẽ bị đẩy xuống 25 pixel. Nhiều phần tử có thể thêm padding chứ không chỉ mỗi hình ảnh.

Giả sử bạn muốn mọi hình ảnh có 20 pixel padding ở hai bên trái và phải và 40 pixel ở trên cùng và dưới cùng. Vậy thì chỉ cần bạn code:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

9. Highlight các hàng trong bảng

CSS làm cho bảng trông đẹp hơn nhiều so với mặc định. Thêm màu, điều chỉnh đường viền và làm cho bảng của bạn tự động điều chỉnh kích thước khi hiển thị trên điện thoại. Ví dụ code CSS đơn giản này sẽ cho bạn thấy cách làm nổi bật các hàng trong bảng khi bạn di chuột qua chúng.

tr:hover { background-color: #ddd; }

Bây giờ bất cứ khi nào bạn di chuột qua một ô trong bảng, hàng đó sẽ thay đổi màu.

10. Làm trong suốt và làm mờ ảnh

CSS cũng có thể giúp bạn làm những điều thú vị với ảnh. Bạn có thể làm mờ ảnh với đoạn code CSS dưới đây:

img { opacity: 0.5; filter: alpha(opacity=50); }

Thuộc tính “filter” hoạt động tương tự như “opacity”, nhưng Internet Explorer 8 trở về trước không nhận dạng được độ mờ. Vậy nên đối với các trình duyệt cũ hơn, bạn nên thêm thuộc tính “filter”.

Bây giờ hình ảnh đã hơi trong suốt, bạn có thể làm cho chúng mờ hoàn toàn khi di chuột qua:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Trên đây là 10 ví dụ code CSS dễ hiểu nhất mà bạn có thể học trong 10 phút. Bạn có thấy dễ hiểu không nào? Ngoài ra, bạn cũng có thể học thêm về 17 ví dụ HTML trong 10 phút tại đây.

Câu hỏi thường gặp

CSS là gì và tại sao tôi cần nó?

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng HTML. Nó giúp bạn tạo nên giao diện đẹp mắt và chuyên nghiệp cho website của mình, thay đổi màu sắc, font chữ, bố cục… một cách dễ dàng mà không cần chỉnh sửa trực tiếp code HTML.

Tôi có thể thay đổi màu sắc của văn bản như thế nào bằng CSS?

Bạn có thể thay đổi màu sắc văn bản bằng thuộc tính color trong CSS. Ví dụ: p { color: blue; } sẽ làm cho tất cả văn bản trong thẻ <p> có màu xanh.

Làm thế nào để căn giữa một hình ảnh bằng CSS?

Để căn giữa một hình ảnh, bạn có thể sử dụng thuộc tính margin: 0 auto; kết hợp với display: block;. Ví dụ: img { display: block; margin: 0 auto; } sẽ căn giữa tất cả các hình ảnh trên trang.

TailwindCSS là gì?

Tailwind là một framework CSS ưu tiên tiện ích (utility-first) được sử dụng để nhanh chóng xây dựng giao diện người dùng hiện đại mà không cần lo lắng về xung đột trong việc đặt tên. Tên class của tiện ích mô tả chức năng của class, chẳng hạn như đặt padding thành 4px, thì có thể đặt tên là topnav. Bạn có thể đặt tên thoải mái nhưng vẫn được quản lý cẩn thận bởi Tailwind giúp việc tạo các trang web đẹp và responsive trở nên cực kỳ đơn giản mà không cần viết một dòng CSS nào.

Dưới đây là 10 lý do hàng đầu mà mình chọn Tailwind CSS:

10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo

1. Tailwind tiết kiệm thời gian hơn

Các lớp tiện ích (utility classes ) của Tailwind giúp bạn khỏi đau đầu khi viết và duy trì hàng đống code CSS khổng lồ từ đầu.

Một lớp tiện ích của Tailwind tương ứng với một tập hợp nhỏ các CSS. Ví dụ:

• p-4 có nghĩa là padding: 1rem (các hậu tố số trong Tailwind thường là bội số của 0,25 rem)
• m-4 nghĩa là margin: 1rem
• text-lg có nghĩa là font-size: 1.125rem; line-height: 1,75rem
• Kết hợp tất cả lại với nhau, HTML này có kích hoạt CSS Tailwind rồi nhé

<div class="p-4 m-4 text-lg">
  Hello world
</div>

Tương đương với HTML cơ bản này:

<div style="padding: 1rem; margin: 1rem; font-size: 1.125rem; line-height: 1.75rem">
  Hello world
</div>

Với sự trợ giúp của các lớp tiện ích này, chúng ta không phải xây dựng mọi thứ lại từ đầu và có thể tạo các trang web tốt hơn trong thời gian ngắn hơn.

2. Các Lớp Tiện ích Tuân theo Nguyên tắc Trách nhiệm Đơn lẻ

Các lớp tiện ích của Tailwind được thiết kế để phục vụ một mục đích cụ thể. Ví dụ:

• w-4 có nghĩa là width: 1rem;
• bg-transparent có nghĩa là background-color: transparent;
  Một số lớp tiện ích cũng đóng gói nhiều hơn 1-3 khai báo CSS cùng một lúc.

Các lớp này gần giống như các phím tắt để viết code trực tiếp với các thuộc tính style. Trong nhiều năm nay, điều này thường được coi là dài dòng đến mức khó chịu, nhưng gần đây, nhiều nhà phát triển đã lập luận rằng một khi bạn đã quen với style lớp tiện ích , bạn sẽ thấy rằng điều đó có nghĩa là các phần tử HTML của bạn không can thiệp vào nhau, điều này giúp đơn giản hóa việc gỡ lỗi.

Ví dụ: khi không có class .card và không có class .featured trên toàn trang web, thì sẽ không có chuyện gì xảy ra với:

<div class="featured card">

Tailwind CSS bao gồm hàng nghìn lớp tiện ích độc lập như vậy và bạn có thể kết hợp chúng một cách sáng tạo để xây dựng các thành phần trang web được tùy chỉnh cao, bất kể bạn đặt chúng ở đâu trên trang.

3. Tài liệu của Tailwind là Top-Notch

TailwindCSS không chỉ đơn giản code mà còn đơn giản cả tài liệu.

Đó là một nơi tuyệt vời để bắt đầu tìm hiểu về cách hoạt động của framework. Bạn có thể dễ dàng truy cập bất kỳ chủ đề nào trên trang web của họ. Tìm kiếm width sẽ đưa bạn đến hướng dẫn width, nhưng tìm kiếm w-8 cũng vậy, vì vậy việc truy cập tài liệu trở nên dễ dàng hơn, ngay cả đối với các nhà phát triển mới làm quen với các frameworks CSS.

4. Một cộng đồng lớn và đang phát triển

Đánh giá mức độ phổ biến của một frameworks trước khi chuyển sang nó luôn luôn là một ý tưởng hay. Đối với các frameworks có lượng người theo dõi vững chắc, sẽ dễ dàng hơn khi tìm thấy các nhà phát triển tuyệt vời và các cộng đồng trực tuyến hỗ trợ để giúp đỡ khi bạn gặp khó khăn.

Sự phổ biến rộng rãi của TailwindCSS trong cộng đồng nhà phát triển có nghĩa là các vấn đề tiềm ẩn có thể được giải quyết dễ dàng hơn với sự hỗ trợ của cộng đồng.

5. Không còn Media Queries

Mọi lớp tiện ích trong TailwindCSS đều có thể được áp dụng có điều kiện tại các breakpoints khác nhau, có nghĩa là chúng ta không phải tạo các tệp media query riêng biệt để làm các component responsive. Tailwind, theo mặc định, cung cấp 5 breakpoints khác nhau:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Xem ví dụ này:

<img class="w-16 md:w-32 lg:w-48" src="...">

Hình ảnh của chúng ta có chiều rộng mặc định là 4rem, chiều rộng này sẽ bị 8rem và 12rem ghi đè khi viewport phát triển đến các breakpoints md và lg, tương ứng.

Nếu các breakpoints mặc định không đủ, chúng ta cũng có thể tạo các breakpoints tùy chỉnh.

6. Không tạo các Component

Tailwind không đi kèm với các kiểu component có thể sử dụng lại như .modal hoặc .navbar, nhưng nó cho phép chúng ta tạo các class tùy chỉnh có thể sử dụng lại từ các class Tailwind khác với @apply.

Chúng ta có thể tạo một class tiện ích tùy chỉnh để tìm hiểu cách thức hoạt động trên.

.card {
  @apply w-20 h-20 bg-blue-700;
}

Bây giờ chúng ta đã tạo class .card tùy chỉnh của riêng mình trong TailwindCSS và chúng ta có thể thoải mái sử dụng lại nó như thể nó là một class Tailwind giống như bất kỳ class nào khác. (Bao gồm như một phần của định nghĩa về một class khác với @apply.)

7. Loại bỏ các class không sử dụng

Để làm cho trải nghiệm phát triển của chúng ta trở nên suôn sẻ, Tailwind tạo ra hàng nghìn lớp tiện ích, hầu hết trong số đó không được sử dụng trong phiên bản sản phẩm chính thức.

Để khắc phục vấn đề này, Tailwind có tính năng loại bỏ mọi lớp tiện ích không sử dụng khỏi phiên bản sản phẩm chính thức.

Việc xóa các lớp không sử dụng sẽ làm giảm đáng kể kích thước tệp CSS được gửi đến người dùng, dẫn đến trang web được tải nhanh hơn.

8. Phong cách riêng

Giống như nhiều frameworks khác, TailwindCSS cũng có phong cách riêng. Một ví dụ là các yếu tố định cỡ được sử dụng. .m-4 có nghĩa là 1rem và m-5 có nghĩa là 1.25rem. Vậy 0,25rem ở giữa thì sao?

Chúng ta coi đây là những ý kiến ​​hữu ích vì chúng thúc đẩy tính nhất quán trong thiết kế. Rất hiếm khi cần chi tiết hơn các tùy chọn mà chúng ta đưa ra với Tailwind. Nhưng, nếu chúng ta cần, nó có thể định cấu hình và nó chỉ là CSS, vì vậy chúng ta luôn có thể thiết lập các phong cách của riêng mình.

9. Tránh các quy tắc đặt tên

Đặt tên cho các class trong CSS là một vấn đề lớn(nghiêm túc đấy, bạn đã bao giờ tham gia một cuộc họp chỉ để thảo luận về tên class chưa? Mình thì có rồi và mình không muốn trải qua điều đó 1 lần nào nữa).

Mặc kệ có các nguyên tắc quy ước đặt tên phổ biến, như BEM, Tailwind vẫn thắng trận bằng cách loại bỏ nhu cầu viết các lớp CSS tùy chỉnh. Thường thì các lớp tiện ích của Tailwind là đủ để xây dựng web rồi.

10. Cảm giác như viết CSS

TailwindCSS giúp bạn dễ dàng tạo giao diện người dùng tuyệt vời cho cả nhà phát triển cấp cơ sở và cấp cao với sự trợ giúp của các lớp tiện ích. Như đã đề cập trong lý do 2, các tiện ích chủ yếu chỉ là một tham chiếu lớp cho một styles cụ thể. Bạn sẽ nhanh chóng cảm thấy giống như viết CSS, so với việc học một framework như Bootstrap, bao gồm học một hệ thống các components được đặt tên.

Tuy nhiên, TailwindCSS không hoàn hảo

Tailwind, giống như bất kỳ framework nào khác, nó không hoàn hảo. Vấn đề phổ biến nhất là các chuỗi dài của các lớp có thể trở nên khó đọc, ngay cả trong các trường hợp sử dụng phổ biến.

Nhưng sau khi đánh giá tổng quan, những mặt tích cực của TailwindCSS vượt trội hơn hẳn những mặt tiêu cực.

Ngoài ra, bạn cũng có thể xem thêm nhiều thiết kế CSS đẹp tại đây.

Câu hỏi thường gặp

Tailwind CSS có khó học không?

Không khó! Tailwind CSS sử dụng các lớp tiện ích dễ hiểu, có tên mô tả chức năng. Tài liệu của nó cũng rất tốt và dễ tiếp cận, giúp người mới bắt đầu nhanh chóng làm quen.

Tailwind CSS có thay thế được Bootstrap không?

Tailwind CSS và Bootstrap phục vụ các mục đích khác nhau. Bootstrap cung cấp các thành phần giao diện người dùng sẵn có, trong khi Tailwind CSS cung cấp các lớp tiện ích để xây dựng giao diện tùy chỉnh. Sự lựa chọn phụ thuộc vào nhu cầu dự án của bạn.

Tôi có thể sử dụng Tailwind CSS với các framework khác không?

Có thể! Tailwind CSS hoạt động tốt với hầu hết các framework JavaScript phổ biến như React, Vue, và Angular. Nó cũng có thể được tích hợp vào các dự án sử dụng HTML thuần túy.

Đó là lý do tại sao mình đề xuất các bạn nên trải nghiệm Coinwink trước rồi sau đó quay lại đây để đọc tiếp bài viết.

Trong tài khoản Coiwink, hãy chuyển từ theme Classic sang Matrix, và bạn sẽ thấy một ma trận siêu ngầu hiện ra ngay thôi.

Thế giới diệu kỳ của CSS

Trong tháng trước, đã có rất nhiều bản cập nhật front-end được update cho Coinwink.

Tệp CSS trước đó chính xác là một mớ hỗn độn. Do 4 năm trước, rất nhiều styles mới không có cấu trúc cùng nhau ghi đè, chèn thêm vào file css.

Để sửa một file kiểu hỗn loạn như vậy cần phải mất khá nhiều thời gian. Đây là những bản fix nhỏ nhưng chúng rất tốn thời gian và hầu như chẳng có thay đổi gì xảy ra cả. Tại sao lại vậy?

Bởi vì những thay đổi này xảy ra ở sau hậu trường. Ví dụ: đã có một khu vực vô hình click/tap bự hơn cho button. Người dùng sẽ không thấy sự khác biệt, nhưng họ có thể cảm thấy điều đó bằng trực giác.

“Bạn biết những thứ bạn không thể giải thích, nhưng bạn có thể cảm nhận được nó” – Morpheus

Tất cả những thay đổi nhỏ này tạo ra trải nghiệm mượt mà và làm cho web-app giống như một ứng dụng gốc.

Coinwink đã thay đổi những gì?

• Vô hiệu hoá khă năng zoom trên các thiết bị di động
• Vô hiệu hoá bôi đen văn bản trên thiết bị di động
• Tạo các vùng chạm vô hình lớn hơn cho các elements có thể click
• Tách trạng thái :hover và :active trên PC và mobile.
• Giảm thiệu giật lag
• Thêm icon cho icon cho mobile, theme color,….
• Tạo các mẫu elements tuỳ chỉnh (inputs, drop-downs, buttons, checkboxes,…) với phong cách nhất quán trên tất cả các trình duyệt
• Tuỳ chỉnh scrollbars

Và một vài điều chỉnh ở đâu đó nữa. Một số thay đổi này được triển khai hầu hết trong các CSS frameworks, nhưng Coinwink không sử dụng framework vì các frameworks tương tự thường dẫn đến cảm giác chung hoặc nhàm chán và cũng nặng ứng dụng hơn nhiều so với việc tuỳ chỉnh CSS.

Ngoài ra, trong các bản cập nhật gần đâu, các thay đổi quan trọng về cấu trúc đã được thực hiện. Vì vậy khi nhìn từ client, chúng ta sẽ không thấy gì cả.

Cấu trúc mới cho phép chúng ta dễ dàng thay đổi style, xây dựng các tính năng front-end, và giờ đây chúng ta đã có thể tạo thêm các theme mới.

Giới thiệu về theme Matrix mới

Theme đầu tiên được xây dựng trên Coinwink mới là Matrix.

“Ma trận ở khắp mọi nơi. Đó là tất cả xung quanh chúng ta. Ngay cả bây giờ, trong căn phòng này.” – Morpheus

Từ quan điểm dựa trên các khái niệm trên, Ma trận là một chiều khác của thực tế, hoặc mô phỏng (nếu bản thân thực tế không phải là mô phỏng). Khái niệm này có ý nghĩa sâu sắc tuỳ vào các nền văn hoá khác nhau, và điều này truyền vào chủ đề Matrix các câu chuyện và biểu tượng mới.

“Bạn uống viên thuốc đỏ – bạn sẽ ở trong Wonderland và tôi sẽ cho bạn thấy cái hố đó sâu đến đâu.” – Morpheus

Chuyến sang theme Matrix sẽ tạo ra hiệu ứng chuyển đổi sang một chiều không gian khác. Để trải nghiệm Matrix, hãy chuyển theme trong tài khoản Coinwink của bạn sang Matrix.

Tương tự như các bản cập nhật khác, theme Coinwink Matrix cực kỳ nhẹ. Khi được kích hoạt, nó chỉ tốn thêm khoảng 20KB mà thôi.

Matrix là chủ đề đầu tiên – giới thiệu những tính năng mới. Nền động bây giờ có thể quá nổi bật, nên trong tương lai gần, nó có thể bị tắt hoặc làm cho nó ít nổi bật hơn.

Các theme được lên kế hoạch cho tương lai.

Để tải mã nguồn. Các bạn truy cập vào trang github của Coinwink.

Hãy cho mình biết bạn nghĩ sao về theme Matrix mới? Những chủ theme và tính năng nào khác mà bạn muốn xuất hiện trong tương lai?

Coinwink là web dự báo về giá tiền điện tử, tạo các danh sách theo dõi giá và danh mục đầu tư cho Bitcoin, Ethereum và hơn 2500 đồng tiền điện tử và tokens khác.

Các bạn đã có code mà không biết chạy web như thế nào? Hãy đọc bài viết Tạo website bằng github trong 15 phút nhé.

Câu hỏi thường gặp

Tôi cần làm gì để xem theme Matrix trên Coinwink?

Vui lòng truy cập vào tài khoản Coinwink của bạn và chuyển từ theme Classic sang Matrix. Bạn sẽ thấy giao diện ma trận ấn tượng ngay lập tức!

Theme Matrix có ảnh hưởng đến hiệu năng của trang web không?

Không đáng kể! Theme Matrix chỉ làm tăng thêm khoảng 20KB dung lượng, vì vậy nó rất nhẹ và không ảnh hưởng đến tốc độ tải trang.

Tôi có thể tìm mã nguồn của theme Matrix ở đâu?

Mã nguồn được lưu trữ trên kho lưu trữ GitHub của Coinwink. Bạn có thể truy cập vào đó thông qua liên kết được cung cấp trong bài viết.

Code website tỏ tình 2018

Giới thiệu về Profile Page

Là trang giới thiệu bản thân và hiển thị thông tin liêc lạc đến người khác thông qua trang website. Bất cứ ai cũng muốn giới thiệu bản thân đến bạn bè, đồng nghiệp hoặc đối tác một cách chu đáo, chuyên nghiệp và ấn tượng.

Do đó, nếu bạn sở hữu một trang Profile độc đáo thì người khác sẽ ấn tượng và đánh giá cao về bạn. Cho thấy bạn là một đối tác khá chuyên nghiệp và đáng tin tưởng. Thử hỏi nếu bạn làm một trang giới thiệu bản thân sơ xài thì người ta có dám đặt niềm tin ?

Trang Profile này có gì đặc biệt ?

Trang được áp dụng Bootstrap 4 và Angular Js nhiều. Đảm bảo hỗ trợ tốt việc hiển thị đa nền tảng – tương thích mọi thiết bị kể cả di động. Do đó, sẽ tăng tính thân thiện của website và mang đến cảm giác chuyên nghiệp.

Hiển thị trên máy tính

Hiển thị trên di động

Tương thích cả trên Ipad

Giao diện và bố cục được mình dành nhiều thời gian sắp xếp cẩn thận. Màu sắc và Icons được mình chọn lựa rất kĩ càng. Mang lại cảm giác thiết kế Material, hiện đại và chuyên nghiệp hơn.

Ngoài ra, những hiệu ứng Scroll Action, Draw vector được áp dụng phù hợp tạo nên các chuyển động nhẹ nhàng. Không gây khó chịu cho người dùng.

Video demo

Trên đây là video trải nghiệm thực tế sau khi đã upload lên host của mình. Bây giờ, mình sẽ hướng dẫn bạn cách chỉnh sửa code của mình ngay tại phần dưới đây.

Lưu ý

Do lần trước một số bạn có lấy code của mình đi share và đem đi buôn bán, kinh doanh. Cho nên lần này mình sẽ nén code lại và dùng Angular JS để binding dữ liệu. Việc này sẽ làm trục trặc việc hiển thị lúc đầu một tí nhưng không ảnh hưởng nhiều.

09-03-2018-09-16-01

09-03-2018-10-13-08

09-03-2018-10-13-43

Hướng dẫn chỉnh sửa Source Profile Web page

Trước khi chỉnh sửa code web thì mình mong các bạn có thể đáp ứng được các yêu cầu cần thiết dưới đây.

• Chuẩn bị một phần mềm chỉnh sửa code web cần thiết – mình dùng Sublime Text 3.
• Biết cách dùng Ctrl + F để tìm kiếm code web.
• Có kiến thức cơ bản về HTML.
• Biết phân biệt ảnh .jpg và .png.

Hướng dẫn chỉnh sửa code web

Đầu tiên bạn tải về và giải nén ra (extract) sẽ thấy được đống file như ảnh dưới đây. Ai có thắc mắc hãy liên hệ mình qua Facebook fb.com/minhthong.lu.58

• img: thư mục chứa hình ảnh sử dụng trong website.
• Javascript: thư mục chứa toàn bộ code Javascript của website.
• index.html: Trang hiển thị của website.
• main.css: file chứa code css của website.

Bạn vào thư mục Javascript và mở file nlar.js bằngchương trình chỉnh sửa code. Đây là file chứa code web Angular js và toàn bộ nội dung chữ hiển thị trên website.

Rất cả nội dung chữ hiển thị trên trang web mình viết tại đây. Bạn sẽ chỉnh nội dung trong ngoặc kép “” thành nội dung mà bạn muốn.

Mở file index.html

Tuy nhiên vì tên Lư Minh Thông mình phải Charming chữ ra để làm hiệu ứng. Nên nếu muốn thay đổi thì bạn phải vào index.html mà chỉnh.

Ctrl + F để tìm chữ Lư Minh Thông và đổi thành tên của bạn.

Chỉnh sửa hình ảnh

Trong thư mục img mình có để hai ảnh story1.jpg và story2.png để làm hai ảnh bài viết trên website.

Bạn tải ảnh mà bạn thích và lưu trong thư mục img. Sau đó, vào file index.html và ấn Ctrl + F rồi tìm như cách trên nhé. Sau đó sửa tên ảnh thành ảnh mà bạn muốn.

Download

Nhớ bỏ qua quảng cáo để ủng hộ mình nhé !

Lưu ý: nếu Upload lên host bị lỗi không chạy được, hãy đổi tên thư mục Javascript thành javascript (chữ j viết thường).

Vậy là xong. Ngoài ra hi vọng bạn không thay đổi bất cứ gì thêm để tránh hư code, hỏng code. Nếu có thắc mắc hãy liên hệ mình tại facebook: fb.com/minhthong.lu.58

Chúc bạn thành công
Lmint.

Câu hỏi thường gặp

Tôi cần những kiến thức gì để chỉnh sửa code?

Bạn cần kiến thức cơ bản về HTML và biết sử dụng Ctrl + F để tìm kiếm trong code. Việc biết phân biệt giữa file ảnh .jpg và .png cũng sẽ giúp ích.

Làm thế nào để thay đổi thông tin cá nhân trên trang Profile?

Mở file `nlar.js` trong thư mục `Javascript` và thay đổi nội dung trong dấu ngoặc kép “” để cập nhật thông tin của bạn. Để thay đổi tên, hãy tìm kiếm tên hiện có trong file `index.html` và thay thế bằng tên của bạn.

Nếu tôi gặp sự cố khi upload lên host, tôi nên làm gì?

Hãy thử đổi tên thư mục `Javascript` thành `javascript` (chữ j viết thường). Nếu vẫn gặp vấn đề, hãy liên hệ với chúng tôi qua Facebook: fb.com/minhthong.lu.58