[CSS]スタイルシートでページカールのエフェクトを実装するチュートリアル
パネルや画像などのちょっとしたアクセントにぴったり、紙がめくれたようなページカールのエフェクトをCSS3の「box-shadow」を使用して実装するスタイルシートを紹介します。 デモ [ad#ad-2] 実装は、下記のようになります。 HTML ページカールのエフェクトは「box-shadow」が適用できれば、どんな要素でも適用できます。 デモではリスト要素を使用しています。 <ul class="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> CSS3の「box-shadow」「RGBa」を使用します。 CSS3非対応の旧ブラウザ用のスタイルシートも記述されています。 ul.box { margin: 0; padding: 0; clear: both; overflow: hidden;
2010年総まとめ：Photoshopでつくるタイポグラフィのチュートリアル集
Photoshopでつくるタイポグラフィのチュートリアルを紹介済みのものから未紹介のものまで、2010年の総まとめです。
[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集
「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。 キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。 「:target疑似クラス」をつかって、タブコンテンツを実装 「:target疑似クラス」をつかって、画像ギャラリーを実装 「:target疑似クラス」をつかって、画像の拡大表示を実装 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装 「:targe
細部までしっかりこだわったヴィンテージデザインの6種類のエレメント
人気のデザイントレンドの一つに、ヴィンテージ・レトロスタイルがあります。デザインにこれらを取り入れるために使いこなしたい6種類のエレメントを紹介します。 The Elements of Retro Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事にはサンプルやチュートリアルなど豊富に掲載されています。 はじめに 1. サークルを使った形状 2. ツートンカラー、限定されたカラースキーム 3. タイポグラフィエレメントとトレンド 4. ブレンディングスタイル 5. テクスチャとノイズ 6. イメージクロップとレイヤーマスク はじめに ヴィンテージ、レトロといったスタイルは今日のデジタルアートワークにおいて、日々人気が高くなっています。社会が完全にデジタル化した後、デザインにおけるヴィンテージ、レトロをテーマにしたものはトレンドの一つと言えるでしょう。 こ
一ランク上の繊細なテクスチャを作成するPhotoshopのチュートリアル
複数の異なるエレメントを組み合わせて、複雑で繊細なテクスチャを作成するPhotoshopのチュートリアルを紹介します。 Textured backgrounds in Photoshop ※クリックで拡大 [ad#ad-2] 上記の繊細なテクスチャは複数のレイヤーに、異なるエレメントを組み合わせ、異なるレイヤーの不透明度とモードが使用されています。 Photoshopでのレイヤーの状態は下記のようになります。
3Dのリボンを実装するPhotoshopとCSSのチュートリアル
立体的なリボンをPhotoshopで作成しそれをCSSで実装したり、CSSだけでリボンを実装するチュートリアルを紹介します。 Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!) [ad#ad-2] 3Dのリボンを作成するPhotoshopのチュートリアル 作成した3Dのリボンを実装するCSSのチュートリアル CSSだけで3Dのリボンを作成するチュートリアル 3Dのリボンを作成するPhotoshopのチュートリアル まずは、Photoshopのチュートリアルから。 チュートリアルはステップごとにPhotoshopのキャプチャ付きで丁寧に解説されているので、英語が苦手な方でも分かりやすいものとなっています。また、リボンのPSDファイルもレイヤーが保持されたものがダウンロードできます。 ダウンロードできるPSDのキャプチャ 作成した3
[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル
jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース（HTMLとJavaScript）が必要最小限でまとめられており、デモページ（シンプルすぎかも）もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
写真を使用してデザインをするためのベストプラクティス
写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方
ウェブレイアウトの過剰なボックスやボーダーを取り除くスタディ
ボックスやボーダーはウェブレイアウトでコンテンツを組み立てるためによく使用される便利なパーツです。 しかし手軽に使用すると、過剰になってしまうこともあります。そんな過剰になってしまったボックスやボーダーを取り除くスタディを紹介します。 A Mild Case Of Borderitis 下記は上記の記事を意訳したものです。 ウェブデザインにおいて、ボックスやボーダーはコンテンツを組み立てるためによく機能します。しかしながら、そのボックスやボーダーがある一点に過剰に集まってしまうことがあります。
ミニマルなウェブデザインで使用される特徴的な12のエレメント
ミニマルデザインでよく使用される特徴的なエレメントとそれを効果的に使用したウェブサイトを1stwebdesignerから紹介します。 Modern Element Trends In Minimal Webdesign of 2010 ミニマルデザインの特徴的な12のエレメント 参考として当サイトで紹介した関連記事を記しています。 多くの効果的なネガティブスペース 参考：ウェブデザインにおけるネガティブスペースの活用ガイド グリッドベースのウェブデザイン 参考：グリッドシステム -サイトへの有効活用方法 クリアで大きなタイポグラフィ 繊細なテクスチャとパターン 小さいアイコン 軽いシャドウ、グラデーション、レタープレスのエフェクト 参考：ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル レタープレスエフェクトのチュートリアル リボン、スケッチ、点線、ルーラー、半透明な
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
紙・金属・布・皮・草などのテクスチャを作成するPhotoshopのチュートリアル
写真素材を使用せずに、紙、メタル、カーボン、布、レザー、草などのテクスチャを作成するPhotoshopのチュートリアルを紹介します。
illustratorでアイコンを作るチュートリアル25 – creamu
98075468/ iStockphoto/ Thinkstock illustratorでアイコンを作りたい。 そんなときにおすすめなのが、『25 Fresh Illustrator Tutorials to Help You Make Icons』。illustratorでアイコンを作るチュートリアル集です。 かっこいいものが揃っています。 Create A Simple Paint Brush Icon ペイントブラシを描くチュートリアル Create A Briefcase Icon ブリーフケースのアイコンを作るチュートリアル How to Draw the Vector Style Icons Used in the “Station Fixes” Template クールなびっくりマークアイコン How to Make a Realistic News / Newspaper
美しいHTMLの条件を綺麗にまとめた一枚の画像 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
オリジナルの紙のテクスチャを短時間で作成するPhotoshopのチュートリアル
8つのステップで、オリジナルの紙のテクスチャを作成するPhotoshopのチュートリアルをPsdtuts+から紹介します。 Quick Tip: Create a Realistic Paper Texture in 5 Minutes 各ステップのテキストはPhotoshop CS4の日本語版に準じたものに変更しています。また各キャプチャは元記事とは異なり、当方で実践したものです。 Step 1 Photoshop上に、1280x1024pxのファイルを新規作成します。中心に長方形の選択エリアを作成し、「クイックマスクモード[Q]」にします。[フィルター]-[ピクセレート]-[水晶]を選択し、「セルの大きさ」を小さく（3px）に指定し「OK」ボタンをクリックします。[Q]を押して、クイックマスクモードを解除します。 「新規レイヤーを作成[Ctrl]+[Shift]+[Alt]+[N]」し
ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル
なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか？ Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ
Photoshop初心者でもわかりやすい、グラデーションを巧みに使用したタイポグラフィ
光源とグラデーションを巧みに使用したタイポグラフィを作成するPhotoshopのチュートリアルをSix Revisionsから紹介します。 真ん中の上部に繊細な光源を設定し、テキストにはレイヤースタイルで「グラデーションオーバーレイ」と「ドロップシャドウ」を適用しています。 チュートリアルの説明は英語ですが、各ステップごとにPhotoshopのキャプチャが添えてあるため初心者の人でも実践できると思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSSスプライトにアニメーションを加えた繊細で美しいボタン
写真画像に「すりガラスのバー」を描くPhotoshopのチュートリアル