コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス

2020/11/09 16 users コリス ジグザク 罫線 CSS コピペ

ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に...記事の続きを読む 続きを読む

CSSだけで作れる！背景パターンや模様のサンプルコードまとめ | Web Design Trends

2020/08/27 227 users CSS background-imageプロパティ 模様

CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが... 続きを読む

ブラウザー上でカスタマイズできるSVGアイコン、背景パターン、イラスト | Webクリエイターボックス

2019/04/19 26 users SVGアイコン SVG Webクリエイターボックス イラスト

2019年4月19日 SVG, Webサイト制作 高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布... 続きを読む

無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」 - GIGAZINE

2017/01/01 42 users ウェブページ SVG形式 GIGAZINE CSSコード ほか

ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ＆無料でダウンロード可能なのが「 Hero Patterns 」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー＆ペーストすることも可能になっています。 Hero Patterns http://www.heropatterns.com/ デフォルト状態のウェブページ... 続きを読む

背景パターンやテクスチャを簡単に生成できるオンラインツールまとめ「12 Online Tools to Generate Seamless Background Patterns and Textures」 | DesignDevelop

2016/02/07 31 users DesignDevelop テクスチ テクスチャ 生成 種類

背景素材として、完成されたさまざまなテクスチャ等が配布されていますが、今回は、すでに用意されたものではなく自身で柄の出方や種類を選定しながら生成まで可能なオンラインツールまとめ「12 Online Tools to Generate Seamless Background Patterns and Textures」を紹介したいと思います。 PlaidMaker # pa1 背景パターンやテクスチ... 続きを読む

CSSグラデーションで作った背景パターンのサンプル | NxWorld

2015/11/27 283 users NxWorld CSSグラデーション サンプル

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきましたし、今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が... 続きを読む

ウェブデザインの引き出しを増やすPSD素材がダウンロードできる -ByPeople、質も量もものすごいです！ | コリス

2012/11/21 812 users コリス psd ウェブデザイン スライダー ウェブページ

ウェブページのメニュー、ボタンなどをはじめ、ボックス、スライダー、アイコン、背景パターン、リボン、バッジ、エフェクト、テンプレートなど、トータル2,000くらい？のPSD素材がダウンロードできるByPeopleを紹介します。 そんなに数多くダウンロードできないよ、って人も大丈夫！ 全素材まとめてダウンロードできます。 ByPeople ダウンロードできる素材はほとんどがPSDで、モノによってはAI... 続きを読む

画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう | HTML5でサイトをつくろう

2012/02/13 322 users 容量 通信速度 外出先 グラデーション 機会

スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。 スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。 今回は、スマートフォンサイト制作に便利な、CSS3のグラデ... 続きを読む

目を引くレトロな背景パターン１５:phpspot開発日誌

2011/09/11 54 users phpspot開発日誌 エントリ 統一性 15種類

15 Free Retro Patterns for Eye-Catching Designs Graphic Fetish | Daily Creative Inspiration and Resources 目を引くレトロな背景パターン１５ なんとなく懐かしさを感じさせたりするような背景パターンが１５種類まとまっていたエントリのご紹介 統一性はありませんが、気に入ったらストックしておいてもよい... 続きを読む

和風な背景パターンが手軽に作成できるサービス「Japonizer」*二十歳街道まっしぐら

2011/06/17 51 users Japonizer 和風 二十歳街道まっしぐら 背景 ココ

Japonizer 和風壁紙素材を作るならココ 「Japonizer」は和風の繰り返し背景が作成できるサービスです。 パターンは27種類あり、好きなモノを選べますよ。 さらに色や大きさも自分好みにカスタマイズできます。 Webサービスや自分のサイトの背景などに使ってみてはいかがでしょう。 以下に使ってみた様子を載せておきます。 和風背景素材を作る 続きを読む 続きを読む

CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」:phpspot開発日誌

2011/04/19 22 users CSS phpspot開発日誌 プレビュー コピペ レシピ

CSS3 Patterns Gallery CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」。 CSS3を使って実現された背景パターンのサンプル集サイトです。 クリックすればプレビュー表示されます。 画像の方が綺麗とはいえ、CSSでやってしまうのには驚きですね。 関連エントリ コピペで使えるCSS3ボタン６つのレシピ ブラウザごとのCSS3プレフィクスを自動で... 続きを読む

[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス

2010/12/26 313 users コリス Stripes ストライプ CSS height

対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float:... 続きを読む

色々な用途に使えそうなベクターデータをまとめてみました:phpspot開発日誌

2009/08/18 355 users ベクターデータ デザインワーク Photoshop ブラシ

最近見つけた、色々な用途に使えそうなベクターデータをまとめてみました。 Photoshopなんかのブラシにしてみても面白いですし、背景パターンなんかにも使えるかもしれません。 皆さんのデザインワークに役立てば幸いです。 49 Vector Ornamental Stars 星型のシェイプ Vector Design Elements - Circular vectors | Grafpedia 円... 続きを読む

だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」 | DesignDevelop

2009/07/26 251 users ジェネレーター DesignDevelop 下部 上部 背景

WEBデザインの印象を決定付ける大きな一つの要素の一つに背景があります。様々な背景素材やジェネレーターがWEB上で公開されていますが、今日紹介するのはだんだん小さくなるドット柄の背景パターンを制作してくれる背景ジェネレーター「Dotted Background Generator」です。 上記のように上部から下部に向ってだんだんと小さくなっていくような背景を寛太に作る事ができます。 詳しくは以下 ... 続きを読む

背景に使えるパターンいろいろ | DesignWalker

2009/02/05 525 users ジェネレータ DesignWalker ストライプ 背景 印象

サイトの背景を変えるだけでもサイトの印象は大きく変わります。 今回は、簡単に使える背景パターンのジェネレータとパターン素材をまとめてみました。 ジェネレータ編 Tiled backgrounds designer 背景の色やパターンを選択できるジェネレータです。 Stripe Generator きれいなストライプを背景にしたい方はこちら Tartan Designer - Tartan Make... 続きを読む

背景パターンいろいろ - DesignWalker

2008/01/23 655 users DesignWalker

IT-PLUS 連載『ウェブデザインの力』 今回のテーマは…。『新ブラウザー「クローム」はデザイナーの悩みの種!?』です。先日、Googleから公開された新しいオープンソースブラウザGoogle Chrome。みなさんはもう試されましたか？ 2008-09-10 Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌] 連載 海外Web制作事情『Webを制する者は、選挙を... 続きを読む

800個以上のの背景パターンを入手できるサイト「Kaliber10000」 - GIGAZINE

2006/08/08 247 users GIGAZINE NEXT Kaliber10000 閲覧

いろいろな背景パターンとして利用できる画像が置いてあります。画像によっては商用利用可能なものもあります。とにかくものすごい数があるので、飽きません。 詳細は以下から。 Kaliber10000 { The Designers' Lunchbox } 「Next」をクリックしてたどることができる数はわずかなので、ドロップダウンメニューの「View by name」からであれば確実に全種類を閲覧可能で... 続きを読む