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:
alt

Link ảnh các icons:
alt

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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

32 bài viết.
93 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết 12 tháng trước
40 5
White
35 7
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết hơn 1 năm trước
35 7
White
17 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết gần 2 năm trước
17 2
Bài viết liên quan
White
4 3
Đây là vấn đề đau đầu và thường gây tranh cải nhất trong khi bạn làm việc nhóm hoặc cả chính những lúc bạn muốn xem lại code của mình. Thối quen l...
tuds viết gần 2 năm trước
4 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
32 bài viết.
93 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!