つばさのーと

つばさの日常を綴るのーと

CSSで某ブログのプロフィール画像を真似てみたけど失敗したってはなし

f:id:tsubasa123:20170316131225j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

最近、CSSだけで作れるグラデーションを利用した見出しデザインの作成に挑戦しております。色々と試行錯誤しているわけですが、今日は時間がかかった割りにあまりクオリティの高くない、どちらかというとコスパの悪かった作品のご紹介です。

 

きっかけは某ブログのプロフィール画像

 

ブログ歴がまだまだ浅い私の最近の日課はお気に入りのブログ様の過去記事を漁ること。有名ブログになるまでの軌跡を学ぶことができたり、昔はこんな記事も書いていたんだなとか、意外と苦労されているんだなとか、最初っから戦略的に書いていたんだなとか、色々な発見があっておもしろいものです。

 

で、某ブログでプロフィール画像をコンペ形式で募集している記事を発見。確かにプロフィール画像は大事ですよね、私も外注を依頼しようかずっと迷っていますが、ラフイメージすらまとまらないので先送りにしている状態です、そろそろなんとかしないとな。

 

先の記事では最終的に採用されたデザインだけでなく、4案くらい次点のデザインを紹介してくださっていたのですが、そのうちの1つが個人的に大ヒット。これ、なんとかCSSで再現できないかなーと思って頑張ったのが事の発端となります。

 

とりあえずやってみる

 

別に誰が損するわけでもないと思うので、自己研磨もかねてとりあえず真似てみます。できばえはこんな感じ。HTMLで再現するのは大変なので今日はキャプチャで。

 

f:id:tsubasa123:20170316130748j:plain

 

んー、正直微妙。再現度は10%といったところでしょうか。デザイナーさんの名誉のために補足しますが、元のイラスト画像はもっともっともっともっと高クオリティでした。この見出しのデザインが微妙なのは単に私の力不足です。あとまぁ、CSSじゃちょっと再現できないところが多かったです。CSSだけで実装できる表現が増えてきているのは確かですが、それを生かせる知識がないとしょーがないですね。

 

ちょっとだけ技術的な説明を致しますと、3パターンの背景画像をlinear-gradientを使って作成。これをボックス要素、before、afterの擬似要素にそれぞれ設定。繰り返しはX軸のみにして背景画像が重ならないようにする。位置は上からと下からの2パターンをbackground-positionで指定。後は菱形のマークをボーダーで作成してなんとなく配置。

 

こんなところですね。linear-gradientでもbackground-sizeを指定することで繰り返し処理ができることと、繰り返しの向きを指定した上でbackground-sizeを併用することで何パターン化の繰り返しの背景画像を混在させることができることが分かったのが今回の収穫です。

 

グラデの繰り返しはrepeating-lienar-gradientを使わないといけないと思い込んでいましたsが、応用的なグラデパターンを作りたいときはlinear-gradientを使ったほうが柔軟に対応できそうですね。いい勉強になりました。

 

ソースコードも貼っときます

 

後で見返すためにコードもメモ。ご自由にお持ち帰りください。

 

<style>
.caption-dev {
    background-position: 0 0;
    background-size: 72px 24px;
    background-repeat: repeat-x;
    padding: 3.3em 1em 1.5em 1em;;
    /*border: 1px solid #dfdfdf;*/
    background-image: linear-gradient(0deg,
                    #fff 0, #fff 2px,
                    transparent 2px, transparent 22px,
                    #fff 22px, #fff 24px),
                  linear-gradient(90deg,
                    transparent 0, transparent 2px,
                    #d5f6ff 2px, #d5f6ff 22px,
                    #fff 22px, #fff 26px,
                    #b7efff 26px, #b7efff 46px,
                    #fff 46px, #fff 50px,
                    #d5fffd 50px, #d5fffd 70px,
                    #fff 0px, #fff 72px);
    position: relative;
    z-index: 0;
}
.caption-dev::before, .caption-dev::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: 72px 24px;
    background-repeat: repeat-x;
}
.caption-dev::before {
    top: 0;
    background-position: 0 24px;
    background-image: linear-gradient(0deg,
                    #fff 0, #fff 2px,
                    transparent 2px, transparent 22px,
                    #fff 22px, #fff 24px),
                  linear-gradient(90deg,
                    transparent 0, transparent 2px,
                    #d5fffd 2px, #d5fffd 22px,
                    #fff 22px, #fff 26px,
                    #d5f6ff 26px, #d5f6ff 46px,
                    #fff 46px, #fff 50px,
                    #b7efff 50px, #b7efff 70px,
                    #fff 70px, #fff 72px);
}
.caption-dev::after {
    bottom: 0px;
    background-position: 0 94px;
    background-image: linear-gradient(0deg,
                    #fff 0, #fff 2px,
                    transparent 2px, transparent 22px,
                    #fff 22px, #fff 24px),
                  linear-gradient(90deg,
                    transparent 0, transparent 2px,
                    #d5f6ff 2px, #d5f6ff 22px,
                    #fff 22px, #fff 26px,
                    #b7efff 26px, #b7efff 46px,
                    #fff 46px, #fff 50px,
                    #d5fffd 50px, #d5fffd 70px,
                    #fff 70px, #fff 72px);
}
.caption-dev-inner {
    margin: 0;
    padding: 0 0 0 1em;
    font-size: 1.7em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px 4px #72c6e2,
    -3px 3px 4px #72c6e2,
    3px -3px 4px #72c6e2,
    -3px -3px 4px #72c6e2;
}
.diamond {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #72c6e2;
    position: relative;
}
.diamond::after {
    content: '';
    position: absolute;
    left: -6px; top: 8px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 8px solid #72c6e2;
}
.diamond1 {
    top: -49px;
}
.diamond2 {
    top: -45px;
    left: 6px;
    border: 4px solid transparent;
    border-bottom: 6px solid #72c6e2;
}
.diamond2::after {
    left: -4px; top: 6px;
    border: 4px solid transparent;
    border-top: 6px solid #72c6e2;
}
.diamond3 {
    top: -54px;
    left: 204px;
    border: 4px solid transparent;
    border-bottom: 6px solid #72c6e2;
}
.diamond3::after {
    left: -4px; top: 6px;
    border: 4px solid transparent;
    border-top: 6px solid #72c6e2;
}
.diamond4 {
    top: -54px;
    left: 207px;
    border: 5px solid transparent;
    border-bottom: 7px solid #72c6e2;
}
.diamond4::after {
    left: -5px; top: 7px;
    border: 5px solid transparent;
    border-top: 7px solid #72c6e2;
}
</style>

<div class="caption-dev">
    <h2 class="caption-dev-inner">つばさのーと</h2>
    <div class="diamond diamond1"></div>
    <div class="diamond diamond2"></div>
    <div class="diamond diamond3"></div>
    <div class="diamond diamond4"></div>
</div>

 

クオリティとは裏腹に、結構長くなってしまいました。コード品質も低いとはなんてテイタラク。ほんとはh2タグだけでなんとかしたかったんですが、囲みのタグも泣く泣く追加。いつかリベンジしたいところです。

 

さいごに

 

完敗でした。が、結構勉強になりました。最初は角丸も再現したくて色々模索したし、linear-gradientだけでなく、radial-gradientでなんとかできないかと試したりと色々無茶したので無駄に経験値を積むことができました。やっぱり手を動かすって大事ですね。

 

この経験を生かして、次はもっとちゃんとした見出しデザインをお届けできるように頑張りたい所存です。

 

ではでは、ではでは、最後までお付き合いいただきありがとうございました。