裏紙に書く程度の内容

見出しタイトルに使えそうなスタイルシート

サイトの見出し等に利用できそうなstylesheetのメモ書きです。

※chromeのみ動作確認。

非アニメーション

シンプル

シンプルなスタイル

h1 {
  border-left: 4px solid #4c4bff;
  border-bottom: 1px solid #4c4bff;
  padding-left: 1rem;
}
h2 {
  border-bottom: 1px solid #4c4bff;
  padding-left: 1rem;
}
h3 {
  border-left: 4px solid #4c4bff;
  padding-left: 1rem;
}

吹き出し

吹き出し風

    h1 {
      background-color: #4c4bff;
      color: white;
      padding-left: 1rem;
      position: relative;
      border-radius: 8px;
    }
    h1:before {
      position: absolute;
      content: "";
      display: inline-block;
      transform: rotate(45deg);
      width: 1em;
      height: 1em;
      top: 50%;
      background-color: #4c4bff;
      left: 3rem;
      z-index: -1;
    }
    h2 {
      border: 2px solid #000;
      border-radius: 8px;
      padding-left: 1rem;
      position: relative;
      background-color: white;
    }
    h2:before {
      position: absolute;
      content: "";
      display: inline-block;
      transform: rotate(45deg);
      width: 15px;
      height: 15px;
      background-color: black;
      top: 78%;
      left: 50px;
      z-index: -1;
    }
    h2:after {
      position: absolute;
      content: "";
      display: inline-block;
      transform: rotate(45deg);
      width: 13px;
      height: 13px;
      background-color: white;
      top: 78%;
      left: 51px;
    }

浮いている風

文字が浮いているような見た目

    h1 {
      text-shadow: 20px 20px 10px rgba(0, 0, 0, 0.5);
      background-color: gray;
      color: white;
      padding-left: 1em;
    }

立体的

立体的な文字

    h1 {
      color: #2daebf;
      text-shadow: 0px 1px 0px #0092b3, 0px 2px 0px #0087a6, 0px 3px 0px #008099, 0px 4px 0px #00758c, 0px 5px 0px #555, 0px 6px 0px #006a80, 0px 0px 0px #006073, 0px 8px 7px #005566;
    }

アニメーションつき

文字が浮き上がる

ホバーで文字が浮き上がる

    h1 {
      background-color: gray;
      color: white;
      padding-left: 1em;
      text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
      transition-property: text-shadow;
      transition-duration: 500ms;
    }
    h1:hover {
      text-shadow: 20px 20px 10px rgba(0, 0, 0, 0.5);
    }

立体的

ホバーで文字が立体的になる

    h1 {
      color: #2daebf;
      transition: text-shadow 500ms ease-out 0s;
    }
    h1:hover {
      text-shadow: 0px 1px 0px #0092b3, 0px 2px 0px #0087a6, 0px 3px 0px #008099, 0px 4px 0px #00758c, 0px 5px 0px #555, 0px 6px 0px #006a80, 0px 0px 0px #006073, 0px 8px 7px #005566;
    }

ティッカー風

文字が右からスライドしてくる。

ホバー時しかタイトル読めないのでこのままではNG・・・・

    h1 {
      padding-left: 10em;
      color: rgba(0, 0, 0, 0);
      transition: padding-left 500ms ease-out 0s, color 500ms linear 250ms;
    }
    h1:hover {
      padding-left: 1em;
      color: black;
    }

ひっくり返るアニメーション

ホバー時、パネルがひっくり返る。

    h1 {
      background-color: gray;
      color: white;
      padding-left: 1em;
      display: inline-block;
      padding: 40px 20px;
      transition-property: transform;
      transition-duration: 500ms;
      transform: perspective(400px) rotateY(0deg);
    }
    h1:hover {
      transform: perspective(400px) rotateY(360deg);
    }

ひっくり返る(縦)

縦にひっくり返るバージョン。

    h1 {
      background-color: gray;
      color: white;
      padding-left: 1em;
      transition-property: transform;
      transition-duration: 500ms;
      transform: perspective(400px) rotateX(0deg);
    }
    h1:hover {
      transform: perspective(400px) rotateX(360deg);
    }
広告
Index