Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Tạo bộ đếm Social thật đẹp bằng CSS
Tạo bộ đếm Social thật đẹp bằng CSS
Nguyễn Trung Hiếu
Share Code Web Company 2012

Tạo bộ đếm Social thật đẹp bằng CSS

Sự lan tỏa của internet và sức mạnh của Social Media Network ngày càng được thể hiện rõ nét hơn trong đời sống, nhất là những người làm SEO. Vậy thì bài viết này sẽ hướng dẫn các bạn tạo ra một bộ đếm những lượt like, share của các mạng xã hội nổi tiếng trên thế giới.

Đây là thành quả mà các bạn sẽ làm được
pure css badges
OK, chúng ta bắt tay vào thiết kế CSS cho nó nhé.
Đầu tiên chúng ta cần vài thẻ div có cấu trúc như bên dưới.

Viết mã css nhé.
Đầu tiên là đoạn khai báo yêu cầu include thêm font chữ bên ngoài vào.

Thứ hai là css cho phần body, tạo nền cho phần Badges của chúng ta

Thứ ba là căn giữa cái thẻ div có id=”wrapper”

Thứ tư, đoạn CSS sau sẽ giúp bạn tạo ra một hình tròn có màu nền từ xám tới trắng của thẻ div có class là cool_btn1

Thứ năm là style cho các thẻ heading bên trong

Thứ sáu, tạo viền cho hình tròn của chúng ta,

Thứ bẩy, khởi tạo các giá trị mầu cho hiệu ứng css thêm đẹp

Giờ là tới các class định dạng màu cho từng hình tròn của chúng ta. Đầu tiên là blue

Màu teal

Màu cam

màu xanh lá

Tiếp theo là hiệu ứng di chuột vào hình tròn sẽ làm nổi bật hình tròn đó lên

Và cuối cùng là tự động thay đổi kích thước của id=”wrapper”

Vậy là xong rồi đó, hy vọng bài viết này sẽ giúp bạn thỏa sức sáng tạo và design cho blog của mình thêm đẹp hơn. Chúc bạn thành công!

bài viết được chia sẻ bởi
Sharecodeweb.com

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Mục lục

Blog Stats

  • 5.918 hits
%d bloggers like this: