Git Product home page Git Product logo

israeli-service-ribbons-css's Introduction

Israeli Service Ribbons in Pure CSS

<figure class="komemiut war">
    <span class="a1"></span>
    <span class="b1"></span>
    <span class="a1"></span>
</figure>
/* common layout */

.war {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 151px;
    height: 38px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    z-index: 1;
}
/*  ribbon variant */

.some-war {
    background: #c0a;
}
.some-war .outer {
    border-right: 12px double #fa9;
    border-left: 8px double rgba(100, 150, 200, 0.9);
    max-width: 8px;
}
.some-war .inner {
    background: #349;
    max-width: 44px;
}

Resources

Demos:

Israeli Ministry of Defence - About Service Ribbons:

Resource for Service Ribbon SVG (Wikipedia)

About Service Ribbons (Wikipedia, Hebrew):

israeli-service-ribbons-css's People

Contributors

tomerlichtash avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

orbin

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.