背景画像をつくるのに便利なサイト12選 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/01/18 950 users IDEA ジェネレータ 既出 Tartan Designer

ちょうど必要だったので簡単にエントリーしておきます。背景画像に使えるジェネレータいろいろです。既出のものもありますが、よくまとまっていたのでそのままご紹介。 Striped Backgrounds ストライプ柄を作れます。ランダム生成もしてくれますよ。 Tartan Designer - Tartan Maker タータンチェック柄をつくるときに便利。 Tiled backgrounds desi... 続きを読む

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/01 826 users 実装 Webクリエイターボックス CSS小技集 コード タタ

はるか6年前に書いた記事「 少しのコードで実装可能な20のCSS小技集 」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像を... 続きを読む

ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

2010/11/12 792 users CSS jQueryプラグイン ディスプレイ jQuery

ディスプレイ（ブラウザ）のサイズ、画面いっぱいに背景画像を拡大表示するCSSやjQuery プラグインをいくつか試してみたのでレビューをまとめてみました。CSSだけでフルスクリーンで背景表示ができるものや、jQueryのプラグインを使ったものなどいくつかご紹介します。ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけたjQueryのプラグインを試し... 続きを読む

継ぎ目のないシームレスな背景画像の無料素材とジェネレーターのまとめ | コリス

2011/05/18 727 users コリス ジェネレーター 継ぎ目 まとめ 無料素材

