Service Ribbons in CSS

Service ribbons commemorate a soldier's participation in war, campaign or battle starting with the establishment of the state of Israel in 1948. Ribbons are made of cloth and steel. This project is about creating them with HTML & CSS. Learn more »

1948

i 

.war_1948 {
    background: #184ea4;
}
.war_1948 .outer {
    max-width: 7px;
    background: #92c8e2;
    border-right: 7px solid #f4f4f4;
    border-left: 7px solid #f4f4f4;
}
.war_1948 .inner {
    margin: 0 1.65rem;
    max-width: 7px;
    background: #ab3122;
    position: relative;
}

1956

i 

.war_1956 {
    background: #e27e33;
}
.war_1956 .outer {
    max-width: 16px;
    background: #184ea4;
}
.war_1956 .inner {
    border-right: 8px solid #ab3122;
    border-left: 8px solid #ab3122;
    max-width: 24px;
    background: #92c8e2;
    position: relative;
}

1967

i 

.war_1967 {
    background: #b00;
}
.war_1967 .outer {
    max-width: 26px;
    background: #184ea4;
}
.war_1967 .inner {
    max-width: 12px;
    background: #92c8e2;
    border-right: 12px solid #f4f4f4;
    border-left: 12px solid #f4f4f4;
    position: relative;
}

1970

i 

.war_1970 {
    background: #bd7755;
}
.war_1970 .outer {
    max-width: 10px;
    background: #92c8e2;
    border-right: 10px solid #f4f4f4;
    border-left: 10px solid #f4f4f4;
}
.war_1970 .inner {
    background: #ab3122;
    max-width: 14px;
    margin: 0 1.05rem;
}

1973

i 

.war_1973 .outer {
    border-right: 8px solid #f4f4f4;
    border-left: 8px solid #f4f4f4;
    max-width: 8px;
}
.war_1973 .inner {
    background: #ab3122;
    max-width: 44px;
}

1982

i 

.war_1982 {
    background: #ab3122;
}
.war_1982 .outer {
    max-width: 16px;
    background: #541a95;
    border-right: 8px solid #f4f4f4;
    border-left: 8px solid #f4f4f4;
}
.war_1982 .inner {
    max-width: 8px;
    background: #ab3122;
    border-right: 8px solid #26972d;
    border-left: 8px solid #26972d;
}

2006

i 

.war_2006 .outer {
    background: #e27e33;
}
.war_2006 .outer::before {
    content: '';
    height: 50px;
    width: 20px;
    background: #184ea4;
    width: 12px;
    position: absolute;
    border-right: 10px solid #f4f4f4;
    border-left: 10px solid #f4f4f4;
}
.war_2006 .outer:first-child::before {
    left: 0;
}
.war_2006 .outer:last-child::before {
    right: 0;
}
.war_2006 .inner {
    background: #ab3122;
    max-width: 28px;
    border-right: 10px solid #26972d;
    border-left: 10px solid #26972d;
}

How to Make a Ribbon

Ribbons are a play of layers and symmetries in HTML & CSS. You can add a ribbon to your website by following the next steps.

Step 1: Add this snippet in your HTML `body` section.


<!-- a ribbon is a `figure` element, nesting 3 `span` elements -->

<figure class="war some-war">
    <span class="outer"></span>
    <span class="inner"></span>
    <span class="outer"></span>
</figure>

Step 2: Add these snippets to your CSS file.


/*  common ribbon layout - using `flex` for symmetry purposes */

.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 (you can replace `some-war` with your own war class name) */

.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;
}

That's it. You can get the source from the project's Github page or play with the live demo on CodePen.

Back to top