[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse

Post on:2014年8月6日

p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。

サイトのキャプチャ

Beemuse
Beemuse -GitHub

使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。

<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" />
</head>

各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。

デモのキャプチャ

デモ：Paper

paper curl right を実装したデモ

HTML

p, divなどの要素にclassを加えるだけです。
※実際のデモページではdiv要素を使用していますが、pなどでも利用できます。

<p class="paper paper-curl-right">
paper curl right を実装したデモ
</p>
デモのキャプチャ

デモ：Stitches

stitch を実装したデモ

HTML

divなどの要素にclassを加えるだけです。

<div class="stitch">
stitch を実装したデモ
</div>
デモのキャプチャ

デモ：3D Flips

flip を実装したデモ：表
flip を実装したデモ：裏

HTML

表と裏のパネルをaとdiv要素で内包します。下記のコードは幅と高さを指定してください。

    <div class="flip" style="width: X.px; height: X.px;">
    <a href="#">
    <div class="flip-front">
    flip を実装したデモ：表
    </div>
    <div class="flip-back">
    flip を実装したデモ：裏
    </div>
    </a>
    </div>
デモのキャプチャ

デモ：Ribbons

ribbon both in を実装したデモ

HTML

テキストはp, a要素で実装し、リボンの形状に合わせてdiv要素を加えます。
端の三角二つにつきdivが二つ必要になります。

<div class="ribbon ribbon-both ribbon-in">
<div class="ribbon-stitch">
<div class="ribbon-fabric"><p>ribbon both in を実装したデモ</p></div>
<div class="ribbon-top-right"></div>
<div class="ribbon-bottom-right"></div>
<div class="ribbon-top-left"></div>
<div class="ribbon-bottom-left"></div>
</div>
</div>

sponsors

top of page

©2024 coliss