日めくりカレンダーを作成しました。
サイト上で日付を大きく表示する機会は少ないと思いますので、右横に表示されているより、実際は小さく作っています。
残念ながら、マウスオーバーしても、クリックしてもめくれはしません。
日めくりっぽく若干厚みをもたせています。
カスタマイズしてリンクをつけたり、ボタン等に利用してみてはいかがでしょうか。
使用するファイル
- HTML
- CSS
- JavaScript（日付を取得し、表示方法を設定するため）
コードを記述
See the Pen Daily calendar by blue moon (@blue-moon) on CodePen.
補足説明
大きく表示したければ、親要素のCSSに以下をつけ足して調整してください。
transform: scale(1.5); // この場合は1.5倍に拡大ポイント
疑似要素でページのめくれ部分の三角形を作っていますが、影の向きに注意です。
影の幅に正数値を入力すれば右下に影がつきますが、そこを負数で入力し、左と上に影をつけています。
別の方法としては、右下に直角が来るような三角形を作成し普段通り影をつけ、180度回転する方法でもできます。
以下がそのパターンです。回転させる分1行増えます。
.date:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 0px;
/*border-top: 7px solid #e0e0e0;*/
/*border-right: 7px solid transparent;*/
/*box-shadow: -0.5px -0.5px 1.2px #555;*/
border-bottom: 7px solid #e0e0e0;
border-left: 7px solid transparent;
box-shadow: 0.5px 0.5px 1.2px #555;
transform: rotate(180deg);
}参考
後日、サイトに時刻を表示する方法も記事にしましたので、ご参考になれば幸いです。
