svgかcssのどっちが背景パターンにいいか考えてみた。

簡単な備忘録なんです。
とりあえず、以下のサンプル。

CSSのみ
svgでやってみた。

なんじゃこりゃ。って感じですが、書いてある通りです。
いわゆる、こういった斜線をパターンオーバーレイチックに背景に入れる感じの効果をCSSとsvgのどっちでやった方が楽かなぁ~っていう備忘録です。
基本的にコードが長くなるの嫌いなので、そういった場合CSSで組んだ方が短くなるのだけど、仕上がりが綺麗な方は断然svg。
しかも、斜線以外のデザインも可能だから、今後はsvgメインにしていった方が素敵だよね。(ドット柄とか特に)
問題点といえば、やっぱりsvgの設定が瞬時に分かりにくい。
でも、svg.cssみたいなの一個作って、その中にパターンをたくさんいれてclassで区分すれば、もしかしたら簡単にパターンオーバーレイが作れる!みたいなのできるんじゃないですかね?
あ、色の設定や透明度の設定が面倒か。細かな調整ができないのか・・・。
あとはブラウザの対応か・・・?試してないから分かんない♥

とりあえず、今度気が向いたら使います。
以下、コード。

<h5 class="only">
CSSのみ
</div>
<h5 class="wow">
svgでやってみた。
</div>
<style>
h5{
	padding:0.5em 0.5em;
	border-radius: 5px;
	margin:5em auto;
	color:#FFF;
	font-weight:bold;
	background-color: #FFAA00;
}
.only{
	background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #FFAA00, #FFAA00 2px, #FFAA00 1px, #FFCC55 5px) repeat scroll 0 0;
}
.wow{
	background-image: url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
</style>

ちなみに
Hero Patterns

お便りコーナー

  1. Іt’s tuly a nice and hеlpful piecе of information. I’m gⅼad thɑt
    you just shared tis usefսl info with us.
    Please stay us up to date ike this. Thank you for sharing.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です