אותות מערכה ב-CSS

​​"אותות מערכה" הם אותות לציון השתתפותו של אדם במלחמה, במערכה ובקרב שהתרחשו מאז קום המדינה ועד היום. אותות אלה עשויים מתכת ובד. פרויקט זה עוסק בייצורם ב-HTML ו-CSS. לפרטים נוספים »

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

כיצד לבנות אות מערכה

ייצור אותות מערכה בדפדפן הוא משחק באופי הרב-שכבתי והסימטרי של HTML ו-CSS. כדי להוסיף אות מערכה לאתר שלך יש לעקוב אחר ההוראות הבאות.

1. יש להוסיף את החלק הזה לאיזור ה-`body` בקובץ ה-HTML.


<!-- 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>

2. יש להוסיף את החלק הזה לקובץ ה-CSS.


/*  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;
}

זהו. ניתן לעיין בקוד המקור בדף הפרויקט ב-Github או לשחק בקוד בדמו ב-CodePen.

חזרה לראש הדף