【HTML】【CSS】コピペで使えるサンプル集－背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span> </div>

背景・模様②

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span> </div>

背景・模様③

<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span> </div>

【WEB】円形プログレス

CSSとJavaScriptとHTMLのコードだけで使えるブログ用のパーツとして使えるものが他にもありましたので、紹介します(^^)

円形のプログレスが上がったり下がったりするアニメーションをしますが、
カスタマイズすれば色々と使えるのではないかと思います。

円形プログレス

参考

TheCodePlayer

というサイトで他にも色々と使ってみたいコードがあります♪

また良い物があれば紹介していきます～(^O^)／

【WEB】計算機

CSSとJavaScriptとHTMLのコードだけで使える計算機を見つけましたので紹介します(^^)
（ブログでちゃんと動くかは未確認ですが(^^;)）

計算機

C

7 8 9 + 4 5 6 - 1 2 3 ÷ 0 . = x

参考

TheCodePlayer

というサイトで他にも色々と使ってみたいコードがあります♪

また良い物があれば紹介していきます～(^O^)／