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

-Agrippa
-

執筆者:


  1. alu lommeknive より:

    І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.

comment

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

関連記事

no image

スプリング。

気が付けば、もう5月。 4月何も投稿しておりませんでしたが、まぁ誰も読んでないのでセーフ!セーフ!! ということで、仕事の愚痴はいつも通りtwitterでぶちまけていますので「あー、こいつまた荒れてる …

2月プログレ報告。

あっという間に、もう2月後半です。 いやぁ、なんもしてねぇwwwww(してるんだけどさ しかしながら、「今年はプログレに生きよう!」と意気込んだのもつかの間、MHWが発売され休日は一日中ゲーム!ゲーム …

no image

デザイン教育と新人育成

春は出逢いと分かれの季節。 多少は春っぽい出逢いの一つや二つあってもいいじゃないかとぼやきつつ、私の勤務先は退職者を複数人出し業務が上司に集中して頭を抱えている様子をあざ笑う日々が続いてる。 ところで …

no image

めーでーめでー

先日ふらっとセットサーフィンしていたら「amazarashiが金沢でライブあるやんけ。しかも、5日前なのにチケット余ってるし」という感じでライブに行ってきました。 なにげに、初ホール公演参加なので楽し …

プログレ

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