30+ mẫu CSS Ribbon đẹp nhất cho website

30+ mẫu CSS Ribbon đẹp nhất cho website

Rate this post

30+ mẫu ribbon css đẹp nhất cho website

Các bài viết liên quan:

1. Ribbon Grid CSS

Đây là một CSS Ribbon được tạo bằng splitting.js. Nó có một mô hình zig-zag và có màu đỏ tươi. Nó chỉ có 50 dòng mã! Nó sẽ là hoàn hảo cho một trang đích mà bạn muốn thu hút sự chú ý của khách truy cập một cách nhanh chóng.

See the Pen CSS Grid Ribbon layout by Andy Barefoot (@andybarefoot) on CodePen.

2. Ribbon Animated CSS

Đây là một dải ribbon màu xanh lam rất thú vị được làm bằng CSS được làm động. Bạn có thể sử dụng điều này để làm cho một bảng điều khiển trên trang của bạn hiển thị tốt hơn.

See the Pen CSS Animated Ribbon by Josh Bader (@joshbader) on CodePen.

3. CSS Corner Ribbon

Đây là những cách tuyệt vời để hiển thị một thuộc tính nhất định của một mặt hàng trên trang của bạn. Tôi đặc biệt thích dải băng này vì css nguyên chất 100% của nó. Bạn không phải lo lắng về nhiều phụ thuộc CSS hoặc Javascript như JQuery, v.v. Điều này sẽ cắm ngay vào bất kỳ dự án nào bạn muốn.

See the Pen Demo: Pure CSS corner ribbon by Naoya (@nxworld) on CodePen.

4. CSS Bookmark Ribbon

Đây chỉ là một dải băng một phần tử khá tuyệt vời. Nó được tạo kiểu như một dải băng của Google Sách. Thật dễ dàng để tích hợp vì nó chỉ là một phần tử duy nhất.

See the Pen Google Books Ribbon Single element by 𝙰𝙽𝙳𝚈 𝚆𝙸𝙻𝙻𝙴𝙺𝙴𝙽𝚂 (@andywillekens) on CodePen.

5. Colorful Corner Ribbons

Có ý tưởng tuyệt vời về những dải ribbon góc mát mẻ này và quyết định chuẩn bị sẵn sàng để sử dụng. Các kiểu tùy chỉnh như màu sắc hoạt động với các thay đổi lớp đơn giản.

See the Pen Corner Ribbons by Miro Karilahti (@miroot) on CodePen.

6. Olive-Green Ribbon

Dành cho những người yêu thích màu xanh ô liu! Nó cũng có một phần tử trông như nút nhỏ ở trung tâm để tăng thêm hiệu ứng.

See the Pen Olive ribbon by Luca (@Kerruba) on CodePen.

7. Overlapping & Rotated Ribbon

Ribbon CSS – Thiết kế ribbon CSS3: Phần tử nền chồng chéo & xoay

See the Pen Ribbon Design: Overlapping & Rotated Background Elements by Aysha Anggraini (@rrenula) on CodePen.

8. CSS Ribbons – Striped Mail Gradient Ribbon

CSS Ribbons – Striped Mail Gradient Ribbon

See the Pen mail gradient ribbon by Nikolay_nmsk (@Nickolyashka) on CodePen.

9. Menu Ribbon

Đây là một dải băng hình mũi tên mát mẻ hướng xuống nội dung trang. Nó rất tốt để thu hút sự chú ý đến các yếu tố hoặc nội dung nhất định trên một trang. Màu đỏ tươi khó thiếu.

See the Pen Ribbon Menu by Takane Ichinose (@takaneichinose) on CodePen.

10. Ribbon Overlay Ribbon

Ribbon CSS – ribbon lớp phủ CSS3 thuần túy

Ruy-băng lớp phủ CSS3 thuần túy với hoạt ảnh trượt vào / trượt ra.

See the Pen Pure CSS3 Overlay Ribbon by Mauritius D’Silva (@mauritiusdsilva) on CodePen.

11. CSS Sale Ribbon

Ribbon này rất phù hợp để giới thiệu một ưu đãi hoặc giảm giá đặc biệt trên một trang web thương mại điện tử.

See the Pen CSS ribbon by web-tiki (@web-tiki) on CodePen.

12. The Glow Ribbon

Hình ảnh động phát sáng rất thú vị trên cái này.

See the Pen The glow ribbon by Manabjyoti Sarma (@manab_27) on CodePen.

13. PURE CSS3 RIBBON

Ribbon CSS – PURE CSS3 RIBBON

Đây là một ruy-băng css3 thuần túy được tạo ra một số biến đổi 2D.

See the Pen PURE CSS3 RIBBON by alberto tafoya (@withattribution) on CodePen.

14. Card Ribbon

Một dải ribbon kiểu thiệp do Tim Dunklee thiết kế.

