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

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

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

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のグラデ... 続きを読む

[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」からであれば確実に全種類を閲覧可能で... 続きを読む