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.19k
    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:
     

    1. .box {
    2. width: 200px; height: 300px;
    3. position: relative;
    4. border: 1px solid #BBB;
    5. background: #EEE;
    6. }
    7. .ribbon {
    8. position: absolute;
    9. left: -5px; top: -5px;
    10. z-index: 1;
    11. overflow: hidden;
    12. width: 75px; height: 75px;
    13. text-align: right;
    14. }
    15. .ribbon span {
    16. font-size: 10px;
    17. font-weight: bold;
    18. color: #FFF;
    19. text-transform: uppercase;
    20. text-align: center;
    21. line-height: 20px;
    22. transform: rotate(-45deg);
    23. -webkit-transform: rotate(-45deg);
    24. width: 100px;
    25. display: block;
    26. background: #79A70A;
    27. background: linear-gradient(#801111 0%, #CC2316 100%);
    28. box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    29. position: absolute;
    30. top: 19px; left: -21px;
    31. }
    32. .ribbon span::before {
    33. content: "";
    34. position: absolute; left: 0px; top: 100%;
    35. z-index: -1;
    36. border-left: 3px solid #CC2316;
    37. border-right: 3px solid transparent;
    38. border-bottom: 3px solid transparent;
    39. border-top: 3px solid #CC2316;
    40. }
    41. .ribbon span::after {
    42. content: "";
    43. position: absolute; right: 0px; top: 100%;
    44. z-index: -1;
    45. border-left: 3px solid transparent;
    46. border-right: 3px solid #CC2316;
    47. border-bottom: 3px solid transparent;
    48. border-top: 3px solid #CC2316;
    49. }
    50.  

    HTML:

    1. <div class="box">
    2. <div class="ribbon"><span>NEW</span></div>
    3. </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
Reset Password
Fill out the form below and reset your password: