かわいい系デザインに使えるCSSいろいろ

過去記事「かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました」

1. キラキラ系テキスト

某ギャル雑誌（もう刊行されてないのかな？）で毎回見かけていたこの白抜き＋明るい色のシャドウ。CSS では text-shadow を用いて表現できます。ポイントは文字を白に設定し、シャドウの横位置・縦位置ともにゼロを指定してテキストの位置にあわせること。お好みの色で試してみてください！

2. マーカーでラインを引く

太めの線をテキストに少し被せて表示するには linear-gradient を使います。数値を変えると線の太さを調整できます。

塗りつぶし色だけでなく、背景画像を設定したい場合は、画像のポジションを指定すれば OK。柄を工夫してマスキングテープ風にアレンジもできちゃいますね！

3. ステッチ風ボックス

ボックスの周りを糸で縫い付けたような装飾です。ボックスの周りに破線、さらにその外側にぼかしのかかっていないボックスシャドウを加えることで、このような表現が可能！background と box-shadow の色を揃えることを忘れずに！

4. リボン

存在感があるので、色やフォントを少しカスタマイズするだけでデザインのメインにもなりうるキュートなリボン。これは要素に :before、:after を使って空の擬似要素を追加してリボンの端の部分を表現しています。幅や角度を変更する時は、同時にいろんな箇所の数値も変更する必要があると思うので、カスタマイズが少し大変なのが難点。

5. 画像をハート型で切り抜く

以前書いた「SVG クリッピングマスクにチャレンジ！静止画像も動画も、SVG で切り抜こう！」という記事で紹介した SVG を利用した方法で画像をハート型で切り抜きます。詳しい手順はその記事で紹介しているので、参考にしてみてください！サムネイル画像一覧なんかをハート型で統一させると、かなりかわいい印象になりそうです w

6. ハートの鼓動

CSS3 の animation を使ってハートのどきどきを表現！Safari や Chrome 用に -webkit- を追加することをお忘れなく。使いドコロは難しいかと思いますが w サイトのアクセントにどうぞ。デモがちゃんと動いていない人は、でも画面右下の「RETURN」をクリックで再度読み込むか、右上の「Edit on CODEPEN」をクリックで別画面表示されます！

7. ラブビーム

上のどきどきハートに引き続き、使いドコロがよくわからない効果。ハートにカーソルをあわせると弾けちゃいます。こちらも animation を使用。:hover セレクターに追加します。こちらもデモが動いていない場合は画面右下の「RETURN」または右上の「Edit on CODEPEN」をクリック！

あれ、なんでこれ作ったんだろ…

皆さんのお気に入りのかわいい装飾などあれば、ぜひコメント欄にてご紹介ください！