CSSの詳しい取り扱い説明書です【機能辞典】

ストライブ風のボックス ページ35

画像を使わなくても色やグラデ−ションの設定によってストライブ風に仕上げることが出来ます


今回もお洒落なボックスの仕方の一つとなります


background: -webkit-repeating-linear-gradient(-45deg, 色, 色 5px, 色 5px, 色 10px);
background: repeating-linear-gradient(-45deg, 色, 色 5px, 色 5px, 色 10px);
color: 色;
margin: 2em 0;
padding: 2em;


このソースは色んな所に使いやすいかと思います


例： background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
color: #4a1086;
margin: 2em 0;
padding: 2em;



こんな感じ↓






色が薄くてあんまり見えないかもしれないですが、作者はこの色は素敵だと思いました


ストライブを作成するにあたって注意しなければいけないのは色です


あんまり濃いとお洒落な感じが逆に重くなってしまいますのでご注意ください

水玉模様の設定の仕方→←手書き風のボックスの設定

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す