Archive by month 2011年5月 (27) 2011年4月 (45) 2011年3月 (33) 2011年2月 (43) 2011年1月 (40) 2010年12月 (48) 2010年11月 (52) 2010年10月 (54) 2010年9月 (47) 2010年8月 (59) 2010年7月 (49) 2010年6月 (43) 2010年5月 (35) 2010年4月 (48... 続きを読む

hr要素のデザインサンプル 12 | NxWorld

2013/09/12 698 users 罫線 備忘録 NxWorld 見栄え CSS

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 以下で紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません... 続きを読む

無料で商用利用可能な背景画像を提供する「背景倉庫」 - GIGAZINE

2011/11/25 680 users GIGAZINE 義務 カンパ 背景 http

「使用に当たっての制限や、報告の義務などは一切ありません。個人使用・商業目的使用への制限もありません」「かんばって描いたけど、もう自分には使う当てがないかもしれない、よければ誰かに使ってほしい、汎用性の高そうな背景を扱うサイトです」ということで、いろいろな背景画像を提供しているのが「背景倉庫」です。 背景倉庫 http://da-yama.secret.jp/index.html 各種背景画像はZ... 続きを読む

デザイナーが知っておくべき背景画像のリソースサイト集:phpspot開発日誌

2009/01/08 619 users Speckyboy ジェネレーター phpspot開発日誌

36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまってい... 続きを読む

iOS 7で「必要ない / 不便」という声が多そうな機能6選（と、その設定を変更する方法） : ライフハッカー［日本版］

2013/09/21 608 users ライフハッカー デバイス 例外 iOS 7 オフ

新しいバージョンのOSがリリースされると、ちょっとした問題や使いにくい点が生じることは多々あります。iOS 7も例外ではありません。今回は、特に使いにくそうな新機能6つをピックアップし、その変更方法を紹介します。 1．視差効果をオフにする iOS 7ではデバイスを傾けると背景画像も少しスクロールするという「視差効果」が採用されています。クールな仕掛けですが、そこまで便利というわけではありません。特... 続きを読む

大きな背景画像を使った魅力的なWebサイトを作ろう | Webクリエイターボックス

2014/09/10 546 users Webクリエイターボックス 迫力 背景 少しハードル メリット

以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをス... 続きを読む

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ | Webクリエイターボックス

2015/03/02 515 users CSS 配色 実例 実装 美しいグラデーション

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear... 続きを読む

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス

2014/07/02 514 users コリス GitHub CSS 一行 スニペット

背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 Responsive Full Background Image Using CSS Responsive Full Background Image Using CSS -GitHub デモ コンセ... 続きを読む

[JS]jQueryのプラグイン33+1選 -2012年2・3月 | コリス

2012/03/29 494 users jQuery bgStretcher コリス 配置 ブラウザ枠

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bgStretcher 写真などの背景画像をブラウザ枠いっぱいに簡単に配置。 Anystretch エレメントの背景画像のサイズを表示サイズに合わせて最 [...] 続きを読む

背景画像をブラウザの枠いっぱいに表示するテクニックの考察 | コリス

2010/11/25 480 users トレンド たくさん 各デモ CSS3 ページ下部

最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニッ... 続きを読む

HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート | コリス

2015/10/26 479 users ナビゲーション GIRLY DROP 上部 コリス ブラウザ

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップさ... 続きを読む

jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net

2011/09/26 462 users jQuery ラグイン スライドショー フルスクリーン net

気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一... 続きを読む

[JS]jQueryのプラグイン33+1選 -2011年4月 | コリス

2011/04/26 455 users jQuery コリス スラ アニメーション フルスクリーン

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Animated fullscreen background image slideshow アニメーションを伴ったフルスクリーンの背景画像を使ったスラ [...] 続きを読む

継ぎ目のない背景画像を作成するPhotoshopのチュートリアル | コリス

2010/05/23 448 users ボケ ウェブページ コリス エフェクト 継ぎ目

Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意... 続きを読む

PowerPointやKeynoteのスライド作成で、背景画像を使いたい時のお手軽Tips！ : ゼロスタートの広報ブログ

2012/01/24 434 users KeyNote ライトニングトーク PowerPoint

2012年01月24日14:14 PowerPointやKeynoteのスライド作成で、背景画像を使いたい時のお手軽Tips！ カテゴリやってみた Tweet こんにちは、ゼロスタート広報もりのです。 今回も、もしかしたら役に立つかもしれない 絶妙なラインをギリギリ狙っていきたいと思います。 突然ですが… LTの季節ですね！！ プレゼンの季節ですね！！ ※LT＝ライトニングトーク。 スライドで、ち... 続きを読む

【一部閲覧注意】いろんな意味でインパクトありすぎるWebサイト10 | Webクリエイターボックス

2011/05/24 407 users インパクト Webクリエイターボックス 配色 意味 閲覧注意

衝撃的な配色、心踊りだすgifアニメーション、斬新な背景画像…そんな一度見たら忘れられないくらいインパクトのあるWebサイトをいくつか紹介しようと思います！また、あなたのWebサイトを素敵に変身させてくれるWebサービスも一緒にご紹介します！　※一部閲覧注意のWebサイトもあるのでお気をつけください。 どこか懐かしさも感じるWebサイト 1.【閲覧注意】激安　格安　爆安ホームページ制作屋 Webク... 続きを読む

[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス

2012/02/09 388 users bgStretcher コリス スクリプト スライド 斜め方向

デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretch... 続きを読む

[CSS]テキストにグラデーション効果をつけるスタイルシート | コリス

2008/01/17 387 users span コリス グラデーション CSS 見出し要素

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectの... 続きを読む

これは知らないと損！背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動画解説付き》

2015/12/10 383 users Photoshop 輪郭 バリエーション PNG画像 背景

人物と背景を合成したい場合、予め人物の背景を透明にしたままで PNG画像保存 をしておくことで、 さまざまな別の背景画像に入れ替えることが可能になり、バリエーションを増やすことができます 。 関連記事 ⇒ これさえ身につけてしまえば、ほぼ思い通りの作品が作れるようになるPhotoshopの切り取りテクニック。 しかし、背景の色によっては合成したい画像がうまくなじまず、”カスカス”してしまう部分が出... 続きを読む

[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider | コリス

2011/03/09 354 users Simple コリス div要素 三拍子 スクリプト

jQuery.TinySliderの実装HTMLスライドで表示されているイメージはdiv要素の背景画像です。Simple 続きを読む

無料で使えるハイクオリティデザイナー年賀状素材365点以上をフロップデザインが配布中 - GIGAZINE

2010/11/30 353 users GIGAZINE プロップデザイン アイコン 年賀状 変型

2011年卯年の年賀状と年賀状パーツ素材がまとめてフロップデザインからフリーダウンロード可能になっており、個人的な年賀状目的であれば画像の変型や加工もOKとなっています。また、使いやすいように高画質なJPEG画像データで収録されており、そのまま使えるハガキデータから、ワンポイントのアイコン、マーク、背景画像、文字など、山ほど素材がてんこ盛り状態です。 どういったデザインがあるかという一覧は以下から... 続きを読む

CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】 | HTML5でサイトをつくろう

2012/07/11 347 users ブチ ボックスシャドウ 装飾 class サンプル

写真ブログcruzinで紹介している写真に背景画像で影をつけていますが、写真のブログとして作った「cruzin」では正方形型の写真用のフチ3パターンと長方形型の写真用のフチ3パターン、計6パターンのpng画像を背景画像としてあらかじめ用意しそれぞれにclass名をつけ指定しておきました。そしてフチをつけたい写真に先ほど用意したclassを指定することで写真のフチを表現していました。 写真ブログcr... 続きを読む