See the Pen Ribbon Article by Tim D (@tjdunklee) on CodePen.

15. Ribbon Corner CSS

Sự sáng bóng ở các góc tạo thêm một nét đẹp và thực sự làm cho nó nổi bật. Rất đẹp!

See the Pen Pure CSS Corner Ribbon by Anthony Collurafici (@CSS3fx) on CodePen.

16. CSS Animated Ribbon

Bạn phải xem một hoạt hình này để thực sự đánh giá cao nó. Nó khá tuyệt.

See the Pen CSS Animated Ribbon by John Graham (@RobotsPlay) on CodePen.

17. Responsive Rounded Ribbon

ribbon CSS – ribbon tròn đáp ứng

See the Pen Responsive Rounded Ribbon by Diego Pardo (@diegopardo) on CodePen.

18. Ribbon CSS

Ribbon CSS có thể mở rộng hoàn toàn. Thay đổi kích thước phông chữ và chiều cao dòng để bạn tự xem.

See the Pen CSS Ribbon by Simon Coudeville (@simoncoudeville) on CodePen.

19. Single Element CSS Banner

Ribbon CSS – Biểu ngữ CSS một phần tử

See the Pen Single element CSS banner by Anders Grimsrud (@agrimsrud) on CodePen.

20. Ribbon CSS3

Ribbon CSS – ribbon CSS3

See the Pen CSS3 ribbons by Elena Nazarova (@nazarelen) on CodePen.

21. Ribbon CSS

Ribbon CSS – ribbon CSS

See the Pen CSS Ribbon by CSS-Tricks (@css-tricks) on CodePen.

22. Ribbon CSS dễ dàng với Sass

Ribbon CSS – ribbon CSS dễ dàng với Sass

Một hỗn hợp Sass có thể tùy chỉnh hình dạng tam giác CSS và màu nền / nền trước.

See the Pen Easy CSS Ribbon with Sass by Peiwen Lu (@P233) on CodePen.

23. Bootstrap 4 Simple Cards với ribbon

CSS Ribbons – Bootstrap 4 Thẻ đơn giản với Ribbons

Sử dụng cấu trúc Bootstrap 4 với một số CSS tùy chỉnh cho các dải băng ở góc và tiêu đề.

See the Pen Bootstrap 4 Simple Cards With Ribbons by Adam Victor (@adamvictor0012) on CodePen.

24. OP ribbon PODS MỚI

CSS Ribbons – OP UK NEW PODS ribbon

See the Pen OP UK NEW PODS ribbons by Merch (@merch-EDO) on CodePen.

25. Ribbons with cards

CSS Ribbons – Thẻ ribbon CSS ribbon có thẻ

See the Pen Ribbons by Brandon Couts (@brandoncouts) on CodePen.

26. Ribbon trên tiêu đề

CSS Ribbons – Ribbon trên Heading ribbon đơn giản và trang nhã cho trang giới thiệu về chúng tôi.

See the Pen Ribbon on Heading by Rajesh Budhathoki (@rajoyish) on CodePen.

27. Winner Card

Ribbon CSS – Thẻ người chiến thắng

See the Pen Winner Card by Kiran Raj (@slashback) on CodePen.

28. Card-Ribbon | CSS

CSS Ribbons – Card-Ribbon | CSS

Thẻ phong cách ribbon huy hiệu với css

See the Pen Card-Ribbon | CSS by Sudeep Gumaste (@sudeepgumaste) on CodePen.

29. Ribbon CSS

See the Pen Красная ленточка by Sultan Sailaubayev (@desali) on CodePen.

30. Ribbon Trong gió

CSS Ribbons – ribbon trong gió

Một dải băng để chơi với, bị ảnh hưởng bởi trọng lực và gió. Di chuyển chuột nhanh làm dải băng nâng lên, giống như một chiếc áo choàng. JavaScript Vanilla. Vật lý giả. Cảm ứng và chuột thân thiện.

See the Pen Ribbon in the wind by Nick Watton (@2Mogs) on CodePen.

31. Github-style-ribbon

See the Pen github-style-ribbon by Srikanth Shreenivas (@srikanthps) on CodePen.

32. Silly banner

Đã tạo lại dải băng / biểu ngữ CSS từ backpacking.com. Muốn làm sạch nó để sử dụng ít đánh dấu hơn từ những gì họ hiện có.

See the Pen Silly Banner by Scott Dunham (@ultraloveninja) on CodePen.

33. Ribbon Animation Pure Css

CSS Ribbons – ribbon hoạt hình css thuần túy

See the Pen pure css animated ribbon by Loray O’Connell (@lorayoconnell) on CodePen.

34. Ribbon CSS3

See the Pen CSS3 Ribbon by Deven Blackburn (@makecodenotwar) on CodePen.

Leave a Reply