[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート

p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。

カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。

上記は当方でテキストやサイズを変更したもので、デモは下記にあります。

Gradient Borders

実装はシンプルなので、他にも応用がききそうですね。

HTML

p要素をdivで内包します。

<div class='backbox'>
  <p>This is the future.<br>Live it & love it.</p>
</div>

CSS

まずは、Webフォントと背景カラーの設定です。

    @import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
html {
  background-color: #E64C45;
}

p要素の天地にボーダーと背景にグラデーションを適用するスタイルシートです。
※ベンダープレフィックスは省略しています。

.backbox {
  font-family: "Josefin Slab";
  text-transform: uppercase;
  font-size: 3rem;
  color: white;
  width: 75%;
  position: relative;
  left: 12.5%;
  top: 3rem;
  text-align: center;
  padding: 0.0625rem;
  position: relative;
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0));
}
.backbox:before {
  width: 100%;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0));
}
.backbox:after {
  width: 100%;
  height: 0.125rem;
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0));
}