「background-size」と「radial-gradient」をランダムで設定することで、クレヨンなどで書いたボコボコとした滲んだ線を表現します。
<hr class="cp_hr12" />.cp_hr12 {
height: 3px;
border-width: 0;
background-repeat: repeat-x;
background-size: 0.7em 0.3em,1.7em 0.3em,3.5em 0.3em,3.7em 0.3em;
background-position: right bottom;
background-image:
radial-gradient(0.3em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
radial-gradient(0.5em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
radial-gradient(0.8em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
radial-gradient(7.2em 0.2em at center center,#94c79e,rgba(246,89,115,0));
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info