CSS3 Ribbons

19/12/17

CSS3 Ribbons

Đăng bởi: Bình luận

  • Animated & Responsive Ribbon 
    An animated ribbon developed in pure CSS that features nice and smooth transitions as you change the viewport size or hover over it.
  • Wave Animated CSS Ribbon 
    Quite an impressive SCSS ribbon animated with smooth sliding and fading in transitions at different times.
  • Bottom & Top CSS Ribbons 
    A nice set of ribbons to feature either at the top or the bottom of containers designed in a nice flat style available in big, medium, and small sizes.
  • Pure CSS Ribbon Modal 
    A nicely crafted CSS modal that features a cool ribbon as an [X] close button that stretches a nit as you hover over it.
  • Flat Minimal CSS Ribbon 
    A nicely pure CSS crafted ribbon that features a flat style in a blue scheme as well as folded ends that give it a cool feel.
  • Stylish CSS Ribbon Menu 
    A beautifully crafted menu that features its items on a flat ribbon that is placed on top of an oval logo design.
  • CSS Math Ribbon Loader 
    An amazing loading icon that features a summation symbol made out of a dark ribbon that slides along making itself into the shape of the symbol.
  • Outline CSS Ribbon Shapes 
    A set of minimal style outlined ribbons featuring several shapes as diamond, ribbon, battle star, box, and rounded corners.
  • CSS Sliding Ribbon Menu Items 
    Quite a creative idea of a side menu in which ribbon-like colorful elements smoothly slide out from underneath the content box as you click the menu button.
  • Pure CSS Ribbon Badge 
    A pure CSS developed badge made out of ribbons that allows you to feature a text inside it, perfect for featuring awards and prices.
  • Responsive CSS Stitched Ribbon 
    A responsive CSS ribbon that features a nice stitched border sticking at 90% of the size of the viewport, perfect for titles of responsive pages.
  • Pure CSS Shadowed Ribbon 
    A nice ribbon crafted in pure CSS that is responsive to the width of the viewport and features a nice shadow.
  • Animated Ribbon Logo 
    A nicely crafted JavaScript animation that gives your ribbon-featured logos quite a lot of life and action by loading and fading in bit by bit.
  • CSS Flat Button Shapes 
    A set of 5 nicely crafted different shaped SCSS buttons that lift up a bit as you hover over them. You’ll find diamond, ribbon, arrow, rounded, and sheer shapes.
  • CSS Ribbon Font 
    A beautifully crafted font created out of pure CSS made ribbons featuring smooth shadows that give this font a nice 3D feel.
  • JavaScript Animated CSS Ribbon 
    A neatly crafted animation in pure JavaScript for animating a smooth and nicely crafted CSS ribbon rising up from bottom to top.
  • Responsive CSS Ribbon 
    A simple design that offers an empty ribbon created with pure CSS. It can be useful for headings in all sorts of websites and devices, given its responsive design that adjusts to any situation. All credit goes to CodePen user Will Paige for developing this project.
  • Orange CSS Ribbon Logo 
    An orange ribbon logo created for titles of any kind and coded exclusively with CSS. It consists of this long element that goes around itself three times in order to show the three available text lines. It can be used for any occasion when a good amount of attention is required.
  • CSS Sale Side Ribbon 
    A neatly CSS crafted ribbon for side edge containers of products or services that are on sale. It is subtly designed as a short ribbon so as to not cover the content of the product/service’s card.
  • Beautiful Roman CSS Ribbon 
    A good-looking CSS ribbon with a beautiful color palette and overall style that reminisces of ancient Rome. The asymmetric bend around the edges is also a nice point to address, as well as the font. Although as you know, you can always change these details by hacking the code.
  • Minimal CSS-only Red Ribbon 
    A nice red ribbon design that includes a couple of gradient and shadow effects for a polished look. This element was styled with CSS in its entirety. As a nice detail, a couple of buttons allows us to change the size of the element constantly at will. Created by Chris Harris based on a piece of work found at Premium Pixels.
  • Fancy CSS Ribbon Loader 
    An animated CSS Ribbon loader, highly customizable and perfect to be included in your personal or commercial project. The ribbon moves up and down changing its color.
  • CSS3 White Dashed Ribbon 
    A smooth and easy ribbon design. You can modify the text inside of this element directly and its size is totally responsive to the size of your text.
  • Hover Effect CSS3 Ribbon Menu 
    An awesome ribbon that portrays a quite basic look at first, but when hovering on it, we can see how the menu “bends” and animates in a slick fashion, bringing out the options to highlight them (and switching colors to a nice orange for as long as the selection is being hovered). The design is completely styled with CSS.
  • Rounded CSS Ribbon 
    A nicely crafted ribbon that features a rounded fold around the left edge of the container that features it, perfect for titles of containers with flat style content.
  • CSS Animated Ribbon 
    A flat-styled ribbon made in CSS that doesn’t exactly impress at first glance, but it contains a quite pleasant surprise in the form of a smooth animation that will open up the ribbon with the edges moving right after the main portion. It manages to keep the outcome simple, but somehow entertaining. This ribbon can be used and edited for free, and it was created by Josh Bader.
  • Animated CSS Ribbon Menu 
    A terrific menu placed over a surprising CSS ribbon that comes loaded with awesome hover effects, making the ribbon bend itself, raising the menu element highlighted over the background through a wonderfully achieved 3D result. A slight color change is also included.
  • CSS Ribbon Items Menu 
    A clever design of a menu featured by nice right sided pure CSS ribbon elements featuring icon fonts to represent each of the items.
  • Pure CSS Green Corner Ribbon 
    A very attractive corner ribbon made in CSS, ideal for placing on top of other elements within the website. It comes with a set of beautifully arranged lighting and shadow effects that give it a somewhat impressive – if not realistic – look and feel. This project was developed by CodePen’s Anthony Collurafici.
  • Responsive CSS-only Ribbon 
    A responsive ribbon created entirely with the help of CSS. The demo even includes a selector to change the size of the element with no problem. The ribbon features gradient and shadow effects with triangle edges on the back. Uploaded by Calou to JSFiddle.
  • M-Shaped CSS Ribbons 
    Ribbons in pure CSS forming the letter “M” in different colors, a really simple snippet to add into your next website or mobile app. In this example, there are eight different tones you can choose from, and you can always grab the code and modify it. Created by André Kussmann.
  • Looping CSS3 Flat Ribbons 
    A classy pair of animated ribbons created by Bennett Feely from CodePen. The concept is quite simple, consisting of two elements that animate up and down in an endless loop. Can’t see many practical uses for this, but it sure represents a good bit of fun.
  • CSS3 Curved Ribbon 
    A nice curved ribbon designed in CSS completely. The aforementioned curve is definitely the standout here, as it provides great dimension and perspective to an otherwise “normal” ribbon. It is very easy to customize, so you should not have much trouble adjusting this element according to your needs.


  • Single Element CSS Banner 
    A good-looking banner styled with CSS only. It features subtle shadows for a well accomplished 3D effect and little details around the triangle edges. Additionally, a somewhat ornamental font decorates the ribbon and displays the information it was designed for.
    • Bạn đang đọc bài viết CSS3 Ribbons tại Website: Học Lập Trình

    Bài viết cùng chủ đề:

    0 nhận xét: