Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create a Ribbon/Strip to highlight some important text using Pure CSS

    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.17k
    Comment on it

    Hii,
     In this blog i am going to create a pure CSS ribbon or strip which can be used to display some important information,link etc with highlighted, eyecatching view on a webpage.
    While we create  any ribbon or strip design we must use eyecatching background colors,border-colors etc because whatever is written on that strip (some important or new text, link) should be eye-catching.

    Here's the example given below,go through it.

    In this example following css properties are used:
    CSS pseudo elements property before and after
    Border property
    Position:Relative and Absolute
    Width
    Background color etc.

    CSS:
     

    .box {
     width: 200px; height: 300px;
     position: relative;
     border: 1px solid #BBB;
     background: #EEE;
    }
    .ribbon {
     position: absolute;
     left: -5px; top: -5px;
     z-index: 1;
     overflow: hidden;
     width: 75px; height: 75px;
     text-align: right;
    }
    .ribbon span {
     font-size: 10px;
     font-weight: bold;
     color: #FFF;
     text-transform: uppercase;
     text-align: center;
     line-height: 20px;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     width: 100px;
     display: block;
     background: #79A70A;
     background: linear-gradient(#801111 0%, #CC2316 100%);
     box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
     position: absolute;
     top: 19px; left: -21px;
    }
    .ribbon span::before {
     content: "";
     position: absolute; left: 0px; top: 100%;
     z-index: -1;
     border-left: 3px solid #CC2316;
     border-right: 3px solid transparent;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #CC2316;
    }
    .ribbon span::after {
     content: "";
     position: absolute; right: 0px; top: 100%;
     z-index: -1;
     border-left: 3px solid transparent;
     border-right: 3px solid #CC2316;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #CC2316;
    }
    

    HTML:

    <div class="box">
     <div class="ribbon"><span>NEW</span></div>
    </div>


     

    Learn how to create a Ribbon/Strip to highlight some important text using Pure CSS

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: