Cách tạo Logo RSS Feed bằng CSS3
Logo RSS feed là một trong những logo được sử dụng phổ biến nhất trong thiết kế web, do chức năng mà nó đề cập. Bạn đã thấy nhiều hướng dẫn vẽ logo RSS feed bằng phần mềm đồ họa như Photoshop, nhưng còn về vẽ nó hoàn toàn bằng CSS3? Yeap, bạn đã nghe tôi :-)
Trong cơ hội này, tôi muốn chỉ cho bạn cách dễ dàng để tạo logo nguồn cấp RSS tiêu chuẩn chỉ bằng CSS3, vì vậy hãy làm theo hướng dẫn với các bước và đồ họa toàn diện để có logo nguồn cấp dữ liệu CSS3 đầu tiên của bạn!
Đây là bản xem trước những gì bạn sẽ tạo trong một phút. Bạn cũng có thể tải xuống các tệp nguồn ở cuối hướng dẫn.
Bước 1
Tạo một tệp HTML, chèn đoạn mã sau vào tệp nếu nó hoàn toàn trống.
Logo RSS3 đầu tiên của tôi - Chèn HTML của bạn vào đây -
Bước 2
Chèn mã dưới đây vào tệp HTML để tạo hộp nguồn cấp dữ liệu.
HTML cho hộp thức ăn
CSS cho hộp thức ăn
span.feed-box display: block; chiều rộng: 200px; chiều cao: 200px; lề: 0 tự động; nền: # F9A004; hộp bóng: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-box-Shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px -webkit-box-Shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px -moz-viền-bán kính: 20px; -webkit-Border-radius: 20px; bán kính đường viền: 20px; span.feed-box * float: right; hiển thị: khối;
Đây là kết quả bạn sẽ đạt được:
Bước 3
Chúng tôi sẽ vẽ một hộp khác nằm trong hộp nguồn cấp đầu tiên, vì vậy hãy đặt mã HTML bên dưới vào mã HTML của hộp cấp dữ liệu đầu tiên. Chúng tôi cũng sẽ thêm biên giới làm rào cản ở đây.
HTML cho Hộp thức ăn nhỏ hơn
CSS cho hộp thức ăn nhỏ hơn
span.feed-box .feed-box-in Border: 4px solid # FFC563; chiều rộng: 184px; chiều cao: 184px; lề: 4px 4px 0 0; -moz-viền-bán kính: 20px; -webkit-Border-radius: 20px; bán kính đường viền: 20px; / * tràn: ẩn; * /
Đây là kết quả bạn sẽ đạt được:
Bước 4
Trong bước này, chúng tôi sẽ thực hiện 1/4 vòng tròn lớn. Đặt mã HTML của 1/4 vòng tròn lớn vào mã HTML của hộp thức ăn nhỏ hơn và bên dưới là mã của nó:
HTML cho 1/4 Vòng tròn lớn
CSS cho 1/4 Vòng tròn lớn
span.feed-box .feed-box-in .feed-quarter-circle-big lề: 16px 16px 0 0; chiều rộng: 260px; chiều cao: 260px; viền: 30px solid # FFDEA5; -moz-viền-bán kính: 260px; -webkit-Border-radius: 260px; bán kính đường viền: 260px;
Đây là kết quả bạn sẽ đạt được:
Bước 5
Chúng tôi sẽ tạo 1/4 vòng tròn nhỏ ngay bây giờ, đặt mã HTML bên dưới vào mã HTML của vòng tròn lớn.
HTML cho 1/4 Vòng tròn nhỏ
CSS cho 1/4 vòng tròn nhỏ
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small lề: 16px 16px 0 0; chiều rộng: 176px; chiều cao: 176px; viền: 26px solid # FFDEA5; -moz-viền-bán kính: 176px; -webkit-Border-radius: 176px; bán kính đường viền: 176px
Đây là kết quả bạn sẽ đạt được:
Bước 6
Ở bước 6, vòng tròn nhỏ nhất sẽ được tạo bên trong vòng tròn nhỏ, vì vậy hãy đặt mã HTML của nó vào mã HTML của vòng tròn nhỏ.
HTML cho vòng tròn nhỏ nhất
CSS cho vòng tròn nhỏ nhất
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle lề: 24px 24px 0 0; nền: # FFDEA5; chiều rộng: 70px; chiều cao: 70px; -moz-viền-bán kính: 70px; -webkit-Border-radius: 70px; bán kính đường viền: 70px
Đây là kết quả bạn sẽ đạt được:
Chi tiết cuối cùng
Tìm kiếm mã, / * tràn: ẩn; * / sau đó thay thế bằng mã này, tràn: ẩn;, vậy thì được! Bạn vừa đạt được logo CSS3 RSS Feed!
Phần thưởng: Thêm hiệu ứng Hover
Bạn sẽ không muốn logo RSS feed của mình mà không có hiệu ứng di chuột kỳ diệu, phải không? Chỉ cần thêm kiểu CSS bên dưới để đạt được nó!
CSS cho hiệu ứng di chuột
span.feed-box: hover nền: # 07C103; hộp bóng: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-bóng: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-Shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; span.feed-box: hover .feed-box-in Border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-quarter-circle-big, span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small viền màu: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle nền: # B9FFB7;
Xem trước và tải xuống
Dưới đây là bản xem trước của logo nguồn cấp dữ liệu CSS3 với các kích cỡ khác nhau và kiểu dáng khác nhau. Nếu bạn không thể đạt được một số bước nhất định, bạn cũng có thể tải xuống các tệp nguồn.
- Xem trước logo CSS3 RSS (lớn)
- Xem trước logo CSS3 RSS (Trung bình)
- Xem trước logo CSS3 RSS (nhỏ bé)
- Xem trước logo CSS3 RSS (trung bình, đảo ngược)
- Tải xuống tệp nguồn CSS CSS RSS (.zip)
Ghi chú của biên tập viên: Bài này được viết bởi Irham Kendeni cho Hongkiat.com. Irham, còn được gọi là Indaam, là một nhà thiết kế và phát triển web đến từ Indonesia. Anh ấy cũng thích phát triển chủ đề CSS và WordPress.
