黒板のような表現をfilter一発で

スポンサーリンク

テスト版(カスタムCSS)

本日摸試だった方へ
お疲れ様でした!自己採点して一喜一憂するよりも大事なのは・「正しく受けられたか(直前期/当日)」の振り返り
・(主観的に)簡単なのに間違えた問題のリストアップそれをもとに
明日から志望校対策を頑張れば
合格可能性はまだ上がりますよ♪応援しています!

テーマCSSで記述

少し装飾してらしくした。チョーク置きは下ボーダーで表現

自分のボックス表現の重畳クラスとして設定した前後の様子

共通の上キャプション
before
点線のbox
after

黒板風に

 

コード

CSS

/*** 黒板風の表現 ***/
.Board{border-bottom: solid 10px #c8a397;background:#fff;
    filter:hue-rotate(-48deg) sepia(0.25) brightness(0.65) contrast(1.8) invert(1) saturate(4) hue-rotate( 212deg) blur(0.5px);box-shadow: 1px 5px 7px 0px #ddd1e9;}
.D-box1.Board .cap1u{width:100%;text-align:left;margin-bottom:0;font-size:1.2em;font-weight:bold;color:#000;}

html

タイトルとURLをコピーしました