Tạo list icon cảm xúc facebook chỉ với html/css !

Intro Series khởi tạo list icon cảm xúc của Facebook

Thường thì chúng ta hay sử dụng các icon cảm xúc của facebook và nghĩ rằng có lẽ nó viết bằng javascript, thì thật ra cũng có javascript vào chổ đó nhưng ít thôi.

Còn ở series này chúng ta sẽ đi tìm hiểu việc tạo ra list icon này chỉ với HTML/CSS, sẽ hứa hẹn nhiều điều thú vị trong này mà bạn có thể áp dụng để làm các việc liên quan khác.

01 Dựng HTML cho list icon facebook

Ở video này chúng ta sẽ tiến hành khởi tạo nơi chứa thư mục project cũng như là lên cấu trúc html cho phần list icons sao cho phù hợp.

Mình không để code vào trong này vì muốn các bạn tự viết sẽ dễ dàng tiếp cận hơn là copy rồi paste

02 Tìm kiếm link ảnh của list icon facebook

Ở video này chúng ta sẽ tìm kiếm các tài liệu thô ví dụ như hình ảnh icon và tìm hiểu nó.

Link ảnh nút like:

Link ảnh các icons:

03 Tạo button like của facebook

Ở video này chúng ta tiến hành khởi tạo button like của file và xem qua kỹ thuật CSS sprice images

04 Tạo box list icon facebook

Ở video này chúng ta tiến hành tạo box list của các icon facebook, phần điểm tựa cho các icons góp phần khá quan trọng cho việc ẩn hiện.

05 Xác định vị trí cho list icons của facebook và co giản icon

Ở video này chúng ta sẽ xác định vị trí các icon của facebook cũng như là thuộc tính hover cho nó co giản được.

Trong video này chúng ta sẽ tiếp cận đến CSS3 để làm hiệu ứng, nó được sử dụng khác thường xuyên trong các chuyển động bằng CSS.

06 Khởi tạo label và căn giữa nó cho từng icon facebook

Lại là vấn đề căn giữa cho tài liệu, có khá nhiều cách, đây là một trong số các cách khá hữu ít và nhanh gọn lẹ để căn giữa.

07 P2 Đưa các icon của facebook vào bằng kỹ thuật CSS SPRITE

Ở video này chúng ta tìm hiểu kỹ thuật CSS Sprite để đưa các icon cảm xúc của facebook vào đúng vị trí.

CSS Sprite là gì? bạn cứ hình dung bạn có 1 tấm trải bàn, bạn cắt 1 lỗ thủng vừa đủ để xem được bên dưới cái bàn có gì thông qua cái lỗ thủng đó.

Việc còn lại là bạn phải kéo cái bàn có những hình ảnh đến đúng vị trí cái lỗ thủng đó.

08 Tìm hiểu về chuyển động của icon facebook

Ở video này chúng ta sẽ tìm hiểu về những chuyển động của các icon thông qua thuộc tính cubic-bezier

09 P1 Tạo tốc độ hiện icon facebook chỉ với CSS

Ở video này chúng ta đi vào phần custom cho các tốc độ khi hiển thị các icon hiện ra

11 Kết thúc series và những điều cần lưu ý

Ở video này sẽ chia sẻ với các bạn việc truy cặp lại nguồn source code để dễ dàng theo dõi, cũng như là tiện lợi hơn cho các bạn về sau.