FF のウィンドウ風カードデザイン

FF6

.window-ff6 {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.5rem 1rem;

    color: #fff;
    text-shadow: #000 1px 1px;
    background: linear-gradient(
        180deg,
        #7b7bd6 0, #7b7bd6 5%,
        #7373ce 5%, #7373ce 10%,
        #6b6bc6 10%, #6b6bc6 15%,
        #6363bd 15%, #6363bd 20%,
        #5a5ab5 20%, #5a5ab5 25%,
        #5252ad 25%, #5252ad 30%,
        #4a4aa5 30%, #4a4aa5 35%,
        #42429c 35%, #42429c 40%,
        #393994 40%, #393994 45%,
        #31318c 45%, #31318c 50%,
        #292984 50%, #292984 55%,
        #21217b 55%, #21217b 60%,
        #181873 60%, #181873 65%,
        #10106b 65%, #10106b 70%,
        #080863 70%, #080863 75%,
        #00005a 75%, #00005a 80%,
        #000052 80%, #000052 85%,
        #00004a 85%, #00004a 90%,
        #000042 90%, #000042 95%,
        #000039 95%, #000039 100%
    );

    border-style: ridge;
    border-width: 6px;
    border-radius: 12px;
    border-color: #fff;
}

FF6

FF7

.window-ff7 {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.5rem 1rem;

    color: #e6e6e6;
    text-shadow: #202020 1px 1px;
    background: linear-gradient(165deg, #0058b0, #000068, #000021);

    border-style: ridge;
    border-width: 6px;
    border-radius: 8px;
    border-color: #dedede #c5c5c5;
}

FF7

FF8

.window-ff8 {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.5rem 1rem;

    color: #ededed;
    text-shadow: #414131 1px 1px;
    background: linear-gradient(90deg, #444444, #727272) 50%;

    border-style: groove ridge ridge groove;
    border-width: 4px;
    border-radius: 2px;
    border-color: #747474 #313131 #313131 #747474;
}

FF8

FF9

.window-ff9 {
    position: relative;
    z-index: 0;
    margin: 0px;
    padding: 1.5rem 1.5rem 1rem;

    color: #c8c8c8;
    text-shadow: #282828 1px 1px;
    background: linear-gradient(180deg, #6b7b7b, #d9d9de) 50% center;

    border-style: groove ridge ridge groove;
    border-width: 6px;
    border-radius: 22px;
    border-color: #d9d9de;
}

.window-ff9::before {
    content: '';

    position: absolute;
    z-index: -1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: calc(2px - 1.5rem) calc(2px - 1.5rem) -1rem;

    background-image: url(/images/ff9-bg.png);
    background-repeat: repeat;

    border-style: groove;
    border-width: 5px;
    border-radius: 15px;
    border-color: #939b9b #9c9ca1 #9c9ca1 #939b9b;
}

FF9

Written by yo1000 | YO!CHI KIKUCHI Loves Spring, Kotlin, Pelikan Fountain pen and FINAL FANTASY VIII!! 🍃🐦🖋️🗡️ GitHub Twitter