50+ Useful jQuery Image Slider Roundup | Tripwire Magazine
50+ Useful jQuery Image Slider Roundup by Lars | Last updated Feb 1, 2017 | jQuery Plugin Collections | 71 comments jQuery image slider and jQuery Carousel plugins have become increasingly popular ingredients in web pages over the last year or so. Main reason for this is that image sliders are very powerful for featuring top content in a visual and appealing way. This, without taking too much of t
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
継ぎ目のない背景画像を作成するPhotoshopのチュートリアル | コリス
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
紙・金属・布・皮・草などのテクスチャを作成するPhotoshopのチュートリアル
写真素材を使用せずに、紙、メタル、カーボン、布、レザー、草などのテクスチャを作成するPhotoshopのチュートリアルを紹介します。
透明感のあるクリーンなスタイルのボタンを作成するPhotoshopのチュートリアル
透明感のあるクリーンなスタイルのボタンを作成するPhotoshopのチュートリアルをPhotoshop Starから紹介します。 Original Clean Style for Your Website チュートリアルではレイヤースタイルの設定なども細かくキャプチャ入りで解説してあるので、これからPhotoshopを学ぼうとしている人にも理解できるものだと思います。
Photoshop/Illustratorでつくるタイポグラフィのチュートリアル -Part20
Photoshop、Illustratorでつくるタイポグラフィのチュートリアルの紹介です。 ※明記の無いものはPhotoshopです。
ディテールの作りこみも丁寧に解説された、ウェブデザインを作成するPhotoshopのチュートリアル集
最近のトレンドを踏襲した、ディテールの作りこみも丁寧に解説されたウェブデザインを作成するPhotoshopのチュートリアルを紹介します。 ここ半年くらいに公開されたものから厳選しました。
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
SitePoint Blogs » JSON-P output with Rails
10 Amazing Web Developer Resume Examples for Different Web Dev Specializations
Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法 Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法 投稿日：2009年11月20日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopで光沢のあるシンプルなナビゲーションバーを作ってみたいと思います。 Step1 ： はじめに Step2 ： ブラシで円を描く Step3 ： ドロップシャドウを追加 Step4 ： 選択範囲を作成 Step5 ： タイトルを入力 Step6 ： 完成
Reflection.js
Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB. Reflect-o-matic See what reflection.js looks like o
A Gradient Tutorial - 9rules Official Blog
(Posting this here instead of BusinessLogs.com because our server is currently being moved!) If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a
Web2.0なグラデーション？ - WhitePaper.blog
Web2.0なグラデーション？ posted by osamu at 20:04:01 on 2007-03-12 ちょっと気になる記事が。 グラデーションを使ったデザインのやり方 - GIGAZINE はやりのWeb2.0的なグラデーションについて書かれていますが、書かれていることと例があってない？ どうも大元になった9rulesの記事を読み違えているような？読み間違いをまた間違った例を使って、とややこしい状態なので、例違い指摘の前半部分も残しておきます。 日本語訳とされているjmblog.jp - Web2.0っぽいグラデーションのコツも「さて、どれが一番きれいでしょう？」ってことになってるのかぁ。私の勘違いか？ ●濁色のグラデーション？ 文字通りにとれば、彩度の低い色同士のグラデーション？9rulesに出ている(1)は「彩度を変化させるグラデーション」だと思う
わずかな時間でユーザーの注意を惹きつけるウェブデザインの7つのポイント
ユーザーがウェブサイトを訪れる時間はわずかなものです。その短時間の間に、ユーザーの注意を惹きつけ、印象に残るようにするための7つの方法を紹介します。 Billboard Web Design: How to Win Your Audience's Attention [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事では他の事例やビルボードの素材も紹介しています。 はじめに 1. クリエイティブとユニーク 2. 説得力のある見出し 3. 巧妙さと辛辣さ 4. ブランディングを印象づける 5. 注意を惹きつけるアイキャッチ 6. ポイントはクリーンでシンプルでストレートに 7. 明快さとコントラスト はじめに 人の目を惹くビルボードスタイル（立て看板）の広告は目にした瞬間、簡単に人々の記憶に残り、楽しいものです。イメージのカラーやフォントも重要ですが、アイデアにもユニークがあり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
美しいモザイクのエフェクトを描くPhotoshopのチュートリアル | コリス
Photoshop無料ブラシで簡単にサイトの背景を描いてみる - DesignWalker
Photoshopのブラシサイトまとめ - DesignWalker
Photoshopの無料ブラシを使って、たった３分でプロが作ったようなグラフィックを作る方法 - DesignWalker
Photoshop暗闇講座〜インデックス〜