Agrippa

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

投稿日:2017年12月13日 更新日:

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

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

Follow me!

-Agrippa

執筆者:


comment

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

関連記事

完全に自分用のメモ

最近、メモ代わりにブログを使ってます。 エバーノートとかに描いても、よくわかんなくなるほど整理が下手なもので・・・。 最近ついつい忘れがちになるCSSとかタグについてポロポロ考えたりしてます。 例えば …

プログレ

 はやいもので、もう1月も後半戦。いかがお過ごしでしょうか。  さて、2017年は色々ございまして、色々と自分自身見直す点や考えなければならない点とかがたくさん見えてきました。  細かくいくつかやるべ …

no image

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください ! Follow me!@rumina_

てすとぅ

これはagrippaからのテストです。 Follow me!@rumina_

スマホサイトとかいうものについて考えてみる。

スマホサイトっていうのが、流行りですよね。流行りっていうか、それ以前の問題ですけど。 基本的に、今時スマホサイトが存在してないサイトとか死んでるも同義だと思うんですよ。 でも、スマホで開発するのって、 …