修了証明書
Certificate of Completion
スライドとかでよかった気がするけど、なんとなく html で修了証明書を書いてみました。css は無限に時間を溶かすと思います。
See the Pen Certificate of Completion by ushumpei (@ushumpei) on CodePen.
Mac の Chrome でしか確認していない。もしかしたら他の環境でフォントとかダメかもしれないです。
COURSE DETAILS (リボンの下の細かい文字) が短すぎると良い感じの形にならないです。三文くらいあると印刷した時に A4 サイズにうまくおさまる。
参考
ありがとうございました。
リボン
リボンのコード、border で三角形を作るやつの応用で白い三角形を使って切り口を表現する。
枠
画像使わないと縁取りかっこよくならないかと思ったけど、radial-gradient と linear-gradient を使って丸みを出している。ただコードちゃんと追えていない。
感想
効力のない、お気持ちのやつ。というか正式なフォーマットがどこかにあるんだろうな。人に教えるほど何かを極めているわけでもないのにどこへ向かっているんだろうか私は。
スマホで見るとビールのラベルっぽい。
