CSS

【CSS】CSSネオンカラーテキストneon

November 25, 2017
neon

neonは、CSSネオンカラーテキスト。

HTML

    <div class="layout__max">
      <h1>neon</h1>
      <h2>By Blake</h2>
    </div>

    <div>
      <a href="https://github.com/btkostner/neon" class="button">GitHub</a>
    </div>

CSS

h1,
h2 {
    color: #c0f5fe;
    font-size: 20vw;
    font-weight: 100;
    margin: 0;
    text-shadow: 0 0 1rem #138093, 0 0 6ch #a5eaf6, 0 0 1ch #77dff1, 0 0 1rem #5bdaf0;
}

h2 {
    animation-delay: 2s;
    animation-direction: alternate;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: flicker;
    color: #010b0b;
    font-size: 8vw;
    margin-left: 0.25ch;
    text-shadow: 0 0 4rem #03161a, 0 0 12ch #01161a, 0 0 4ch #041417, 0 0 8rem #05161a;
}

.button {
    background-color: rgba(31, 129, 145, 0.3);
    border-radius: 0.5rem;
    border: 4px solid #51ddf5;
    box-shadow: 0 0 1rem #16626f, 0 0 6ch #2c636c, 0 0 1ch #1d7e8f, 0 0 1rem #156573;
    color: inherit;
    display: block;
    margin: 1rem;
    padding: 1rem;
    text-decoration: none;
    text-shadow: 0 1px #000;
    transition: 250ms ease all;
}

.button:hover,
.button:focus {
    background-color: rgbA(31, 129, 145, 0.5);
    border-color: #b5ebf5;
    box-shadow: 0 0 2rem #217887, 0 0 8ch #3c818c, 0 0 2ch #209eb4, 0 0 2rem #1391a7;
}